버튼 예제 (IDL 버전)

다음 버튼 설계 패턴의 예제는 ARIA 어트리뷰트 코딩을 위한 새로운 JavaScript 구문을 보여줍니다.

이 페이지의 버튼 예제에 대한 JavaScript는 ARIA 1.2에 정의 된 IDL 인터페이스를 사용합니다. 이 예제의 목적은 ARIA 어트리뷰트 반영(reflection) 방법을 설명하고 브라우저와 보조 기술 상호 운용성에 대한 테스트 사례를 제공하는 것입니다. 특히, role과 ariaPressed 어트리뷰트는 setAttribute()과 getAttribute() 대신 점 표기법을 사용하여 접근 됩니다. 다른 모든 측면에서, 이 예제는 버튼 예제와 동일합니다.

예제

중요: 이 예제는 ARIA 명세 1.2 버전까지 도입되지 않은 구문을 사용하여 코딩됩니다. ARIA 어트리뷰트 반영에 대한 지원을 아직 제공하지 않는 브라우저를 사용하는 경우, 버튼이 올바르게 스타일링 되지 않을 것입니다.

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

Print Page

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

Mute

키보드 지원

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

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

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

Javascript와 CSS 소스 코드

HTML 소스 코드