ARIA 사용하기

필요한 의미와 동작이 이미 내장된 원래의 HTML 요소 [HTML]나 속성을 사용할 수 있다면, 요소를 재해석하거나 ARIA 역할, 상태 또는 속성을 추가해서 접근성을 확보하는 대신그대로 사용하는 것이 좋습니다.

어떤 경우에 이것이 불가능할 수 있습니까?

• HTML [HTML]에서 기능은 있지만 구현되어 있지 않거나, 구현되었더라도 접근성 지원이 부족할 경우
• 특정 원시 요소를 사용하면 스타일링이 불가능해서 시각적 디자인 제약이 생기는 경우
• HTML에서 현재 기능이 지원되지 않는 경우

원시 의미를 변경하지 마세요, 정말 필요한 경우가 아니면.

예시: 개발자가 탭 역할로 사용되는 제목(heading)을 만들고 싶을 때.

이렇게 하지 마세요:

<h2 role=tab>heading tab</h2>

이렇게 하세요:

<div role=tab><h2>heading tab</h2></div>

모든 대화형 ARIA 컨트롤은 키보드로 사용할 수 있어야 합니다.

사용자가 클릭, 탭, 드래그, 드롭, 슬라이드, 스크롤하는 위젯을 만들었다면, 키보드만으로도 해당 위젯에 접근하고 동일한 동작을 수행할 수 있어야 합니다.

모든 대화형 위젯은 해당 표준 키 또는 조합키에 맞춰 스크립트로 반응할 수 있어야 합니다.

예를 들어 role=button을 사용할 때, 요소가 포커스를 받을 수 있어야 하며, 사용자가 WIN OS에서는 enter, MAC OS에서는 return 그리고 space 키로 관련 동작을 활성화할 수 있어야 합니다.

APG 패턴과 키보드 인터페이스 개발 섹션, WAI-ARIA Authoring Practices Guide를 참고하세요.

포커스 가능한 요소에는 role="presentation" 또는 aria-hidden="true"를 사용하지 마세요.

이들 중 하나라도 포커스 가능한 요소에 사용하면, 실제로는 '아무것도 없는 곳'을 포커스하게 되는 사용자가 일부 생깁니다.

이렇게 하지 마세요:

<button role=presentation>press me</button>

이렇게 하지 마세요:

<button aria-hidden="true">press me</button>

<div aria-hidden="true">
<button>press me</button>
</div>

 button {opacity:0}

<button tabindex="-1" aria-hidden="true">press me</button>