Pagination > Use nav element

Problem

Using role="navigation" aria-label="Pagination" on the <ul> is incorrect and changes the semantic meaning of the list.

Solution

• Wrap the <ul> in a <nav aria-label="Pagination"> element.
• Remove role="navigation" aria-label="Pagination" from the <ul>.

For example:

<nav aria-label="Pagination">
  <ul>
    <li aria-hidden="true">
      <span>Previous</span>
    </li>
    <li>
      <a aria-current="page" aria-label="page 1" href="#">1</a>
    </li>
    <li>
      <a aria-label="Go to page 2" href="#">2</a>
    </li>
    <li>
      <a aria-label="Go to page 3" href="#">3</a>
    </li>
    <li>
      <a aria-label="Next page" href="#">Next</a>
    </li>
  </ul>
</nav>