본문으로 바로가기

WAI-ARIA

category 웹개발론/웹표준, 접근성 2015.05.14 17:00

접근성을 높이는 또 하나의 방법인 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>&copy; 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">


신고

댓글을 달아 주세요

  1. 공부가필요한자 2015.08.06 11:20 신고

    정보 정말 감사드립니다. webdir 짱!

  2. 공부가필요한자 2015.08.06 11:27 신고

    http://daumui.tistory.com/39
    "요소의 의미와 WAI-ARIA 의미가 일치하여 겹칠 시 WAI-ARIA를 사용하면 문제가 될 수 있다"
    이럴수도 있군요...

    • BlogIcon 흉내쟁이 2015.08.06 12:52 신고

      링크글을 읽어보았는데 번역하신분이 직역하신거라 그렇겠지만, 정확히 의미를 이해하는데는 어렵더군요. 의도하는 바는 이해했습니다만 role 을 무척이나 많이 애용하는 부트스트랩 프레임워크를 살펴보았을때도 <nav> 요소를 제외한 거의 모든 부분에 중복된 의미를 부여하고 있습니다.

      본문 글에도 언급했듯이 HTML5의 구조를 완벽히 이해하지 못하는 스크린리더들이 존재하므로 앞으로도 한동안은 중복되어 사용되어지지 않을까 싶습니다.

  3. BlogIcon SPACEMonkey 2016.07.05 09:35 신고

    좋은 정보 감사드립니다. 어찌나 배울것들이 많은지..ㅠㅠ

  4. BlogIcon 잉고래 2017.01.11 13:27 신고

    정말 필요한 정보였는데 감사합니다.

티스토리 툴바