접근성을 높이는 또 하나의 방법인 ARIA에 대하여 설명합니다.
WAI-ARIA 정의
HTML5에서 도입한 role 속성을 통해 페이지의 모든 요소에 역할을 줄 수 있다. 이렇게 하면 스크린리더는 아주 쉽게 페이지를 분석하고, 모든 역할을 분류해서 페이지의 색인을 만들 수 있다.
역할 속성은 WAI-ARIA 명세에서 제안했고 HTML5 명세에 통합되었다. landmark, document 역할은 확실히 정해졌고 지금 바로 쓸 수 있다.
표지판(landmark) 역할
표지판 역할은 사이트의 흥미있을만한 곳을 표시한다. 스크린리더에서 빠르게 인식해야 하는 배너, 검색 영역, 내비게이션등이 이에 해당한다.
| 역할 | 용도 |
|---|---|
| banner | 페이지의 배너 영역을 나타낸다. |
| search | 페이지의 검색 영역을 나타낸다. |
| navigation | 페이지의 내비게이션 요소를 나타낸다. |
| main | 페이지의 주된 내용이 시작함을 나타낸다. |
| contentinfo | 저작권 정보, 발행일 등 내용에 대한 정보가 있는 곳을 나타낸다. |
| complementary | 페이지의 주된 내용을 보충하지만, 자체로도 의미 있는 내용을 나타낸다. |
| application | 웹 문서가 아니라 웹 애플리케이션을 담고 있는 영역을 나타낸다. |
보통 배너라고 하면 광고를 떠올리지만, 이 곳에서 말하는 배너라는 표현은 문자 그대로, 눈에 잘 띄게 걸어놓은 것이라는 의미이다.
<header id="page-header" role="banner">
<h1>UZURO</h1>
<nav id="lnb" role="navigation">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">MENU1</a></li>
</ul>
</nav>
<input type="text" role="search" />
</header>
<main role="main">
<aside role="complementary">
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
</ul>
</aside>
</main>
<footer id="footer" role="contentinfo">
<address>
연락처: <a href="mailto:webmaster@somedomain.com">help@uzuro.com</a>
</address>
<small>© 2014 uzuro.com All Rights Reserved.</small>
</footer>
HTML5 명세에는 일부 요소의 기본 역할을 정해두었고, 이를 임의로 바꿀수는 없다. nav 요소는 반드시 navigation 역할을 하며, 엄밀히 말하면 명시적으로 지정하지 않아도 된다. 하지만 ARIA 역할은 인식하지만 이러한 기본값은 아직 받아들이지 않은 스크린리더가 있으므로 명시적으로 써 주는 것이 좋다.
문서 구조 역할
| 역할 | 용도 |
|---|---|
| documnet | 문서 내용을 담고 있는 영역을 나타내며, 애플리케이션 내용과는 구별된다. |
| article | 독립적인 부분을 형성함을 나타낸다. |
| definition | 어떤 개념이나 주제를 정의함을 나타낸다. |
| directory | 차례 같은 그룹을 참조하는 목록을 나타내며, 정적인 내용에 쓰인다. |
| heading | 절의 제목을 나타낸다. |
| img | 이미지 요소를 포함한 부분을 나타내며, 이미지를 나타내는 요소일 수도 있고, 설명하는 텍스트거나 캡션일 수도 있다. |
| list | 상호 작용성이 없는 리스트 아이템의 그룹을 나타낸다. |
| listitem | 상호 작용성이 없는 리스트 아이템 하나를 나타낸다. |
| math | 수학 표현을 나타낸다. |
| note | 주된 내용에 대한 삽입구 또는 그를 보충하는 내용을 나타낸다. |
| presentation | 보조 기술에서 무시해도 괜찮은 표현적 요소를 나타낸다. |
| row | 표 형태의 데이터(그리드)에서 한 행을 나타낸다. |
| rowheader | 행의 헤더 정보를 담고 있는 셀을 나타낸다. |
document 역할은 동적인 내용과 정적인 내용이 섞인 문서에서 유용하다.
<body role="document">
'웹개발론 > 웹표준, 접근성' 카테고리의 다른 글
| 인터넷 익스플로우 구버전 지원 종료(IE8,IE9,IE10) (0) | 2016.01.14 |
|---|---|
| 마이크로포맷(Microformat) (4) | 2015.05.15 |
| Microdata (마이크로데이터) (1) | 2013.01.01 |
| 웹표준의 이해 (3) | 2012.11.26 |
| IE8/IE9 강제 업데이트 공식 발표 (0) | 2012.02.10 |
