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

무엇을 요구하나요?

직접 만든 웹 애플리케이션 부품(탭, 아코디언, 모달, 드롭다운 메뉴, 토글, 슬라이더 등)도 보조기기로 쓸 수 있어야 합니다. 그러려면 부품마다 다음 세 가지가 프로그램에 전달되어야 합니다.

정보	뜻	예
역할(role)	무엇인가	버튼, 탭, 대화상자
상태(state)	지금 어떤가	펼침/접힘, 선택됨, 켜짐
이름(name)	무엇을 하는가	“메뉴 열기”, “배송 정보”

그리고 키보드로 조작할 수 있어야 합니다.

자주 틀리는 예

1. 아코디언의 펼침 상태를 알리지 않음

<div class="acc-head" onclick="toggle(1)">배송 안내</div>
<div class="acc-body" id="acc1">…</div>

<h3>
  <button type="button" aria-expanded="false" aria-controls="acc1">배송 안내</button>
</h3>
<div id="acc1" hidden>…</div>

버튼을 누를 때 aria-expanded를 true/false로 바꾸고 hidden을 토글합니다. 간단한 경우는 HTML의 <details>·<summary>를 써도 됩니다.

2. 탭 메뉴에 역할·선택 상태가 없음

<div class="tabs"><span class="on">상세정보</span><span>리뷰</span></div>

<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">리뷰</button>
</div>
<div role="tabpanel" id="p1" aria-labelledby="t1">…</div>
<div role="tabpanel" id="p2" aria-labelledby="t2" hidden>…</div>

탭 사이는 방향키로 이동하는 것이 일반적인 동작입니다(APG 탭 패턴).

3. 레이어 팝업이 대화상자로 알려지지 않음

<div class="popup">…</div>

<dialog id="notice" aria-labelledby="notice-title">
  <h2 id="notice-title">공지사항</h2>
  …
  <button type="button" onclick="this.closest('dialog').close()">닫기</button>
</dialog>

<dialog>를 showModal()로 열면 역할, 초점 가두기, Esc 닫기를 브라우저가 처리합니다.

확인하는 방법

1. 화면 낭독기로 각 부품에 가서 역할·상태·이름이 읽히는지 들어보세요. 예: “배송 안내, 버튼, 접힘”.
2. 상태를 바꾼 뒤(펼치기, 탭 선택) 바뀐 상태가 읽히는지 확인하세요.
3. 확장 프로그램 페이지 검사는 잘못된 ARIA 속성 값, 필요한 상위 역할이 없는 요소(예: tablist 없는 tab), 이름 없는 버튼, 버튼 안에 넣은 링크 등을 찾아줍니다. 역할에 맞는 키보드 동작은 직접 확인해야 합니다.