Accessibility UI Guidelines: Pagination

Pagination

3.11 Pagination

Pagination is used to divide content into discrete pages, allowing users to navigate through them efficiently. Ensuring that pagination is accessible is crucial for providing an inclusive experience, particularly for users with disabilities.

3.11.1 Semantic Markup

Use semantic HTML to create pagination components. Wrap pagination links in a <nav> element with aria-label="Pagination" to provide context for assistive technologies.

<!-- Accessible Pagination -->
<nav aria-label="Pagination">
    <ul>
        <li><a href="?page=1" aria-label="Page 1">1</a></li>
        <li><a href="?page=2" aria-label="Page 2">2</a></li>
        <li><a href="?page=3" aria-label="Page 3">3</a></li>
        <li><a href="?page=4" aria-label="Next Page">Next</a></li>
    </ul>
</nav>

3.11.2 Keyboard Accessibility

Ensure that all pagination links are accessible via keyboard navigation. Users should be able to focus on each link using the Tab key and activate it using the Enter or Space keys.

<!-- Keyboard Accessible Pagination -->
<nav aria-label="Pagination">
    <ul>
        <li><a href="?page=1" tabindex="0">1</a></li>
        <li><a href="?page=2" tabindex="0">2</a></li>
        <li><a href="?page=3" tabindex="0">3</a></li>
        <li><a href="?page=4" tabindex="0">Next</a></li>
    </ul>
</nav>

3.11.3 ARIA Attributes

Use ARIA attributes to enhance pagination accessibility. Apply aria-current="page" to the currently active page and provide meaningful labels using aria-label for navigation links.

<!-- Pagination with ARIA Attributes -->
<nav aria-label="Pagination">
    <ul>
        <li><a href="?page=1" aria-label="Page 1">1</a></li>
        <li><a href="?page=2" aria-label="Page 2">2</a></li>
        <li><a href="?page=3" aria-current="page" aria-label="Current Page">3</a></li>
        <li><a href="?page=4" aria-label="Next Page">Next</a></li>
    </ul>
</nav>

3.11.4 Responsive Design

Ensure pagination adapts to smaller screens by using flexible layouts or collapsing pagination links into a dropdown menu.

/* Responsive Pagination Styling */
nav[aria-label="Pagination"] ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
}

nav[aria-label="Pagination"] a {
    display: inline-block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #005fcc;
    border: 1px solid #ccc;
    border-radius: 0.3rem;
}

nav[aria-label="Pagination"] a:hover {
    background-color: #f0f0f0;
}

nav[aria-label="Pagination"] a[aria-current="page"] {
    background-color: #005fcc;
    color: white;
    font-weight: bold;
}

3.11.5 Visible Focus Indicators

Provide clear focus indicators for pagination links to assist keyboard users in identifying their current position.

/* Focus Styles for Pagination Links */
nav[aria-label="Pagination"] a:focus {
    outline: 2px solid #005fcc;
    background-color: #e0f0ff;
}

3.11.6 Testing Pagination for Accessibility

Test pagination components with assistive technologies to ensure they are accessible. Verify correct use of ARIA attributes, keyboard navigation, and focus management.

// Test Checklist
// - Verify pagination links are keyboard accessible.
// - Ensure the current page is marked with aria-current="page".
// - Check screen reader announcements for navigation links.
// - Validate responsive behavior for smaller screens.

Best Practices for Pagination

• Use Semantic HTML: Wrap pagination in a <nav> element with aria-label="Pagination".
• Ensure Keyboard Accessibility: Make all pagination links navigable and operable via keyboard.
• Apply ARIA Attributes: Use aria-current="page" for the active page and aria-label for navigation links.
• Design for Responsiveness: Ensure pagination works well on all screen sizes, adapting layout as needed.
• Provide Visible Focus Indicators: Highlight the currently focused link for better usability.
• Test Thoroughly: Regularly test pagination with assistive technologies and automated tools to ensure accessibility.