정의 및 사용 방법

role 속성의 navigation 값은 웹 접근성 측면에서 해당 HTML 요소에 문서나 관련 문서를 탐색하기 위한 링크로 구성된 "내비게이션"이라는 의미(semantic meaning)의 랜드마크 역할(role)을 부여합니다.

일반적인 예로는 메뉴, 목차, 색인 등이 있습니다.

기본 예제

다음은 자체적으로 특별한 의미가 전혀 없는 <div> 태그에 role 속성의 navigation 값을 지정해서 "내비게이션"이라는 의미(semantic meaning)의 랜드마크 역할(role)을 부여하는 예제입니다.

HTML 
<div role="navigation" aria-label="메인 메뉴">
    <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/about">회사 정보</a></li>
        <li><a href="/services">서비스</a></li>
        <li><a href="/contact">연락처</a></li>
    </ul>
</div>

이 예제처럼 해당 요소에 aria-label 속성으로 "메인 메뉴"라는 이름도 함께 지정하면 스크린 리더 및 다른 보조 기술을 사용하는 사용자가 "메인 메뉴"라는 이름의 랜드마크를 쉽게 식별하고 탐색할 수 있습니다.

사용법 참고 사항

role 속성의 navigation 값을 가지는 요소는 내비게이션 영역을 나타내는 랜드마크 요소로서의 역할(role)이라는 의미(semantic meaning)가 부여됩니다.

HTML에서 "랜드마크(landmark)"란 웹 페이지의 구조를 설명하고 웹 접근성을 향상시키는 데 사용되는 특별한 역할을 하는 요소입니다.
이러한 랜드마크 요소들은 웹 페이지 내 특정 영역(예: 글로벌 헤더, 메인, 사이드바, 글로벌 푸터 등)을 정의하는 특별한 시멘틱 역할을 가지며, 웹 페이지를 이해하고 탐색하기 쉽게 만들고, 스크린 리더 및 기타 보조 기술을 사용하는 사용자에게 페이지의 레이아웃과 구조를 전달하는 데 중요한 역할을 합니다.

좀 더 자세한 내용은 ARIA Landmarks Example을 참조하시기 바랍니다.

기본적으로 HTML의 많은 요소들은 이미 고유한 역할의 의미(semantic meaning)를 가지고 있습니다.

role 속성의 navigation 값으로 부여할 수 있는 내비게이션 영역 역할(role)을 이미 가지고 있는 요소도 있습니다.

<nav> 태그는 고유한 역할의 의미(semantic meaning)로 nav 역할(role)을 가집니다. 즉, role 속성을 별도로 지정하지 않아도 암시적인(implicit) 역할(role)은 nav입니다.

<nav> 태그는 이미 내비게이션 영역 역할(role)을 하기 때문에 이 요소에 role 속성의 navigation 값으로 역할을 부여할 필요는 없으며, 스크린 리더 등과 같은 웹 접근성 도구뿐만 아니라 관련 기술에서의 처리, 코드를 직접 다루는 개발자 및 코드의 가독성 측면에서도 올바른 의미론적 HTML 요소인 <nav> 태그를 사용하는 것이 좋습니다.

HTML 
<nav aria-label="메인 메뉴">
    <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/about">회사 정보</a></li>
        <li><a href="/services">서비스</a></li>
        <li><a href="/contact">연락처</a></li>
    </ul>
</nav>

브라우저 호환성 문제로 <nav> 태그를 사용할 수 없는 경우를 제외하고, role="navigation" 사용 보다는 <nav> 태그를 사용하세요.

여러 개의 role="navigation"을 사용

문서 내에서 여러 개의 role="navigation"이 사용되었을 경우에는 role="navigation"이 사용된 각각의 요소에 고유한 레이블을 지정해야 합니다. 콘텐츠 내에 적절한 레이블이 있다면 aria-labelledby를 사용하고, 그렇지 않다면 aria-label을 사용합니다. 단, 문서 내에서 한 개의 role="navigation"이 사용되었을 경우 레이블의 사용은 선택 사항입니다.

