8.2.1 웹 애플리케이션 접근성 준수

요구 사항

웹 콘텐츠를 사용하는 데 필요한 플러그인이나 웹 페이지의 기능을 실행하는 웹 애플리케이션은 사용자가 웹 페이지에 접근해 사용하는 것을 방해하지 않아야 하며, 다음 요구 사항을 모두 적용해 제작해야 합니다.

• 접근성 프로그래밍 인터페이스 사용 지원: 운영체제나 플랫폼이 제공하는 접근성 API를 사용해 제작합니다. 그렇지 않으면 보조기술이 해당 기능을 지원하지 못할 수 있습니다.
• 접근성 API 대체수단 제공: 플랫폼 접근성 API에 정의되지 않은 새 기능을 구현할 때는 그 기능의 명칭, 역할, 상태, 값을 접근성 API로 전달해 보조기술이 이용할 수 있게 합니다.
• 보조기술 지원: 국내 보조기술로 접근할 수 없는 웹 애플리케이션은 가능한 한 쓰지 않으며, 꼭 써야 한다면 대체수단을 제공합니다.

왜 필요한가요

직접 만든 탭, 메뉴, 대화상자, 트리 같은 위젯은 HTML 요소만으로는 역할과 상태가 보조기술에 전달되지 않습니다. 이름·역할·상태·값이 접근성 API로 노출되어야 화면낭독기 사용자가 “탭, 3개 중 1번째, 선택됨”처럼 인식하고 조작할 수 있습니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 음성 명령·스위치 등 보조기술 사용자
• 키보드 사용자

적용 방법

웹에서 플랫폼 접근성 API로 정보를 전달하는 표준 수단이 네이티브 HTML 요소와 WAI-ARIA입니다. 가능한 한 네이티브 요소를 쓰고, 직접 만든 위젯은 ARIA의 역할·상태·속성과 키보드 동작을 APG 패턴에 맞게 구현합니다. 기본 원리는 이름·역할·값 가이드를 참고하세요.

<div role="tablist" aria-label="상품 정보">
  <button role="tab" id="t1" aria-selected="true" aria-controls="p1">상세 정보</button>
  <button role="tab" id="t2" aria-selected="false" aria-controls="p2" tabindex="-1">리뷰 (12)</button>
</div>
<div role="tabpanel" id="p1" aria-labelledby="t1">…</div>
<div role="tabpanel" id="p2" aria-labelledby="t2" hidden>…</div>

상태가 바뀌면 ARIA 속성 값도 함께 바꿔야 합니다(상태 동기화). 화면 갱신을 알려야 할 때는 라이브 리전을 사용합니다. 탭은 탭 패턴, 대화상자는 대화상자 패턴을 참고하세요.

사례

<button type="button" aria-pressed="false">알림 받기</button>

<span class="checkbox checked" onclick="toggle(this)"></span> 약관 동의

자주 하는 실수

• div로 만든 버튼·체크박스·탭에 역할과 상태 정보가 없습니다.
• 펼침 메뉴가 열리고 닫혀도 aria-expanded 값이 바뀌지 않습니다.
• ARIA 역할을 지정했지만 해당 역할에 필요한 키보드 동작이 없습니다.
• 캔버스·플래시·액티브X 등 보조기술이 접근할 수 없는 기술로만 기능을 제공하고 대체수단이 없습니다.
• 필수 하위 역할(예: tablist 안의 tab)이 빠져 있습니다.

검사 방법

• 페이지의 사용자 정의 위젯(탭, 메뉴, 대화상자, 아코디언, 슬라이더, 콤보 상자 등)을 찾습니다.
• 개발자 도구의 접근성 트리에서 각 위젯의 이름, 역할, 상태, 값이 올바르게 노출되는지 확인합니다.
• 화면낭독기와 키보드로 실제 조작하며 상태 변화가 전달되는지 확인합니다.
• 플러그인·외부 콘텐츠가 국내에서 쓰이는 보조기술(센스리더, NVDA 등)로 접근 가능한지, 아니면 대체수단이 있는지 확인합니다.
• 인증 심사에서는 전문가 심사와 장애인 사용자 심사로 확인하므로, 자동 검사 도구 결과만으로 준수를 판단하지 않습니다.

관련 ARIA

다른 지침의 대응 항목