Eojin Han

nav aria-labelledby, aria-label 예시 라벨링을 nav에 적용한 예시

nav

모든 링크를 <nav> 요소에 포함시킬 필요는 없습니다.

<nav>는 주요 탐색 블록에만 사용됩니다.

<footer>에 있는 링크 목록처럼 주요 탐색과 관련 없는 링크는 <nav> 없이도 적절히 사용될 수 있습니다.

문서 내에 여러 <nav> 요소를 사용할 때, aria-labelledby 또는 aria-label를 활용하여 각 <nav>의 역할을 명확히 알리는 것이 좋습니다.

<nav>는 특히 접근성을 높이고 스크린리더 사용자를 배려하기 위해 사용됩니다.

`aria-labelledby`, `aria-label` 예시

aria-labelledby: 레이블을 다른 요소로부터 가져옵니다. 외부 참조형.

aria-label: 레이블을 직접 지정합니다. 내부 정의형.


<button aria-label="Close">X</button>

버튼에 "Close"라는 이름을 직접 지정


<div>
  <h2 id="form-title">User Information</h2>
  <form aria-labelledby="form-title">
    <label for="name">Name:</label>
    <input id="name" type="text">
    <button type="submit">Submit</button>
  </form>
</div>

<form> 요소는 aria-labelledby="form-title"로 연결되어 <h2>의 텍스트 "User Information"이 레이블 역할을 한다.

📌

id로 요소를 참조해서 그 값을 label로 활용함.

라벨링을 nav에 적용한 예시


<nav aria-label="Primary navigation">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<nav aria-label="Footer navigation">
  <ul>
    <li><a href="/privacy">Privacy Policy</a></li>
    <li><a href="/terms">Terms of Service</a></li>
  </ul>
</nav>

label명 직접 입력


<h2 id="primary-nav-title">Primary Navigation</h2>
<nav aria-labelledby="primary-nav-title">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<h2 id="footer-nav-title">Footer Navigation</h2>
<nav aria-labelledby="footer-nav-title">
  <ul>
    <li><a href="/privacy">Privacy Policy</a></li>
    <li><a href="/terms">Terms of Service</a></li>
  </ul>
</nav>

label명을 간접적으로 참조