Accessible Breadcrumbs

Technical Deep Dive & Specifications

The Anatomy of an Accessible Breadcrumb

An accessible breadcrumb requires five interconnected structural layers:

+-----------------------------------------------------------------------------------------+
| <nav aria-label="Breadcrumb">                                                           |
|   <ol>                                 <--- Ordered list captures hierarchical sequence |
|     <li><a href="/">Home</a></li>                                                       |
|     <li aria-hidden="true">/</li>      <--- Hidden from screen reader auditory stream   |
|     <li><a href="/docs">Docs</a></li>                                                   |
|     <li aria-hidden="true">/</li>                                                       |
|     <li><span aria-current="page">API</span></li>  <--- Declares current page state     |
|   </ol>                                                                                 |
| </nav>                                                                                  |
+-----------------------------------------------------------------------------------------+

1. The Landmark: <nav aria-label="Breadcrumb">

Because a page frequently contains multiple <nav> elements (Primary Navigation, Breadcrumb, Pagination, Footer Nav), you must differentiate them using aria-label.

• W3C Recommendation: Use the singular noun "Breadcrumb" rather than "Breadcrumbs" or "Breadcrumb Navigation" (screen readers already announce the word "navigation" automatically due to the <nav> tag).

2. The List Structure: <ol> vs. <ul>

Use <ol> (ordered list) rather than <ul> (unordered list). Breadcrumbs represent a strict, sequential ancestor hierarchy where item 1 is the root parent, item 2 is the child, and the final item is the active terminal node. Assistive technologies announce: "List, 4 items. Item 1 of 4..." giving immediate spatial context.

3. Delimiter Isolation (Glyphs and Separators)

Visual dividers like >, /, », or SVG chevrons are decorative punctuation. If inserted as plain text, screen readers announce each character aloud.

Two methods to silence separators:

1. CSS Generated Content (Preferred): Using li + li::before { content: "/"; }. CSS pseudo-elements containing punctuation are skipped or down-prioritized by most modern screen readers.
2. HTML aria-hidden="true": If using SVG icons or explicit divider nodes, wrap each delimiter in <span aria-hidden="true">/</span>.

4. Declaring the Terminal Node: aria-current="page"

The final item in the breadcrumb represents the currently viewed page.

• Apply aria-current="page" to the active item.
• Should it be a link? In most design systems, the current page item is plain text (<span>) without an href, preventing redundant page reloads. However, if rendered as an anchor, aria-current="page" informs assistive tech that clicking it navigates to the page currently open.

5. Schema.org Microdata & Rich Snippets

Google Search recognizes Breadcrumb structured data to replace raw URLs with clean breadcrumb paths in search engine result pages (SERPs).

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 77 (<nav aria-label="Breadcrumb">): Establishes a navigation landmark labeled uniquely as "Breadcrumb", preventing collision with main site navigation.
• Line 78 (<ol ... itemscope itemtype="https://schema.org/BreadcrumbList">): Uses an ordered list to establish sequential parent-child nesting semantics while introducing Google Schema.org structured data.
• Line 81 (itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">): Identifies each list item as a node in the structured search hierarchy.
• Line 37–42 (.breadcrumb-item + .breadcrumb-item::before { content: "/"; }): Injects the / visual separator purely via CSS pseudo-elements, preventing screen readers from reading literal slash characters.
• Line 104 (<span class="breadcrumb-current" aria-current="page" itemprop="name">): Marks the final non-linked milestone with aria-current="page", notifying assistive software that this node represents the active page.

Expected Browser Render Output

• Sighted Display: Home / Documentation / Components / Breadcrumb Component in a clean card container.
• VoiceOver / NVDA Speech Output:

  "Breadcrumb navigation landmark. List, 4 items. Item 1 of 4: Home, link. Item 2 of 4: Documentation, link. Item 3 of 4: Components, link. Item 4 of 4: Breadcrumb Component, current page."