ARIA가 기본 HTML의 의미를 보완하는 경우와 한계를 이해합니다.
ARIA는 요소의 역할, 상태, 관계를 접근성 트리에 전달하지만 모양이나 키보드 동작을 자동으로 만들지 않습니다. 네이티브 HTML로 표현할 수 없다면 role과 aria-*를 사용하고, aria-expanded처럼 화면 상태가 바뀔 때 값도 함께 갱신해야 합니다.
클릭 리스너는 aria-expanded 값을 문자열 true와 비교해 현재 상태를 읽고, 반대 값을 다시 문자열로 넣은 뒤 같은 판단으로 버튼 문구와 panel.hidden을 함께 바꿉니다. 그래서 첫 클릭에서 aria-expanded는 true, 문구는 도움말 닫기가 되고 hidden이 풀리며 섹션이 나타납니다. aria-controls는 이 버튼이 helpPanel을 조작한다는 관계만 알릴 뿐, 열고 닫는 일은 스크립트가 맡습니다.
마우스를 쓰지 않거나 화면을 보지 않는 사용자도 같은 정보와 기능에 도달하게 만드는 문서 구조입니다. ARIA를 더하기 전에 알맞은 기본 요소가 있는지부터 살펴보세요.
실제 label이나 button을 만들 수 있는데 aria-label과 role로 대체하지 마세요. 잘못된 ARIA는 의미 없는 HTML보다 더 혼란스러울 수 있습니다.
직접 바꿔보세요버튼을 눌러 aria-expanded와 hidden이 함께 바뀌는지 개발자 도구에서 확인하세요.