접근성과 ARIA

웹 접근성은 장애가 있는 사용자를 포함해 누구나 콘텐츠를 이용할 수 있게 만드는 것입니다. 좋은 소식은, 시맨틱 HTML을 제대로 쓰는 것만으로 접근성의 대부분이 해결된다는 점입니다. 이번 강의에서는 접근성의 핵심과 ARIA를 배웁니다.

학습 목표

• 시맨틱 HTML이 접근성의 출발점임을 이해한다.
• alt, label로 콘텐츠의 의미를 전달한다.
• role과 aria-* 속성의 역할을 안다.
• 키보드 포커스와 포커스 순서를 이해한다.

시맨틱이 곧 접근성

스크린 리더 같은 보조 기기는 시맨틱 태그를 읽고 사용자에게 구조를 알려 줍니다. button, nav, h1 같은 태그는 그 자체로 의미와 동작을 제공합니다.

<!-- 권장: 기본 접근성을 갖춘 button -->
<button>저장</button>

<!-- 비권장: 의미도 키보드 동작도 없는 div -->
<div onclick="save()">저장</div>

div로 버튼을 흉내 내면 키보드로 누를 수 없고 스크린 리더가 버튼임을 알 수 없습니다.

💡 TIP — 접근성 작업의 첫 단계는 ARIA를 추가하는 것이 아니라, 올바른 시맨틱 태그를 고르는 것입니다. "ARI A를 안 쓰는 것이 잘못 쓰는 것보다 낫다"는 원칙이 있습니다.

텍스트 대안 제공

이미지의 alt, 입력의 label처럼, 화면에만 의존하지 않도록 텍스트 대안을 제공합니다.

<img src="/warning.png" alt="경고: 저장 공간 부족" />

<label for="search">검색어</label>
<input type="search" id="search" name="q" />

장식용 이미지는 alt=""로 비워 보조 기기가 건너뛰게 합니다.

role과 aria 속성

role은 요소의 역할을, aria-*는 상태나 속성을 보조 기기에 알립니다. 적절한 시맨틱 태그가 없을 때 보완용으로 사용합니다.

<div role="alert">저장에 실패했습니다.</div>

<button aria-expanded="false" aria-controls="menu">메뉴</button>
<ul id="menu" hidden>...</ul>

<nav aria-label="주요 메뉴">...</nav>

⚠️ 주의 — aria-*로 상태를 표시했다면, 자바스크립트로 실제 상태가 바뀔 때 그 값도 함께 갱신해야 합니다. 정적인 aria-expanded="false"만 두면 오히려 잘못된 정보를 전달합니다.

키보드 포커스

마우스 없이 키보드(Tab 키)만으로 모든 기능을 쓸 수 있어야 합니다. a, button, input 등은 기본적으로 포커스를 받습니다.

<a href="#main" class="skip-link">본문 바로가기</a>
...
<main id="main">...</main>

tabindex로 포커스 순서를 조정할 수 있지만, 양수 값은 순서를 꼬이게 하므로 피합니다. 포커스 가능하게만 하려면 tabindex="0", 포커스에서 제외하려면 tabindex="-1"을 씁니다.

⚠️ 주의 — 포커스를 받은 요소의 외곽선(outline)을 디자인 이유로 없애지 마세요. 키보드 사용자가 현재 위치를 잃어버립니다. 꼭 바꾸려면 더 잘 보이는 스타일로 대체해야 합니다.

요약

• 접근성의 출발점은 올바른 시맨틱 태그 선택입니다.
• 이미지엔 alt, 입력엔 label로 텍스트 대안을 제공합니다.
• role과 aria-*는 시맨틱이 부족할 때 보완용으로 씁니다.
• aria 상태는 실제 상태 변화에 맞춰 갱신해야 합니다.
• 키보드만으로 모든 기능을 쓸 수 있어야 하고, 포커스 표시를 없애지 않습니다.

연습문제

1. 클릭 동작이 있는 요소를 접근성 있게 마크업하세요.
2. 텍스트 없이 아이콘만 있는 닫기 버튼에 이름을 부여하세요.
3. 펼침/접힘 토글 버튼에 상태 속성을 추가하세요.
4. 페이지 상단에 본문 바로가기 링크를 작성하세요.

힌트 — 보이지 않는 이름은 aria-label, 시맨틱 버튼은 button입니다.