HTML 
<div role="navigation" aria-labelledby="nav1">
    <h2 id="nav1">Title for navigation area 1</h2>
    <!-- ... navigation content area 1 ... -->
</div>

<div role="navigation" aria-labelledby="nav2">
    <h2 id="nav2">Title for navigation area 2</h2>
    <!-- ... navigation content area 2 ... -->
</div>

주의할 점

role="navigation"은 <address>의 자손 요소가 될 수 없습니다.

  • <address>는 문서나 조상 <article>의 연락처 정보를 표현하기 위해 존재합니다.
  • 예를 들어, 저자 이름, 이메일, 회사 주소, 전화번호, 웹사이트 링크 등과 같은 "연락 수단"이 들어갑니다.
  • 반대로 <nav> 태그 또는 role="navigation"은 문서나 페이지 내 주요 탐색 링크 집합을 정의하는 요소입니다.
  • 즉, 내비게이션은 연락처 정보와 무관하며, <address>의 본래 의미를 흐리게 만들기 때문에 시맨틱 구조가 혼란스러워집니다. 이것은 올바른 위치가 아닙니다.
HTML 시맨틱 구조가 혼란스러워집니다. 
<address> <!-- 연락처 정보 -->
    <div role="navigation">
        <!-- 문서나 페이지 내 주요 탐색 링크 집합을 정의 -->
    </div>
</address>

활용 예제

role="navigation"의 다양한 사용 예제 중 일부를 살펴보겠습니다.

주요 내비게이션 메뉴

가장 일반적인 사용 사례는 웹 사이트의 주요 내비게이션 메뉴를 role="navigation"으로 둘러싸는 것입니다. 이 메뉴는 웹 사이트의 주요 섹션 또는 페이지로 연결하는 링크를 포함합니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>nav 태그 예제</title>
    </head>
    <body>
        <header>
            <h1>웹 페이지 제목</h1>
            <p> <!-- 이 링크 그룹은 참고용 보조 링크일 뿐, 사이트의 주요 탐색 영역으로 간주되지 않습니다. -->
                <a href="news.html">뉴스</a> -
                <a href="blog.html">블로그</a> -
                <a href="forums.html">포럼</a>
            </p>
            <p>마지막 수정: <span>2025-04-01</span></p>
            <div role="navigation" aria-label="메인 메뉴"> <!--주요 탐색 영역으로 간주됩니다. -->
                <ul>
                    <li><a href="/">홈</a></li>
                    <li><a href="/about">회사 정보</a></li>
                    <li><a href="/services">서비스</a></li>
                    <li><a href="/contact">연락처</a></li>
                </ul>
            </div>
        </header>
        <main>
            <article>
                <h2>주요 콘텐츠 제목</h2>
                <p>주요 내용...</p>
            </article>
        </main>
        <aside>
            <h3>부가 정보</h3>
            <p>이 페이지의 주요 내용의 일부입니다.</p>
        </aside>
        <footer>
            <p>© copyright 웹 페이지</p>
        </footer>
    </body>
</html>

페이지 내부 탐색 메뉴

페이지 내에서 부가적인 탐색 메뉴를 정의할 수도 있습니다. 이 메뉴는 페이지 내에서 더 자세한 내비게이션을 제공할 때 사용됩니다. 예를 들어, 블로그 페이지에서 카테고리 또는 태그로 게시물로 페이지 내에서 이동하는 메뉴가 있을 수 있습니다.

HTML 
<div role="navigation" aria-label="페이지 내부 탐색 메뉴">
    <ul>
        <li><a href="#all">전체</a></li>
        <li><a href="#tech">기술</a></li>
        <li><a href="#lifestyle">라이프스타일</a></li>
        <li><a href="#travel">여행</a></li>
    </ul>
