버튼(헤더) 하나와 그 아래 패널이 한 쌍입니다. 헤더는 aria-expanded로 열림 상태를, aria-controls로 자신이 여는 패널의 id를 가리킵니다. 높이 애니메이션은 grid-template-rows를 0fr↔1fr로 바꾸는 CSS 트릭으로 만들 수 있어 JS로 height를 재는 것보다 가볍습니다.
트리뷰와 다른 점은 계층 깊이입니다 — 아코디언은 보통 1단계 섹션을 여닫지만 트리뷰는 폴더 안의 폴더처럼 몇 단계든 중첩됩니다. 탭과 다른 점은 배치입니다 — 탭은 가로로 나열돼 콘텐츠 영역 하나만 남기고 바꿔치기하지만, 아코디언은 세로로 쌓이고 여러 섹션이 동시에 펼쳐질 수도 있습니다.
헤더는 반드시 진짜 button이어야 합니다(div+onclick 금지) — 그래야 Tab으로 순서대로 오고 Enter/Space로 토글됩니다. 패널에는 role="region"과 aria-labelledby로 자신을 연 헤더를 알려주면 스크린리더 사용자가 목차처럼 훑을 수 있습니다.
언제 쓰나
FAQ, 필터 그룹, 모바일 화면처럼 세로 공간이 귀한 곳에서 섹션을 정리할 때 씁니다. 한 화면에 3~7개 정도가 적당합니다.