WAI-ARIA

4 rules of ARIA use

1. native HTML 요소/속성 사용

ARIA role, state, property를 추가하는 대신, native HTML element/attribute 를 사용

<!-- 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> 

<!-- If not possible to use the correct element/attribute, use this -->
<input type="text" name="usrId" id="usrId" aria-label="아이디">

<!-- If possible to use the correct element/attribute, use this -->
<label for="usrId" class="hidden-accessible">아이디</label>
<input type="text" name="usrId" id="usrId">

2. 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>

3. 키보드 사용 가능

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'.
 */

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

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

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