HTML5에선 근래에 그 쓰임새가 더욱 다양해진 여러 형태의 웹 문서나 웹 애플리케이션의 사용 패턴에 부응하려고 기존 elements의 확장 개념으로 좀 더 명확한 구조적/의미론적 정의를 부여하는 새로운 elements가 추가되었다.
그래서 그 쓰임새에 맞는 적절한 elements를 가지고 HTML 문서를 작성하면, 저자가 의도한 대로 그 의미가 제대로 전달되면서 더불어 다양한 웹 접속 장비에서의 해석도 훨씬 수월해지기 마련이다.
문제는, 웹 브라우저가 새로운 elements에 대응하는 Accessibility APIs를 아직 제대로 적용하지 못하고 있는 실정이다. 결국 웹 접근성을 고려해서 WAI-ARIA에 근거한 적당한 ARIA landmark role을 직접 지정해 주어야 하는데, 마침 W3C에서 HTML을 작성할 때 WAI-ARIA를 올바로 구현하는 법에 대한 안내 문서(W3C Editor’s Draft )를 공개하였다.
이 문서에서 ARIA role을 적용해야만 하는 HTML5 elements와 해당 element에 지정해 주어야 하는 기본 ARIA role을 간추리면 다음과 같다.
- article: role=”article”
- aside: role=”complementary”
- details: role=”group”
- dialog (open attribute이 지정되지 않았을 때): role=”dialog” (aria-hidden=”true”도 함께 지정)
- header: 페이지의 주요 header일 경우 role=”banner” 사용
- math: role=”math”
- nav: role=”navigation”
- output (aria-live=”polite”와 함께 주의해서 사용하되 경우에 따라): role=”status”
- required 속성이 부여된 element: aria-required=”true”
주의할 것은, 링크를 표시하는 a element처럼 웹 브라우저에서 기본적으로 해당 요소의 의미와 그에 따른 해석을 제대로 지원하면 해당 role도 자동으로 인식하기 때문에 굳이 따로 role이나 attribute을 지정해 줄 필요는 없으며, 또한 해석의 혼동을 없애려면 기본 element가 가지고 있는 의미와 용도에 맞게 적절한 곳에 신중히 골라서 사용해야 한다.
어쩌면 다른 주제의 글일지도 모르지만, 웹 페이지에 새겨진 글자 하나하나가 제대로 전달될 때, 이것이 결국은 웹에서 교감을 일으키게 하는 가장 중요한 요소 중 하나임을 다시 한번 상기하는 계기가 되었으면 좋겠다.
추가 참고 문서:
- Using WAI-ARIA Landmarks – 2013
- HTML to Platform Accessibility APIs Implementation Guide(W3C Editor’s Draft)
내용 갱신(2015년 4월 15일): 최근에 배포되고 있는 브라우저에선 HTML5 elements에 대응하는 ARIA mappings를 기본적으로 지원하고 있어서 따로 지정해 줄 필요가 없다. 다만, 브라우저 지원 미비로 HTML5에서 사라졌다가 다시 HTML 5.1 spec에 추가된 details, summary 그리고 dialog elements 같은 경우엔 아직까진 관련 ARIA roles/states/properties를 지정해 줘야 함. 또한, 한국처럼 여전히 IE<10 브라우저의 사용자 점유율 높은 편이라면 HTML5에서 소개된 새 elements에 대응하는 ARIA role attibutes을 지정해 줘야 하는 번거로움은 여전히 남아 있다. 관련 참고 문서: On HTML belts and ARIA braces (The Default Implicit ARIA semantics they didn’t want you to know about) | HTML5 Doctor
“ARIA role을 적용해야만 하는 HTML5 elements”에 달린 2개의 댓글
ARIA Role을 보면 좀 헷갈리는 부분이나 의문이 생기는 부분이 있었는데 좀 명확해지겠네요.
게다가 덕분에 좋은 글을 하나 보게 되었어요.
좋은 소개 감사합니다:)
개인적으로 듀트님 블로그의 애독자인데 여기까지 오시고, 반가워요. 😀
저도 많이 헷갈려서 정리한 내용인데, 앞으론 많은 사람 헷갈리지 않고 접근성 염려없이 마크업에만 집중할 수 있도록, 웹 접속 장치의 HTML5 지원 상황이 빨리 개선됐으면 좋겠습니다.