동적 접근성
아코디언 UI에서 aria-expanded가 작동하지 않는 이유: 토글 버튼 상태 동기화와 키보드 접근성 설계
WCAG 2.2 성공 기준 4.1.2(Name, Role, Value)와 1.3.1(Info and Relationships)에 따라, 아코디언 및 접힘/펼침 UI 구현 시 div 클릭 오용을 시정하고 aria-expanded 및 aria-controls 동적 속성으로 접힘 상태를 보조공학기기에 표준에 맞게 노출하는 실무 기법을 분석합니다.
aria-expanded="true|false" 및 aria-controls="panel-id"를 동기화하여 보조기술이 상태를 해석할 수 있는 구조를 제공합니다.실무 검증 기록
마크업 및 접근성 트리 대조
본 기록은 공개 fixture와 재현 조건을 기준으로 정리한 기술 설명입니다. 실제 브라우저·스크린리더 조합의 동작은 별도 수동 검토가 필요합니다.
| 검증 상태 | 공개 fixture 기반 재현 완료 |
|---|---|
| 검증 기준 | 공개 fixture 및 재현 조건 |
| 검증 범위 | 아코디언 토글 버튼 aria-expanded 상태 동기화 및 키보드 조작 검증 및 명시된 입력값에 한정 |
| 수동 확인 | 실제 브라우저·키보드·스크린리더 환경에서 별도 확인 필요 |
| fixture에서 확인한 기대 결과 | [실패 상태] 버튼 상태와 실제 panel 표시가 불일치 ➔ [수정 목표] 토글·관계·키보드 동작을 같은 이벤트로 동기화 |
검증에 사용된 실제 픽스처 / 재현 조건
닫힌 panel, aria-expanded=false, hidden 상태- 아코디언 헤더를 H2~H4 제목 태그로 감싸는 구조적 마크업 정합성
- 여러 아코디언이 동시에 열릴 수 있는 다중 모드 vs 단일 모드 동작
FAQ나 사이드바 메뉴의 아코디언 UI에서 버튼 클릭 시 패널 내용은 열리지만 aria-expanded 속성이 'false'로 고정되어 있거나, 반대로 패널은 닫혔는데 속성만 'true'로 남아 있는 경우 시각 상태와 보조기술 인지 상태가 불일치합니다. 토글 버튼과 패널 간의 1:1 상태 동기화 및 키보드 조작 구조를 분석합니다.
아코디언 토글 시점의 마크업과 접근성 트리 불일치
접근성 트리는 버튼의 aria-expanded 속성값을 읽어 현재 콘텐츠가 펼쳐져 있는지(expanded) 접혀 있는지(collapsed) 판단합니다.
시각적으로 패널을 display:none에서 display:block으로 전환하면서 자바스크립트에서 aria-expanded 속성을 업데이트하지 않으면, 스크린리더 사용자는 화면에 내용이 노출되었음에도 여전히 접힌 상태로 안내받아 콘텐츠를 찾지 못할 수 있습니다.
네이티브 button과 aria-expanded·aria-controls 동기화
네이티브 button과 aria-expanded 상태를 동기화하면 보조기술이 토글 상태를 해석할 수 있는 구조를 제공할 수 있습니다. 실제 발표와 키보드 동작은 구현 환경에서 별도로 확인해야 합니다.
버튼 요소에는 토글 상태를 나타내는 aria-expanded와 조작 대상 패널의 ID를 가리키는 aria-controls를 부여하고, 패널 영역에는 hidden 속성 또는 CSS display 제어를 연동합니다.
- 접힘 상태: <button aria-expanded='false' aria-controls='faq-panel-1'>질문 1</button><div id='faq-panel-1' hidden>내용</div>
- 펼침 상태: <button aria-expanded='true' aria-controls='faq-panel-1'>질문 1</button><div id='faq-panel-1'>내용</div>
- 키보드 조작: <button> 요소를 사용하여 Enter 및 Space 키 입력 시 동일한 토글 이벤트가 발생하도록 구성
흔한 마크업 안티패턴과 올바른 예방책
| 잘못된 마크업 패턴 | 올바른 접근성 구현 |
|---|---|
| <div onclick='toggle()'>로 아코디언 헤더를 만들고 aria-expanded 속성을 부여하지 않는 경우 | 네이티브 <button> 요소를 사용하고 클릭/키보드 이벤트 시 aria-expanded='true|false'를 동기화합니다. |
| 다중 아코디언에서 한 패널이 닫힐 때 다른 패널의 aria-expanded 상태를 갱신하지 않는 경우 | 단일 오픈 모드일 경우 기존에 열려 있던 버튼의 aria-expanded를 'false'로 함께 업데이트합니다. |
보조공학 낭독 및 브라우저 파싱 한계
- div 태그에 클릭 이벤트만 부여하고 키보드 리스너(onKeyDown)나 button 요소를 사용하지 않으면 키보드 전용 사용자는 조작 자체가 불가능합니다.
- 아코디언 패널이 닫혀 있을 때는 내부 링크/버튼이 탭 키에 걸리지 않도록 display:none 또는 hidden 처리를 해야 합니다.