ARIA 접근성 가이드

역할 · 랜드마크

role="navigation"

사이트나 페이지 안을 이동하는 링크 묶음(주 메뉴, 목차, 이동 경로 등)을 나타내는 랜드마크입니다.

기초HTML 요소 우선

한눈에 보기

분류
랜드마크
대응 HTML
<nav>
이름 정하는 방법
작성자 (author)
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

navigation은 문서나 관련 문서 사이를 이동하기 위한 주요 링크 모음을 표시합니다. 주 메뉴, 로컬(하위) 메뉴, 목차, 이동 경로(breadcrumb), 페이지 번호 목록 등이 해당합니다.

HTML과의 관계

<nav> 요소가 자동으로 navigation 역할을 가집니다. <nav role="navigation">은 불필요한 중복입니다.

이름 붙이기

한 페이지에 navigation이 둘 이상이면(대부분의 사이트가 그렇습니다) 각각 aria-label 또는 aria-labelledby로 서로 다른 이름을 붙입니다. 예: “주 메뉴”, “이동 경로”, “이 페이지 목차”. 화면낭독기가 “탐색”이라는 역할을 따로 읽으므로 이름에 “내비게이션”, “메뉴 영역”을 넣지 않아도 됩니다.

주의할 점

  • 모든 링크 묶음을 nav로 만들 필요는 없습니다. 꼬리말의 약관 링크 몇 개처럼 사소한 묶음은 그냥 목록으로 둡니다. navigation이 너무 많으면 오히려 탐색이 느려집니다.
  • nav는 링크를 담는 영역입니다. 애플리케이션 메뉴처럼 동작하는 위젯(menu, menubar)과 다릅니다. 웹사이트의 주 메뉴에 role="menubar"를 쓰지 않습니다.
  • 링크 목록은 nav 안에서 <ul>/<li>로 구성하면 항목 수가 함께 안내됩니다.
  • 현재 페이지 링크에는 aria-current="page"를 붙입니다.

테스터 관점

랜드마크 목록에서 navigation이 여러 개일 때 이름만으로 구분되는지, 이름이 “navigation”, “nav”처럼 의미 없는 영어가 아닌지 확인합니다.

함께 쓰는 속성

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

사용 예

주 메뉴와 이동 경로 구분

권장HTML
<nav aria-label="주 메뉴">
  <ul>
    <li><a href="/" aria-current="page">홈</a></li>
    <li><a href="/books">도서</a></li>
  </ul>
</nav>
<nav aria-label="이동 경로">
  <ol>
    <li><a href="/">홈</a></li>
    <li><a href="/books" aria-current="page">도서</a></li>
  </ol>
</nav>

보이는 제목으로 이름 붙이기

HTML
<nav aria-labelledby="toc-h">
  <h2 id="toc-h">이 페이지 목차</h2>
  <ul>…</ul>
</nav>

이름 없는 nav 여러 개와 중복 role (비권장)

비권장HTML
<nav role="navigation">…</nav>
<nav>…</nav>
<nav>…</nav>

세 영역이 모두 “탐색 랜드마크”로만 안내되어 구분할 수 없습니다.

직접 해 보기

nav에 이름이 있을 때와 없을 때 목록이 어떻게 들리는지 비교해 보세요.

예시 페이지 고르기

    예시 페이지 코드

    화면낭독기에서는

    화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
    상황들리는 안내 (예)
    D 키로 랜드마크 이동주 메뉴, 탐색 랜드마크, 목록 2개 항목, 홈, 현재 페이지, 링크
    랜드마크 목록주 메뉴 탐색 / 이동 경로 탐색

    사용 지침

    이렇게 쓰세요

    • 주요 이동 링크 묶음은 <nav>로 감쌉니다.
    • navigation이 둘 이상이면 각각 고유한 이름을 붙입니다.
    • 현재 페이지 링크에 aria-current="page"를 줍니다.

    이렇게 쓰지 마세요

    • 웹사이트 내비게이션에 menu/menubar 역할을 쓰지 않습니다.
    • 이름에 “내비게이션”, “메뉴 영역” 같은 역할 이름을 반복하지 않습니다.
    • 사소한 링크 묶음마다 nav를 남발하지 않습니다.
    bannermaincomplementarycontentinforegionsearchformlistlink

    이 역할을 쓰는 패턴

    페이지 레이아웃(랜드마크)브레드크럼(현재 위치)

    참고 자료