ARIA가 기본 HTML의 의미를 보완하는 경우와 한계를 이해합니다.
ARIA는 요소의 역할, 상태, 관계를 접근성 트리에 전달하지만 모양이나 키보드 동작을 자동으로 만들지 않습니다. 네이티브 HTML로 표현할 수 없다면 role과 aria-*를 사용하고, aria-expanded처럼 화면 상태가 바뀔 때 값도 함께 갱신해야 합니다.
예제에서는 aria-expanded="false" aria-controls="panel" 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.
마우스를 쓰지 않거나 화면을 보지 않는 사용자도 같은 정보와 기능에 도달하게 만드는 문서 구조입니다. ARIA를 더하기 전에 알맞은 기본 요소가 있는지부터 살펴보세요.
먼저 현재 결과를 확인한 뒤 버튼을 눌러 aria-expanded와 hidden이 함께 바뀌는지 개발자 도구에서 확인하세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.
실제 label이나 button을 만들 수 있는데 aria-label과 role로 대체하지 마세요. 잘못된 ARIA는 의미 없는 HTML보다 더 혼란스러울 수 있습니다.
직접 바꿔보세요버튼을 눌러 aria-expanded와 hidden이 함께 바뀌는지 개발자 도구에서 확인하세요.