모든 패턴
Accordion
섹션별로 콘텐츠를 접고 펼칠 수 있는 패턴
관련 WCAG 기준 — 클릭하여 상세 보기
기본 코드 예시
Baseline (React)tsx
Loading...
공통 베이스라인
모든 디자인 시스템에 적용Must4
헤더에 button 역할
각 섹션 제목은 role="button" 또는 <button>을 사용해야 합니다.
각 헤더 버튼에 aria-expanded
패널이 열릴 때 aria-expanded="true", 닫힐 때 aria-expanded="false"여야 합니다.
헤더 버튼이 패널을 참조
각 헤더 버튼에 aria-controls로 패널의 id를 지정해야 합니다.
Enter/Space로 패널 토글
Enter 또는 Space로 패널을 열고 닫을 수 있어야 합니다.
Should3
버튼을 heading으로 감싸기
문서 구조에 맞는 h2–h6 heading 요소 내에 버튼을 배치하세요.
화살표 키로 헤더 탐색
아래 화살표로 다음 헤더, 위 화살표로 이전 헤더로 이동할 수 있어야 합니다.
Home/End로 첫/마지막 헤더 이동
Home으로 첫 번째, End로 마지막 헤더로 이동할 수 있어야 합니다.
Avoid2
heading 없이 버튼만 사용 금지
heading 없이 버튼만 사용하면 스크린리더의 문서 구조 탐색이 불가합니다.
예고 없는 단일 확장 강제 금지
다른 패널을 자동으로 닫는 경우 사용자에게 이 동작을 명확히 알려야 합니다.
디자인 시스템별 구현
추가 체크포인트
AccordionSummary 헤딩 연결
AccordionSummary를 h3 등 heading으로 감싸서 문서 구조를 유지하세요.
코드 샘플
MUI Accordiontsx
Loading...
구현 노트
- –MUI Accordion은 aria-expanded를 자동으로 처리합니다.
- –disableGutters와 square prop으로 스타일을 조정할 수 있습니다.