디자이너가 알아야 할 웹 접근성 기초 — alt 태그, 시맨틱 구조, 색상 대비

웹 접근성이라는 말을 들으면 왠지 어렵게 느껴진다. 하지만 핵심은 단순하다. 모든 사람이 웹 콘텐츠를 불편함 없이 이용할 수 있게 만드는 것이다. 시각 장애인이 스크린리더로 페이지를 읽을 수 있는지, 키보드만으로 사이트를 탐색할 수 있는지 같은 것들이 여기 해당한다.

디자이너 입장에서 웹 접근성을 완벽하게 다 챙기기는 어렵다. 하지만 기본적인 몇 가지만 습관적으로 적용해도 훨씬 나은 웹을 만들 수 있다.

이미지에 alt 태그 — 스크린리더가 읽는 설명

시각 장애인은 스크린리더라는 도구로 웹페이지를 소리로 듣는다. 이미지가 있으면 스크린리더는 alt 속성에 적힌 텍스트를 읽어준다. alt가 없으면 "이미지"라고만 읽거나 파일명을 읽는다.

<!-- ❌ alt 없음 -->
<img src="logo.png">

<!-- ✅ alt 있음 -->
<img src="logo.png" alt="디자이너의 코딩노트 로고">

💡 장식용 이미지는 alt를 비워둔다 의미 없는 배경 이미지나 장식용 이미지는 alt=""로 비워두면 스크린리더가 건너뛴다. 모든 이미지에 설명을 넣는 게 아니라, 의미 있는 이미지에만 적절한 설명을 넣는 것이다.

시맨틱 태그 — 페이지 구조를 읽히게 한다

스크린리더는 HTML 태그를 기반으로 페이지 구조를 파악한다. <div>만으로 이루어진 페이지는 구조를 파악하기 어렵다. <h1>, <header>, <main>, <article>, <nav> 같은 시맨틱 태그를 쓰면 페이지의 흐름이 명확해진다.

• 1
  <h1> ~ <h6> — 제목 계층 구조. h1은 페이지당 하나, 순서대로 사용
• 2
  <header> — 페이지 또는 섹션의 상단 영역
• 3
  <main> — 페이지의 주요 콘텐츠 영역
• 4
  <nav> — 내비게이션 메뉴 영역
• 5
  <article> — 독립적인 콘텐츠 단위 (블로그 글, 뉴스 기사 등)

색상 대비 — 텍스트가 잘 보여야 한다

시각적으로 불편함이 있는 사용자를 위해 텍스트와 배경의 색상 대비가 충분해야 한다. 밝은 배경에 연한 회색 텍스트처럼 대비가 낮으면 일반 사용자도 읽기 어렵다. WCAG 기준으로 일반 텍스트는 최소 4.5:1 이상의 대비를 권장한다.

💡 색상 대비 확인 사이트 WebAIM Contrast Checker에서 배경색과 텍스트색을 입력하면 대비 비율을 바로 확인할 수 있다. 디자인 시안 검토할 때 한 번씩 체크해보면 좋다.

웹 접근성은 특별한 것이 아니라 기본을 지키는 것이다.
이미지에 alt 태그 달기, 시맨틱 태그로 구조 잡기, 색상 대비 확인하기 — 이 세 가지만 습관적으로 챙겨도 훨씬 나은 웹을 만들 수 있다.
접근성이 좋은 웹은 SEO에도 유리하다. 스크린리더가 잘 읽는 구조는 검색 엔진도 잘 읽는다.