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 <ol>/<ul> 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#

<nav aria-label="Breadcrumb"><a href="/">Home</a> / <a href="/a">Products</a></nav>

<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

References#

• APG — Breadcrumb