Accordion

Accordion

아코디언(Accordion)은 각각 제목, 콘텐츠 스니펫 또는 콘텐츠 섹션을 나타내는 축소판을 포함하는 세로로 쌓인 대화형 제목 세트입니다.
제목은 사용자가 관련 콘텐츠 섹션을 표시하거나 숨길 수 있도록 하는 컨트롤 역할을 합니다.
아코디언은 일반적으로 단일 페이지에 콘텐츠의 여러 섹션을 표시할 때 스크롤할 필요성을 줄이기 위해 사용됩니다.

with Keyboard

Enter || Space

아코디언 헤더에 포커스가 있으면 연결된 패널을 확장합니다. 하나의 패널만 확장할 수 있고 다른 패널이 확장되면 해당 패널이 축소됩니다. (확장 패널의 아코디언 헤더에 포커스가 있을 때 구현이 축소를 지원하는 경우 패널을 축소합니다.)
일부 구현에서 항상 하나 이상의의 패널이 확장되어야 합니다.

Tab

초점을 다음 초점 요소로 이동합니다.

Shift + Tab

초점을 맞출 수 있는 이전 요소로 초점을 이동합니다.

Down Arrow

필수 구현 요소는 아닙니다.
포커스가 아코디언 헤더에 있는 경우 포커스를 다음 아코디언 헤더로 이동합니다.
포커스가 마지막 아코디언 헤더에 있는 경우 아무 작업도 수행하지 않거나, 포커스를 첫 번째 아코디언 헤더로 이동합니다.

Up Arrow

필수 구현 요소는 아닙니다. Down Arrow의 정반대 기능을 수행합니다.
초점이 아코디언 헤더에 있는 경우 초점을 이전 아코디언 해더로 이동합니다.
포커스가 첫 번째 아코디언 헤더에 있는 경우 아무것도 수행하지 않거나, 마지막 아코디언 헤더로 포커스를 이동합니다.

Home

포커스가 아코디언 헤더에 있을 때 포커스를 첫 번째 아코디언 헤더로 이동합니다.

End

포커스가 아코디언 헤더에 있을 때 포커스를 마지막 아코디언 헤더로 이동합니다.

WAI-ARIA

• 각 아코디언의 헤더는 버튼 요소를 포함합니다.
  • 각 아코디언 헤더 버튼은 aria-level 을 통해 스크린 리더 사용자가 아코디언의 구조를 파악하고 필요한 정보에 쉽게 접근할 수 있도록 도울 수 있습니다.
• 아코디언 헤더와 연결된 패널이 표시되면, 헤더의 버튼 요소에서 aria-expanded가 true로 설정합니다
• aria-controls를 통해 헤더와 연결된 컨텐츠 요소의 id를 지정할 수 있습니다
• 아코디언에서 패널 축소를 허용하지 않는 경우 헤더의 버튼에서 aria-disabled를 true로 설정합니다
• 패널의 콘텐츠 컨테이너 역할을 하는 요소에는 role="region" 과 aria-labelledby 속성이 있어야 합니다. (이 때 aria-labelledby는 패널을 제어하는 버튼을 가리키는 값으로 설정되어야 합니다.)
  • 한 번에 펼쳐질 수 있는 패널이 약 6개 이상인 경우 landmark region의 증가를 방지하기 위해 role="region"을 사용하지 않는 것이 좋습니다.