기본 코드 예시
공통 베이스라인
헤더에 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에 id와 aria-controls 명시
WAI-ARIA 가이드라인에 따라 AccordionSummary에 id를, aria-controls에 패널 id를 지정해야 합니다. MUI는 이를 기반으로 aria-labelledby를 자동 파생합니다.
slotProps.heading으로 헤딩 레벨 조정
Accordion은 기본적으로 h3를 사용합니다. 페이지 헤딩 계층에 맞게 slotProps={{ heading: { component: "h2" } }}로 변경하세요.
코드 샘플
구현 노트
- –AccordionSummary의 id와 aria-controls를 설정하면 MUI가 패널에 aria-labelledby를 자동으로 파생합니다.
- –aria-expanded는 expanded prop 상태에 따라 자동으로 관리됩니다.
- –slotProps={{ heading: { component: "h3" } }}로 헤딩 레벨을 페이지 구조에 맞게 조정하세요.
- –slotProps={{ transition: { unmountOnExit: true } }}로 비활성 패널을 DOM에서 제거해 성능을 개선할 수 있습니다.