Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<nav aria-label="Pagination" id="example">
  <ul>
    <li>
      <a href="/1/"
         aria-label="Page 1"
         aria-current="page">
        1
      </a>
    </li>
    <li><a href="/2/" aria-label="Page 2">2</a></li>
    <li><a href="/3/" aria-label="Page 3">3</a></li>
    <li><a href="/4/" aria-label="Page 4">4</a></li>
    <li><a href="/5/" aria-label="Page 5">5</a></li>
    <li><a href="/2/">Next</a></li>
  </ul>
</nav>

Developer notes

Name

  • Use aria-label="Pagination" when there is not a visible nav title.
    • aria-describedby="title-id" can be used when the nav title is a visible heading.
  • Use aria-label="Page X" for each entry link.

Role

  • Identifies itself as navigation
  • Use role="navigation" when it’s not possible to use <nav.
  • DO NOT add menu or option roles with arrow key event listeners unless you’re building an actual application like Gmail.

State

  • Use aria-current="page" on the current page item.