Code examples
Use semantic HTML
This semantic HTML contains all accessibility features by default.
<nav class="pagination " aria-label="Pagination">
<ul>
<li><a href="/1/">Previous</a></li>
<li><a href="/1/" aria-label="Page 1">1</a></li>
<li>
<a href="/2/"
aria-label="Page 2"
aria-current="page">
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.