ARIA(Accessible Rich Internet Application)
•
접근 가능한 고기능 인터넷 애플리케이션
•
HTML에 '역할(role), 상태(state), 속성(property)' 정보를 부여하여 보조기기의 웹 문서 접근을 지원.
"웹 접근성 문제의 80%는 HTML"
As long as you use the correct elements and attributes,
you're already doing 80% of what you need to do for accessibility.
대부분의 WAI-ARIA 명세는 HTML 요소와 속성을 흉내내는 것.
ARIA를 사용하기에 앞서 HTML을 의미 있게 사용했는지 검토할 것.
🙅🏻♂️
<a href="#" role="button">...</a>
<a href="#" role="link">...</a>
🙆🏻♂️
<button type="button">...</button>
<a href="#">...</a>
HTML
복사
1. 자주쓰는 ARIA 역할 (roles)
html에서 의미상으로 존재하지 않는 경우 role을 잘 써주는게 중요하다. 예를 들어 아래와 같은 role들은 적절한 html 태그를 이용해 더 의미있게 웹 접근성을 준수할 수 있다.
<element role="alertdialog"> => <dialog>
<element role="dialog"> => <dialog>
<element role="navigation"> => <nav>
<element role="complementary"> => <aside>
<element role="none"> => <div>
HTML
복사
구현하려는 기능을 가진 요소가 존재한다면 개발자는 되도록 의미를 가진 HTML을 ARIA보다 선호해야 합니다. 몇 가지 예시로, 네이티브 요소는 키보드 접근성, 역할, 상태를 내장하고 있습니다. 그러나 ARIA를 쓰기로 결정했다면 브라우저 동작 방식을 따라 하는 건 개발자의 책임입니다. - MDN
반면 아래와 같은 태그들의 경우 'role'을 입력해야 정확한 의미를 전달할 수 있다.
<element role="tablist">
<element role="tab">
<element role="tabpanel">
<element role="tooltip">
<element role="status">
<element role="alert">
...
HTML
복사
2. ARIA – Property (속성) & 상태 (state)
html 문서를 동적으로 풍요롭게 만들어주는 상태 속성들은 아래 6가지를 많이 사용한다. 이름만 봐도 언제 사용하는지 맥락이 그려질 것이다.
<element aria-current="page|step|location|date|time|true|false(default)">
<element aria-selected="false|true|undefined(default)">
<element aria-haspopup="true|menu|dialog|listbox|tree|grid|false(default)">
<element aria-expanded="true|false|undefined(default)">
<element aria-hidden="true|false|undefined(default)">
<element aria-invalid="true|false(default)|grammar|spelling">
HTML
복사
3. 결론
ARIA는 역할(role), 상태(state), 속성(property) 정보를 이용해서 HTML의 접근성 문제를 해결하는 방법이다.