Accessibility Wiki

A breadcrumb should be a list that marks the current page

Rule breadcrumb-structure · Component patterns (best practice) · impact minor · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters

The breadcrumb pattern is a navigation landmark containing an ordered list of links, with the current page marked aria-current="page". A breadcrumb that is a flat row of links loses its structure and current-location cue.

How to fix

Put the breadcrumb links in an

    /
      inside the labelled nav, and add aria-current="page" to the current page link. role="list" on the existing wrapper satisfies the list half when the markup cannot change.

      Example

      ✕ Fails
      <nav aria-label="Breadcrumb"><a href="/">Home</a> / <a href="/a">Products</a></nav>
      ✓ Passes
      <nav aria-label="Breadcrumb"><ol><li><a href="/">Home</a></li><li><a href="/a" aria-current="page">Products</a></li></ol></nav>

      WCAG success criteria

      1.3.1 Info and Relationships — Level A

      Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

      Understanding 1.3.1

      Standards

      This rule contributes to the following standards:

      WCAG A EN 301 549 Best practice

      Standard Criteria
      EN 301 549 9.1.3.1

      References