Website pattern library

Navigating content


Button pagination


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 -->

Aria attributes

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

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

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

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

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

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

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>