버튼 예제

다음 명령과 전환 버튼 예제는 버튼 설계 패턴을 보여줍니다.

유사한 예는 다음과 같습니다:

내비게이션 메뉴 버튼: 링크로 동작하는 항목들의 메뉴를 여는 버튼
element.focus()를 사용하는 동작 메뉴 버튼 예제: element.focus()를 사용하여 메뉴의 초점이 관리되는 동작 또는 명령 메뉴를 여는 버튼
aria-activedescendant를 사용하는 동작 메뉴 버튼 예제: aria-activedescendant를 사용하여 메뉴의 초점이 관리되는 동작 또는 명령 메뉴를 여는 버튼.

예제

이 Print 동작 버튼은 div 엘리먼트를 사용합니다.

Print Page

이 Mute 전환 버튼은 a 엘리먼트를 사용합니다.

키보드 지원

키	기능
`Enter`	버튼을 활성화
`Space`	버튼을 활성화

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

역할(role)	어트리뷰트	엘리먼트	사용법
`button`		`div`, `a`	엘리먼트를 `button` 위젯으로 식별 시킵니다. 버튼에 대한 접근 가능한 이름은 엘리먼트의 텍스트 컨텐트에 의해 정의됩니다.
	`tabindex="0"`	`div`, `a`	탭 시퀀스에 엘리먼트를 포함시킵니다. `a` 엘리먼트가 `href` 어트리뷰트를 가지지 않으므로 필요합니다.
	`aria-pressed="false"`	`a`	버튼을 전환 버튼으로 식별시킵니다. 전환 버튼이 눌리지 않았음을 나타냅니다.
	`aria-pressed="true"`	`a`	버튼을 전환 버튼으로 식별시킵니다. 전환 버튼이 눌렸음을 나타냅니다.
	`aria-hidden="true"`	`svg`	버튼에 대한 접근 가능한 이름 계산으로부터 SVG를 제외시킵니다.

원문에는 마지막 aria-hidden="true" 부분이 빠져 있지만, 실수로 누락된 것으로 예상 되어 추가 기재되었습니다.

Javascript와 CSS 소스 코드

CSS: button.css
Javascript: button.js

HTML 소스 코드