WAI-ARIA

WAI-ARIA rules

native HTML 요소/속성 사용

의미를 가진 native HTML element/attribute가 있다면, ARIA role, state, property를 추가하는 대신 native를 사용

<!-- If not possible to use the correct element, use this -->
<span role="button">버튼</span>

<!-- If possible to use the correct element, use this -->
<button type="button">버튼</button> 

native semantic을 변경 금지

정말로 그래야 하는 것이 아닌 이상, native semantic을 변경하지 말아야 함.

<!-- Do not do this -->
<h1 role=button>heading button</h1>

<!-- Do this -->
<h1><button type="button">heading button</button></h1>

<!-- If not possible to use the button element -->
<h1><span role=button>heading button</span></h1>

키보드 사용 가능

click, tap, drag, drop, slide, scroll 등의 user interaction은 키보드로도 동등한 동작이 가능해야 함.

<span role="button" aria-pressed="false">좋아요</span>
/*
 * required keyboard interaction
 *  - button must be focusable
 *  - when on focus the button, presssing Enter or Space key
 *    activates (or deactivates) the button
 *  - when the button activated, sets 'aria-pressed' to 'true', 
 *    otherwise 'false'.
*/

visible focusable 요소를 의미를 없애거나 숨겨진 요소로 인식하지 않도록

키보드 접근이 가능한 요소가 인식될 수 없다면 오류

<!-- Do not do this -->
<button type="button" role="presentation">좋아요</button>
<button type="button" aira-hidden="true">좋아요</button>