Search
👍🏼

ARIA(Accessible Rich Internet Application) 잘쓰기

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의 접근성 문제를 해결하는 방법이다.