Navigation

Accessible breadcrumbs: Examples and Testing

Published by whatisADA / Grow Wild Agency · Updated

What to build

Breadcrumbs communicate a page's location within a site hierarchy. Use a labeled navigation region, meaningful parent links and a clearly identified current page; separators should not obscure the names.

A practical example

A detailed reference shows Home → WCAG Reference → Keyboard. A visitor arriving directly can navigate to the reference collection without relying on browser history.

How to check it

  1. Read the breadcrumb as a navigation region and inspect the sequence of parent links.
  2. Check that the final item identifies the current page and that separators are not announced as confusing content.
  3. Follow each parent link and verify that it reflects the real hierarchy.

What can be missed

Breadcrumbs describe structure rather than the user's exact navigation history. Structured data should describe the same hierarchy the visitor can see.

Markup and state contract

This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/wcag">WCAG reference</a></li>
    <li aria-current="page">Keyboard</li>
  </ol>
</nav>

Record your test

Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.

These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.

Primary sources and scope

This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.