아코디언 예

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

예제

Name:

Email:

Phone:

Extension:

Country:

City/Province:

키보드 지원

키	기능
`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 소스 코드

CSS: accordion.css
JavaScript: accordion.js

HTML 소스 코드