Accessible Breadcrumbs and Pagination: Semantic HTML, aria-current & Focus Flow
Implement WCAG 2.2 compliant breadcrumbs and pagination. Master nav landmarks, aria-current page indicators, visual separators, and focus flow.
Secondary navigation components such as breadcrumb trails and pagination bars help visitors orient themselves within deep site hierarchies and multi-page data sets. When coded properly with semantic HTML5 and ARIA landmark attributes, screen reader users can immediately understand their current location in the content tree and move between pages effortlessly.
Always indicate the active page in breadcrumbs and pagination using aria-current="page" on the active link or element. Do not rely solely on CSS color changes or bold styling.
Accessible Breadcrumb Architecture (nav, ol, aria-current)
An accessible breadcrumb trail must:
- Be wrapped in a
<nav aria-label="Breadcrumbs">element to distinguish it from the primary site navigation. - Use an ordered list (
<ol>) to convey the sequence and hierarchy of parents to children. - Hide visual separators (e.g.
/or>) from screen readers using CSS pseudo-elements oraria-hidden="true".
Accessible Pagination Controls & ARIA Roles
Pagination components should also be wrapped in a distinct <nav aria-label="Pagination Navigation">. Buttons for "Previous Page" and "Next Page" must have descriptive aria-labels (e.g., aria-label="Go to Previous Page") instead of vague single characters like "«".
| Component | Semantic Structure | Required ARIA Attributes |
|---|---|---|
| Breadcrumb Nav | <nav aria-label="Breadcrumb"><ol>...</ol></nav> |
aria-current="page" on final active crumb. |
| Pagination Nav | <nav aria-label="Pagination"><ul>...</ul></nav> |
aria-current="page", aria-disabled="true" on inactive bounds. |
Deep Dive on aria-current="page"
Screen readers announce aria-current="page" as "Current page", giving non-sighted users instant validation of where they are in a numbered list of results.
Focus Management Across Page Transitions
When a user activates a pagination link in a Single Page App (SPA), focus must not remain orphaned. Move focus smoothly to the top of the updated results list or announce the update via an aria-live="polite" region.
Semantic HTML & CSS Code Templates
<!-- Accessible Breadcrumb Navigation -->
<nav class="breadcrumbs-nav" aria-label="Breadcrumbs">
<ol class="breadcrumbs-list">
<li><a href="https://rogabot.com/">Home</a></li>
<li><a href="https://rogabot.com/articles/index.html">Articles</a></li>
<li><a href="https://rogabot.com/articles/index.html" aria-current="page">Legal Defense</a></li>
</ol>
</nav>Audit Your Website for WCAG 2.2 Compliance Today
Scan your domain in 60 seconds with Rogabot and get instant PR-ready code diffs to prevent ADA lawsuit exposure.