Website pattern library

Navigating content

Pagination

Button pagination

Example:

Pagination icons

Go to first pagefas fa-angle-double-left

Go back one pagefas fa-angle-left

Go forward one pagefas fa-angle-right

Go to last pagefas fa-angle-double-right

Accessible pagination

For screen reader accessibility use the 'role' and 'aria-label' attribues on the pagination container:

<ul role="navigation" aria-label="Pagination Navigation">
    <!-- Navigation  here -->
</ul>

Aria attributes

Use the 'aria label' attribute on the page buttons:

<li>
    <a href="#/" aria-label="Goto Page 1">1</a></li>
</li>

Use the 'aria label' and 'aria-current' attributes on the current page button:

<li>
    <a href="#/" aria-label="Current Page, Page 3" aria-current="true">1</a></li>
</li>

Use the 'aria label' attribute on the pagination icon buttons:

<li>
    <a href="#/" aria-label="Go to first page"><!-- Icon here --></a>
</li>
<li>
    <a href="#/" aria-label="Go back one page"><!-- Icon here --></a>
</li>

The Screen reader only text for the icon can be omitted as the description is already provided by the 'aria label'.

Icons with 'screen reader only' text omitted:

<i class="fas fa-angle-double-left"></i>