</div>

<!-- 블로그 콘텐츠 -->
<section id="all">
    <!-- 전체 카테고리 게시물 -->
</section>
<section id="tech">
    <!-- 기술 카테고리 게시물 -->
</section>
<section id="lifestyle">
    <!-- 라이프스타일 카테고리 게시물 -->
</section>
<section id="travel">
    <!-- 여행 카테고리 게시물 -->
</section>

위의 예시에서 해당 카테고리로 스크롤하여 관련 게시물을 볼 수 있도록 돕습니다. 각 링크는 페이지 내 특정 위치로 이동하도록 구성되어 있으며, id 속성과 href 속성을 함께 사용하여 해당 위치를 정의하고 링크합니다.

Breadcrumbs

Breadcrumbs는 사용자에게 현재 페이지의 위치를 시각적으로 보여주고 상위 구조의 페이지로 이동하는 데 사용됩니다.

HTML 
<div role="navigation">
    <ol>
        <li><a href="/">홈</a></li>
        <li><a href="/products">제품</a></li>
        <li><a href="/products/category1">카테고리 1</a></li>
        <li aria-current="page">현재 페이지</li>
    </ol>
</div>

위의 예제에서 Breadcrumbs를 사용하여 사용자는 현재 페이지가 "홈 > 제품 > 카테고리 1 > 현재 페이지"임을 이해할 수 있고, 각 부분을 클릭하여 해당 페이지로 이동할 수 있습니다.

Pagination

Pagination은 웹 페이지에서 콘텐츠를 여러 페이지로 분할하고 각 페이지로 이동할 수 있는 탐색 시스템을 가리킵니다. 특히 게시판 등에서 많이 사용합니다.

HTML 
<div role="navigation" aria-label="페이지 탐색">
    <ul>
        <li><a href="/page/1">이전</a></li>
        <li><a href="/page/2">2</a></li>
        <li><a href="/page/3">3</a></li>
        <li><a href="/page/4">4</a></li>
        <li><a href="/page/5">5</a></li>
        <li><a href="/page/6">다음</a></li>
    </ul>
</div>

간단한 웹 페이지 내비게이션

이 예제에서, role="navigation"을 지정한 요소 내에는 목록이 아닌 각각의 텍스트 링크가 포함되어 있습니다. role="navigation"은 목록을 꼭 포함할 필요가 없으며 다른 종류의 콘텐츠도 포함할 수 있습니다.

HTML 
<div role="navigation" aria-labelledby="nav-heading">
    <h2 id="nav-heading">내비게이션</h2>
    <p>
        당신은 내 홈페이지에 있습니다.
        북쪽에는 <a href="/blog">내 블로그</a>가 있으며,
        전투 소리가 들립니다. 동쪽으로 가면 큰 산이 보이며,
        여기에는 <a href="/school">학교 과제</a>가 많이 흩어져 있습니다.
        이 산 위에는 저를 닮은 작은 인물이,
        절박하게 <a href="/school/thesis">논문</a>을 쓰는 것처럼 보입니다.
    </p>
    <p>
        서쪽으로 가면 여러 개의 출구가 있습니다.
        놀기 좋아보이는 출구에는 "게임"이라고 적혀 있습니다.
        다른 덜 재미있어보이는 출구에는 "ISP"라고 적혀 있습니다.
    </p>
    <p>
        남쪽에는 어두운 고요한 <a href="/about">연락처 페이지</a>가 있습니다.
        그 출입구에는 거미줄이 걸려 있으며,
        어느 순간 쥐 한 마리가 빨리 페이지 밖으로 뛰어 나가는 것을 볼 수 있습니다.
    </p>
</div>

명세서

role 속성의 navigation 값에 대한 명세서 사양
명세서 사양
role="navigation" Accessible Rich Internet Applications (WAI-ARIA)
#navigation

참고문헌

같이 보기