버튼 클릭으로 콘텐츠를 표시하거나 숨기는 패턴
관련 WCAG 기준 — 클릭하여 상세 보기
button 역할 사용
콘텐츠를 표시/숨기는 컨트롤은 role="button" 또는 <button>이어야 합니다.
aria-expanded로 상태 반영
콘텐츠가 보일 때 aria-expanded="true", 숨겨질 때 aria-expanded="false"를 설정해야 합니다.
Enter/Space로 토글
Enter 또는 Space로 콘텐츠 가시성을 토글할 수 있어야 합니다.
aria-controls로 콘텐츠 참조
버튼이 aria-controls로 제어하는 콘텐츠 요소의 ID를 가리켜야 합니다.
포커스 표시
키보드 탐색을 위한 명확한 포커스 링이 있어야 합니다.
접힌 콘텐츠 숨김 처리
접힌 콘텐츠는 display:none 또는 hidden 속성으로 보조 기술에서 완전히 제거해야 합니다.
aria-expanded 생략 금지
aria-expanded 없이는 스크린리더가 열림/닫힘 상태를 알릴 수 없습니다.
CSS visibility/opacity만 사용 금지
visibility:hidden이나 opacity:0만으로 숨기면 접근성 트리에서 제거되지 않습니다.
Collapse 컴포넌트 활용
MUI Collapse로 애니메이션을 추가해도 hidden 속성 대신 display:none이 적용되어 접근성이 유지됩니다.