섹션별로 콘텐츠를 접고 펼칠 수 있는 패턴
관련 WCAG 기준 — 클릭하여 상세 보기
헤더에 button 역할
각 섹션 제목은 role="button" 또는 <button>을 사용해야 합니다.
각 헤더 버튼에 aria-expanded
패널이 열릴 때 aria-expanded="true", 닫힐 때 aria-expanded="false"여야 합니다.
헤더 버튼이 패널을 참조
각 헤더 버튼에 aria-controls로 패널의 id를 지정해야 합니다.
Enter/Space로 패널 토글
Enter 또는 Space로 패널을 열고 닫을 수 있어야 합니다.
버튼을 heading으로 감싸기
문서 구조에 맞는 h2–h6 heading 요소 내에 버튼을 배치하세요.
화살표 키로 헤더 탐색
아래 화살표로 다음 헤더, 위 화살표로 이전 헤더로 이동할 수 있어야 합니다.
Home/End로 첫/마지막 헤더 이동
Home으로 첫 번째, End로 마지막 헤더로 이동할 수 있어야 합니다.
heading 없이 버튼만 사용 금지
heading 없이 버튼만 사용하면 스크린리더의 문서 구조 탐색이 불가합니다.
예고 없는 단일 확장 강제 금지
다른 패널을 자동으로 닫는 경우 사용자에게 이 동작을 명확히 알려야 합니다.
AccordionSummary 헤딩 연결
AccordionSummary를 h3 등 heading으로 감싸서 문서 구조를 유지하세요.