웹 접근성과 시맨틱 마크업

웹 접근성(a11y)은 시각·청각·운동·인지 등 다양한 조건의 사용자가 콘텐츠를 동등하게 이용할 수 있게 하는 것이다. 스크린 리더 사용자뿐 아니라 키보드만 쓰는 사람, 일시적 부상, 밝은 햇빛 아래의 누구나 그 혜택을 본다.

접근성의 90%는 ‘의미에 맞는 태그’에서 나온다. <div>로 모든 걸 만들면 보조기기는 그게 버튼인지 제목인지 알 수 없다. 시맨틱 요소는 의미와 기본 동작(키보드·포커스)을 공짜로 제공한다.

<!-- 나쁨: 의미도 키보드 동작도 없다 -->
<div class="btn" onclick="save()">저장</div>

<!-- 좋음: 버튼의 의미·포커스·엔터/스페이스 동작이 기본 제공 -->
<button type="button" onClick={save}>저장</button>

<!-- 페이지 구조도 의미 있는 랜드마크로 -->
<header> <nav> ... </nav> </header>
<main>
  <h1>제목</h1>      <!-- 페이지당 h1 하나, 단계 건너뛰지 않기 -->
  <section> <h2>...</h2> </section>
</main>
<footer> ... </footer>

• 랜드마크: header·nav·main·footer로 영역을 나누면 스크린 리더 사용자가 구역을 건너뛰며 탐색할 수 있다.
• 제목 구조: h1→h2→h3 순서를 지키면 문서의 목차가 된다. 크기 때문에 단계를 건너뛰지 말고, 스타일은 CSS로 조정한다.
• 대체 텍스트: 의미 있는 이미지엔 alt를, 장식 이미지엔 빈 alt=""를 줘 스크린 리더가 적절히 처리하게 한다.

마우스 없이 Tab·Enter·화살표만으로 모든 기능을 쓸 수 있어야 한다. 키보드 접근성은 스크린 리더·스위치 등 여러 보조기술의 토대이기도 하다.

ARIA는 시맨틱 HTML로 표현할 수 없는 의미를 보조기기에 전달하는 속성이다. 강력하지만 오용하기 쉽다. ‘ARIA의 제1규칙은 ARIA를 쓰지 않는 것’ — 네이티브 요소로 되는 일은 그걸 쓴다.

폼은 접근성 문제가 가장 자주 터지는 곳이다. 핵심은 ‘모든 입력에 이름이 있고, 오류를 명확히 전달하는 것’이다.

<label htmlFor="email">이메일</label>
<input
  id="email"
  type="email"
  required
  aria-invalid={hasError}
  aria-describedby={hasError ? 'email-error' : undefined}
/>
{hasError && (
  <p id="email-error" role="alert">올바른 이메일 형식이 아닙니다.</p>
)}

• 레이블 연결: 모든 입력에 <label>을 연결한다. placeholder는 레이블을 대체하지 못한다(입력하면 사라진다).
• 오류 전달: aria-describedby로 입력과 에러 메시지를 묶고, role="alert"로 즉시 읽어준다.
• 충분한 타깃 크기: 터치 대상은 넉넉히(약 44px) 잡아 운동 제약이 있는 사용자도 누르기 쉽게 한다.