아코디언 예

아래 예제 섹션은 아코디언에 대한 설계 패턴을 보여주는 간단한 개인정보 입력 양식을 포함합니다.

예제

키보드 지원

기능
Space 또는 Enter 접혀진 섹션의 아코디언 헤더에 초점이 있는 경우, 섹션을 확장시키세요.
Tab
  • 다음 초점을 얻을 수 있는(focusable) 엘리먼트로 초점을 이동시킵니다.
  • 아코디언의 모든 초점을 얻을 수 있는(focusable) 엘리먼트는 페이지 Tab 시퀀스에 포함됩니다.
Shift + Tab
  • 이전 초점을 얻을 수 있는(focusable) 엘리먼트로 초점을 이동시킵니다.
  • 아코디언의 모든 초점을 얻을 수 있는(focusable) 엘리먼트는 페이지 Tab 시퀀스에 포함됩니다.

Role, Property, State, Tabindex 어트리뷰트

역할(role) 어트리뷰트 엘리먼트 사용법
h3
  • 아코디언 헤더로 제공하는 엘리먼트
  • 각 아코디언 헤더 엘리먼트는 콘텐트 패널의 가시성을 제어하는 버튼을 포함합니다.
  • 예제는 제목 수준 3을 사용하므로 페이지 개요에 정확히 맞습니다; 예제는 수준 2 제목을 가진 섹션에 포함되어 있습니다.
aria-expanded="true" button 아코디언 패널이 확장될 때 true로 설정하고, 그렇지 않으면 false로 설정하세요.
aria-controls="ID" button 헤더가 제어하는 페널의 ID를 가리키세요.
region div 현재 확장 된 아코디언 패널을 포함하는 랜드마크 영역을 생성합니다.
aria-labelledby="IDREF" div
  • region 엘리먼트에 대해 접근 가능한 이름을 정의합니다.
  • 영역을 확장하고 접는 아코디언 헤더 버튼을 참조하세요.
  • region 엘리먼트는 랜드마크로 식별되도록 접근 가능한 이름을 가져야 합니다.

Javascript와 CSS 소스 코드

HTML 소스 코드