아코디언 (Show/Hide 기능이 있는 섹션)
아코디언은 각각 콘텐츠 섹션을 나타내는 제목, 콘텐트 스니펫, 또는 썸네일을 포함하는 수직으로 쌓여있는 인터랙티브 제목 리스트입니다. 제목은 연관된 콘텐츠 섹션을 사용자에게 나타내거나 숨길 수 있는 컨트롤로 기능합니다. 아코디언은 일반적으로 단일 페이지에서 콘텐트의 여러 섹션들을 표현할 때 스크롤 할 필요성을 줄이기 위해 사용됩니다.
- 아코디언 헤더 (Accordion Header) 콘텐트 섹션을 노출시키고 일부 구현에서는 숨기는 컨트롤 역할을 하는, 콘텐트 섹션에 대한 레이블이나 콘텐트 섹션을 나타내는 썸네일.
- 아코디언 패널 (Accordion Panel) 아코디언 헤더와 연관된 콘텐트 섹션.
아코디언 예제
한 번에 하나의 섹션을 보여주는 아코디언을 사용하여 세 개의 섹션으로 분리된 양식을 보여줍니다. screen reader가 button에 포커싱 되어있을 때 "버튼접힘", button 에 click 이 일어났을 때 "버튼 펼처짐" 으로 인식하기에 유저 입장에서는 하위 내용이 펼쳐짐을 인지할 수 있습니다.
Role, Property, State, Tabindex 속성
| Role(역할) | Properties(속성) | Element | 사용법 |
|---|---|---|---|
| aria-expanded="true" | button | 아코디언 패널이 확장될 때 true, 그렇지 않으면 false로 설정 | |
| aria-controls="ID" | button | 헤더가 제어하는 페널의 ID | |
| region | div | 현재 확장 된 아코디언 패널을 포함하는 랜드마크 생성 | |
| aria-labelledby="IDREF" | div | ▪ region 엘리먼트에 대해 접근 가능한 이름을 정의한다. ▪ 영역을 확장하고 접는 아코디언 헤더 버튼을 참조한다. ▪ region 엘리먼트는 랜드마크로 식별되도록 접근 가능한 이름을 가진다. |
Keyboard 상호작용
| 키 | 기능 |
|---|---|
| Space | Enter |
| Tab | 다음 초점을 얻을 수 있는(focusable) 엘리먼트로 초점을 이동시킨다. |
| Shift + Tab | 이전 초점을 얻을 수 있는(focusable) 엘리먼트로 초점을 이동시킨다. |
meow