Breadcrumb

A breadcrumb shows where the current page sits in a site's hierarchy and links to the pages above it. An accessible breadcrumb is a named navigation landmark around an ordered list of links, ending with the current page marked by aria-current.

A breadcrumb trail provides context in a hierarchy, whether that hierarchy is a parent-child page structure or a category of topics.

A breadcrumb trail is an aid that doesn't replace the need for site navigation. It isn't a menu. It doesn't offer a choice of where to go next. It reports where a user already is and what sits above the page they're on, allowing them to navigate to a page with a wider scope.

A breadcrumb trail should be unique even when there is more than one path through the hierarchy to the current page. The trail shouldn't try to capture every branch of a complicated hierarchy. Forks in the trail can confuse or be unhelpful to users. Pick the best or recommended path for the breadcrumb trail.

The breadcrumb UI pattern doesn't have a specific ARIA role, but it's a navigation aid and should carry the navigation role. Put the breadcrumb list inside a <nav> element or a generic element that carries role="navigation".

When to Use

Use a breadcrumb when:

The site's pages are organized in a parent-child hierarchy, and enabling easy access to a page up the hierarchy would benefit users.
The current page is an item or a subcategory inside a larger category, and users benefit from jumping back up to any level above it.
Users arrive deep in the site from search results or an external link, with no sense of what sits above the page they landed on.
Several valid paths lead to the current page. Pick the single most useful path rather than showing every route in one trail.

Don't use a breadcrumb when:

The site has no real hierarchy to reflect. A trail with an arbitrary or invented path misleads users instead of orienting them.
The entries are steps in a linear process, such as a checkout or a setup wizard. Users need their progress through the sequence rather than a path up a hierarchy. Use a progress indicator instead.
The page is the home page, or the site is shallow enough that the main navigation already says everything the trail would.
It would be the only way to get around the site. A breadcrumb is a secondary aid, not a replacement for primary navigation.

Examples

Code in this section is meant to demonstrate techniques rather than requirements and lacks features needed in a production application.

The examples show a breadcrumb trail in a navigation landmark that wraps an ordered list, with one page per list item and aria-current="page" on the last item to identify the current page. The separator between entries is decoration and shouldn't be exposed to assistive technology.

In this example, the separator is drawn with an empty ::before pseudo-element to keep it out of the accessibility tree. The current page is a link carrying aria-current="page".

CSS separator breadcrumb HTML

HTML

<nav aria-label="Breadcrumb">
  <ol>
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/design-develop/">Design and Development</a>
    </li>
    <li>
      <a href="/tutorials/">Tutorials</a>
    </li>
    <li>
      <a href="/tutorials/page-structure/" aria-current="page">
        Page Structure
      </a>
    </li>
  </ol>
</nav>

Some, but not all, browsers expose text inserted using the CSS content property to the accessibility tree. To work around that, the separator here is the border of an empty CSS-generated decorative element.

CSS separator breadcrumb CSS

CSS

nav[aria-label="Breadcrumb"] ol {
  list-style: none;
  padding: 0;
}
nav[aria-label="Breadcrumb"] li {
  display: inline;
}
nav[aria-label="Breadcrumb"] li + li::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  margin: 0 0.5em;
}

Modern browsers support alt text with the content property, which allows the generated content to be hidden from assistive technology, as in this alternative.

Alt-text separator CSS

CSS

. . .


nav[aria-label="Breadcrumb"] li + li::before {
  content: "›" / "";
  display: inline-block;
  margin: 0 0.5em;
}

A separator can be a real element in the list item, as long as it's hidden from assistive technology with aria-hidden="true". This example also renders the current page as plain text rather than as a link, which is an accepted treatment of the current-page entry.

Use aria-hidden here rather than role="presentation", which removes any ARIA semantics from an element but does not remove its content.

Markup separator breadcrumb HTML

HTML

<nav aria-label="Breadcrumb">
  <ol>
    <li>
      <a href="/">Home</a>
      <span aria-hidden="true">›</span>
    </li>
    <li>
      <a href="/components/">Components</a>
      <span aria-hidden="true">›</span>
    </li>
    <li>
      <span aria-current="page">Breadcrumb</span>
    </li>
  </ol>
</nav>

Structure and Semantics

A breadcrumb trail is a navigation region containing an ordered list of links to pages on the current domain ending with the current page.

Through its name, its structure, and its location in the page, a breadcrumb trail implies a hierarchy of pages, ordered from the top to the current page. It tells users where they are in that hierarchy. Users expect visiting a link on the list to take them to a page with a wider scope.

Each of the following clues helps users understand the breadcrumb trail's purpose:

It's within a navigation landmark with an accessible name that conveys its purpose, such as "Breadcrumbs".
It's placed first in the main landmark before other content.
It's presented as an ordered list in reading order both visually and in the accessibility tree.
Its last list item references the current page and is marked with aria-current="page", on the link when the entry is a link.
Each list item except possibly the last is a link to a page on the same domain.

Users expect that any link in the breadcrumb trail can be safely visited, bookmarked, or refreshed without affecting anything on the current page.

Each entry on the breadcrumb trail other than the last is a link to a page, so users can navigate up the hierarchy rather than only read the page names.

Entries are navigable links

Reported as: No group members with required role

A breadcrumb's list items must include entries with the link role.

When the breadcrumb trail holds nothing navigable, users who thought they found a navigation aid instead find a list of page names they can't directly access.

Give every entry above the current page a native <a href>, or an element with role="link", with a navigable path to the page. Take care when the trail comes from a single template string or from API data that returns page titles without paths.

Severity: Serious

Standard	Success Criterion	Reference
WCAG 2.2	1.3.1 Info and Relationships (A)	Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
EN 301 549	9.1.3.1 Info and Relationships	Same as the WCAG text.

List Structure

A breadcrumb trail should be presented as a list, both visually and to assistive technologies, with its last entry identifying the current page. Its links lead to pages on the same domain.

Entries have accessible names

Reported as: Breadcrumb item has no accessible name

Every entry in a breadcrumb trail must have an accessible name that describes a page that can be accessed, including the entry for the current page.

When a link's name isn't available to assistive technologies, screen reader users hear "link" without a description, and users of voice control technology can't activate the link.

Provide an accessible name that describes the page in visible text. For an icon or image, use aria-label or the image's alt attribute.

Severity: Critical

Standard	Success Criterion	Reference
WCAG 2.2	4.1.2 Name, Role, Value (A)	For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies.
EN 301 549	9.4.1.2 Name, Role, Value	Same as the WCAG text.
Section 508	1194.21(d)	Sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. When an image represents a program element, the information conveyed by the image must also be available in text.

Last entry identifies the current page

Reported as: Aria-current offset

The last entry in the breadcrumb trail must identify the current page through its accessible name and carry aria-current="page". When the entry is a link, the link carries the attribute. Otherwise, the list item or the child element that carries the entry's name does. No other entry should carry aria-current.

If aria-current is missing or set incorrectly, assistive technology users may not understand the purpose of the list or think their current page isn't on the path. When it sits on the list item around a link, screen reader users who reach the link by pressing Tab aren't told it's the current page.

When you generate a breadcrumb trail dynamically, make the last entry the current page and give it aria-current="page", on the link when the entry is one.

Severity: Serious

Standard	Success Criterion	Reference
WCAG 2.2	1.3.1 Info and Relationships (A)	Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
EN 301 549	9.1.3.1 Info and Relationships	Same as the WCAG text.

Reported as: Breadcrumb list item with no link

Each link in the trail points to a page on the same domain.

Users expect every page on the trail to be available. If it isn't linked, they may look for another way to access it or may not trust the list or the website.

Link each entry to the page it names, and, as a best practice, leave the entry for the current page as text. Mark the last entry with aria-current="page" whether it's a link or text.

Severity: Moderate

Standard	Success Criterion	Reference
WCAG 2.2	1.3.2 Meaningful Sequence (A)	When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
EN 301 549	9.1.3.2 Meaningful Sequence	Same as the WCAG text.

Reported as: Breadcrumb invalid aria-current value

The value of aria-current on the last entry should describe all list items, and for a breadcrumb, it's usually page. Valid values are page, step, location, date, time, true, or false. Setting aria-current="false" is the same as omitting it. Screen readers announce "current item" with aria-current="true" or an invalid value. Otherwise, they announce the type, such as "current step".

When screen reader users hear "current step" on a trail where "step" doesn't fit, they can be confused about where the trail leads.

On the last breadcrumb entry, set aria-current="page" or another token value that fits better.

Severity: Minor

Standard	Success Criterion	Reference
WCAG 2.2	1.3.1 Info and Relationships (A)	Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
EN 301 549	9.1.3.1 Info and Relationships	Same as the WCAG text.

Reported as: Multiple links in breadcrumb

Each breadcrumb entry should represent one level in the page hierarchy and offer a single link to a page.

When a breadcrumb trail has more than one tab stop for each entry, users moving through it by tabbing can no longer tell where they are in the hierarchy.

When the path isn't unique, choose one path for the breadcrumb trail. Give each entry one link, labeled with text that describes the page it accesses.

Severity: Minor

This issue is classified as "Best Practice," meaning it isn't tied to a specific WCAG success criterion or any other regulation or standard; however it still affects the experience of some users. These issues fall outside formal compliance requirements, yet addressing them improves usability and accessibility in practice.

A breadcrumb trail sits inside its own navigation landmark, named to identify its purpose and distinguish it from the other navigation landmarks on the page. When it's in a navigation landmark, assistive technology users who move through the page by landmark or region can easily find it.

Reported as: Missing navigation semantics

A breadcrumb trail must be enclosed in a navigation landmark.

Assistive technology users can't easily find the trail when it sits in a plain <div> or a bare <ul>. Users often decide to use a breadcrumb while browsing elsewhere on the page. If it's in a clearly labeled navigation landmark, they can jump to it. Otherwise, they may have difficulty finding it or may not even be aware that it exists.

Wrap the trail in a <nav> element, which is a landmark without an ARIA attribute, or in a generic or <section> element with role="navigation".

Severity: Serious

Standard	Success Criterion	Reference
WCAG 2.2	1.3.1 Info and Relationships (A)	Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
EN 301 549	9.1.3.1 Info and Relationships	Same as the WCAG text.

Reported as: Nested navigation elements

A breadcrumb's navigation landmark shouldn't sit inside another navigation landmark.

Popular screen readers let users move through a page by landmark. When landmarks are nested, those users can be confused or have trouble reaching the correct one.

Keep navigation landmarks separate, each with an accessible name that tells what it is. The best place for a breadcrumb landmark is early in the main landmark, right after the target of a skip link, rather than in the primary navigation region. Users can then tell where they are in the page hierarchy before reading the main content.

Severity: Moderate

Reported as: Navigation name

A breadcrumb's navigation landmark should have an accessible name that describes it.

A breadcrumb is rarely the only navigation landmark on a page. Without a meaningful name, screen reader users who encounter it or browse by landmark won't know what kind of navigation it is or how it differs from the other navigation regions.

Name the <nav> or other element that carries role="navigation" by setting aria-label to "Breadcrumbs" or another meaningful name, or by setting aria-labelledby to the ID of a heading that introduces the trail. Leave the word "navigation" out of the name. Assistive technology reports the role alongside the name, so screen reader users would hear "navigation" twice.

Severity: Minor

Role

Each part of a breadcrumb carries its own role:

Its outer container carries the navigation role with an accessible name.
Its trail itself carries the list role.
Each item in the list carries the listitem role and contains one entry.
Each entry in the trail except, optionally, the last carries the link role with an accessible name that identifies the page the link accesses.

Has the correct role

Reported as: Element has incorrect role

Each element of the breadcrumb carries the role listed above, and the last item may also contain a link to the current page.

When an element in the breadcrumb doesn't expose its role to assistive technology, users may be confused about the structure or unable to use the trail as a navigation aid.

Construct a breadcrumb trail with native HTML elements whenever possible. Use <a> elements with an href attribute for links, each in a <li> list item under an <ol> or <ul> list, and wrap the list in a <nav> carrying an informative aria-label.

Severity: Critical

Standard	Success Criterion	Reference
WCAG 2.2	4.1.2 Name, Role, Value (A)	For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies.
EN 301 549	9.4.1.2 Name, Role, Value	Same as the WCAG text.
Section 508	1194.21(d)	Sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. When an image represents a program element, the information conveyed by the image must also be available in text.

Applies role to the correct element

Reported as: Incorrect root element

Sanity check. Evinced checks that the navigation role sits on the element that holds the whole breadcrumb, rather than on an element inside it. This check runs on every UI pattern, not only on breadcrumbs.

A breadcrumb's navigation role should sit on its outermost element, the one that contains the whole trail.

When the role sits on an element inside the breadcrumb's container, the landmark holds only part of the breadcrumb. Screen reader users who jump to the breadcrumb by landmark miss content left outside it, such as a heading that introduces the trail.

Put the navigation role, or the <nav> element, on the element that contains the whole breadcrumb, and keep any layout wrapper around it free of roles. If the test selected a wrapper by mistake, select the breadcrumb's <nav> element itself and run the test again.

Link Name

A breadcrumb link's name is the name of the page it leads to, ideally the same title that page shows in its main heading, so users recognize the page when they arrive. Keep the separator out of the link: a separator character inside the anchor becomes part of the link's name.

Has an accessible name

Reported as: Accessible name

A breadcrumb's link must have an accessible name that identifies the page it leads to.

Without an accessible name, assistive technology can only report that a link is there, so screen reader users can't tell which level of the hierarchy each link in the trail reaches. Voice control users don't have a name to speak to activate it.

Give each link visible text naming its page. When an entry shows only an icon, such as a house for the home page, give the image meaningful alt text or give the link an aria-label attribute.

Severity: Serious

Standard	Success Criterion	Reference
WCAG 2.2	4.1.2 Name, Role, Value (A)	For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies.
EN 301 549	9.4.1.2 Name, Role, Value	Same as the WCAG text.
Section 508	1194.21(d)	Sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. When an image represents a program element, the information conveyed by the image must also be available in text.

Disabled

Links are the only interactive elements in a breadcrumb, so they're the only elements that can be disabled. Every entry above the current page is meant to stay reachable, so only disable a breadcrumb link when it makes sense, such as a link to the current page.

The recommended method to disable a link is to remove the href attribute from its <a> element, which removes its link role, its function, and its tab stop. On the current page's entry, that leaves text that still carries aria-current="page", an accepted treatment of that entry. A link that has to keep its role while it's disabled sets role="link" and aria-disabled="true" instead.

Only disable interactive elements

Reported as: Component does not support disabled state

A disabled state can only be declared on an element whose role supports it. In a breadcrumb, only a link can be disabled, and a link that keeps its link role while it's disabled should declare aria-disabled="true". No element in a breadcrumb supports the HTML disabled attribute, including the <a> element.

When a non-interactive element carries aria-disabled, assistive technology might report the element as disabled even though it could never be operated. Users who are told it's disabled may be confused, search for functionality that doesn't exist, or assume that the breadcrumb is inoperable.

Only disable link elements in a breadcrumb trail, and then only when it makes sense.

Severity: Serious

Standard	Success Criterion	Reference
WCAG 2.2	4.1.2 Name, Role, Value (A)	For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies.
EN 301 549	9.4.1.2 Name, Role, Value	Same as the WCAG text.
Section 508	1194.21(d)	Sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. When an image represents a program element, the information conveyed by the image must also be available in text.

Disables only elements that support it

Reported as: Element type does not support disabled state

An element in a breadcrumb must carry disabled or aria-disabled only when its role supports a disabled state.

When the state sits on an element whose role has none, such as a wrapper, a list item or a heading, assistive technology may drop it or report it on something users can't operate, while the control that really is unavailable is still reported as available.

Remove the attribute from that element, and set the disabled state on the control itself, using an element or role that supports it, such as a native <button>.

Severity: Serious

Standard	Success Criterion	Reference
WCAG 2.2	4.1.2 Name, Role, Value (A)	For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies.
EN 301 549	9.4.1.2 Name, Role, Value	Same as the WCAG text.
Section 508	1194.21(d)	Sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. When an image represents a program element, the information conveyed by the image must also be available in text.

Avoids conflicting disabled states

Reported as: Conflicting disabled values

A breadcrumb's link must declare its disabled state one way only: with aria-disabled, never with disabled or both.

A link ignores the disabled attribute. When a link carries it alongside aria-disabled, the two can disagree, and assistive technology reports whatever aria-disabled says, whatever the code meant. Screen reader users may be told the wrong thing about whether the page above them in the hierarchy can be reached.

Remove href from the link's <a> element to disable it. When it has to keep its role, set role="link" and aria-disabled="true" alone, removing it or setting it to false when the link is enabled again.

Severity: Serious

Standard	Success Criterion	Reference
WCAG 2.2	4.1.2 Name, Role, Value (A)	For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies.
EN 301 549	9.4.1.2 Name, Role, Value	Same as the WCAG text.
Section 508	1194.21(d)	Sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. When an image represents a program element, the information conveyed by the image must also be available in text.

Uses aria-disabled rather than disabled

Reported as: Element does not support the disabled attribute

A breadcrumb's link must convey its disabled state with aria-disabled, not the disabled attribute.

The <a> element doesn't support disabled, nor do most elements that can accept the link role, so browsers ignore it. When a link carries disabled, assistive technology still reports an available link, and screen reader users try to follow a link to a page that is meant to be unavailable.

Remove href from the link's <a> element to disable it. When it has to keep its role, also set role="link" and aria-disabled="true". On a custom link, block activation in its event handlers.

Severity: Serious

Standard	Success Criterion	Reference
WCAG 2.2	4.1.2 Name, Role, Value (A)	For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies.
EN 301 549	9.4.1.2 Name, Role, Value	Same as the WCAG text.
Section 508	1194.21(d)	Sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. When an image represents a program element, the information conveyed by the image must also be available in text.

Forbidden Interactive Children

A breadcrumb link contains only the name of its page, and perhaps an icon. Nesting a control inside it, such as a button that opens a menu of sibling pages, leaves it ambiguous which of them a click or a key press reaches.

Avoids nested interactives

Reported as: Forbidden interactive children; Nested interactive elements

A breadcrumb's link must not contain another interactive element, such as a button or a second link.

When one control is nested inside another, browsers and assistive technologies handle it differently. The HTML parser lifts an <a> out of another <a>. When the nesting survives, some assistive technologies report only the outer link and some report both. Screen reader users then hear a different trail depending on what they use, and a click or a key press has two plausible targets.

Take the inner control out, and keep any other action, such as a menu of sibling pages, outside the breadcrumb.

Severity: Serious

Standard	Success Criterion	Reference
WCAG 2.2	4.1.2 Name, Role, Value (A)	For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies.
EN 301 549	9.4.1.2 Name, Role, Value	Same as the WCAG text.
Section 508	1194.21(d)	Sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. When an image represents a program element, the information conveyed by the image must also be available in text.

Relationships

Keep a breadcrumb within a single DOM hierarchy so that its elements are related naturally as parent and child. A breadcrumb trail has no meaningful relationship to any other element on the page, only the natural page-to-page relationship its links carry.

aria-owns

A breadcrumb holds its links inside its list in the DOM, one to a list item, in the order of the trail. Nothing in a breadcrumb needs aria-owns, including to reorder the trail.

Avoids aria-owns

Reported as: Avoid aria-owns

General check. Evinced checks that the breadcrumb doesn't use aria-owns to claim elements elsewhere in the document as its list items or links. This check runs on every UI pattern, not only on breadcrumbs.

A breadcrumb should not use aria-owns.

When aria-owns pulls a link into the breadcrumb from elsewhere on the page, the link lands after the breadcrumb's own entries in the accessibility tree while focus still follows the DOM. Screen reader users hear the trail out of sequence, and when they press Tab, they reach its links in a different order from the one they heard.

Put every link in the breadcrumb's list in the DOM, in trail order, and remove aria-owns.

Owns only conforming roles

Reported as: Invalid aria-owns values

General check. Evinced checks that every element a breadcrumb's list claims with aria-owns is a list item. This check runs on several UI patterns.

When a breadcrumb's list uses aria-owns anyway, each element it references should be a list item.

When the list owns a link or another element that isn't a list item, its item count and positions stop matching the trail, and screen reader users hear a list whose items don't add up.

Put each link in its own list item inside the list, in trail order, and remove aria-owns, as the section intro describes.

Operation

Links are the operable parts of a breadcrumb trail. With a pointer, clicking or tapping a link follows it. With a keyboard, the Tab key moves focus to the link and the Enter key follows it.

A native <a> element with an href attribute provides all of this with no code. To build a custom link that behaves the same way, see Link › Operation.

Focus Sequence

Each link in a breadcrumb is one tab stop, and keyboard users reach the links with the Tab key in the order of the trail, from the top of the hierarchy down. When the current page's entry is text rather than a link, it isn't a tab stop.

Reachable by keyboard

Reported as: Keyboard accessible

A breadcrumb's link must be reachable with the Tab key.

When a link is built from an element that isn't natively focusable, such as a <span> with a click handler, keyboard users can't reach it, or the page it leads to, from the trail.

Use an <a> element with an href attribute. When a custom link can't be avoided, add tabindex="0" to put it in the tab order, and don't set tabindex to a value greater than 0, which takes the link out of trail order.

Severity: Critical

Standard	Success Criterion	Reference
WCAG 2.2	2.1.1 Keyboard (A)	All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
EN 301 549	9.2.1.1 Keyboard	Same as the WCAG text.
Section 508	1194.21(a)	When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually.
508 Trusted Tester	2.1.1-keyboard-access, 4.A	All functionality can be accessed and executed using only the keyboard.

Skips tab order when disabled

Reported as: Disabled element focusable

A breadcrumb's link that presents as disabled should not be in the tab order.

When a disabled link keeps its tab stop, keyboard users moving along the trail land on an entry they can't follow.

The recommended method is to remove the href attribute from the link's <a> element, which takes it out of the tab order along with its role. To keep the role without the tab stop, set role="link" and aria-disabled="true" on it. For a custom link, remove tabindex="0".

If users need to find the link and learn why it's unavailable, it can keep its tab stop: set aria-disabled="true", make sure activating it does nothing, and reference visible text giving the reason with aria-describedby.

Severity: Minor

Puts focus on element with link role

Reported as: Focusable offset

Focus on a breadcrumb's link must land on the element that carries the link role, not on a descendant.

When focus lands on a child of the element with role="link", users tabbing along the trail aren't told they've reached a link, and screen readers may not announce the aria-current state that marks the current page.

Use an <a> element with an href attribute, or keep tabindex="0" on the element that carries role="link", and remove focusability from the descendant that was taking focus.

Severity: Minor

Standard	Success Criterion	Reference
WCAG 2.2	2.1.1 Keyboard (A)	All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
EN 301 549	9.2.1.1 Keyboard	Same as the WCAG text.
Section 508	1194.21(a)	When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually.
508 Trusted Tester	2.1.1-keyboard-access, 4.A	All functionality can be accessed and executed using only the keyboard.

Link Activation

A breadcrumb link whose page is available navigates to it when users click it or press Enter. A disabled link does nothing.

Activates with the Enter key

Reported as: Link cannot be activated with keyboard

A breadcrumb's link must navigate to its page when users press Enter.

When a custom link has only a click handler, keyboard users press Enter on an entry in the trail, get no response, and can't move up the hierarchy from it.

Use an <a> element with an href attribute, which follows the link with a pointer or the Enter key with no code, or give a custom link a keydown handler for Enter that runs the same navigation code as its click handler.

Severity: Critical

Standard	Success Criterion	Reference
WCAG 2.2	2.1.1 Keyboard (A)	All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
EN 301 549	9.2.1.1 Keyboard	Same as the WCAG text.
Section 508	1194.21(a)	When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually.
508 Trusted Tester	2.1.1-keyboard-access, 4.A	All functionality can be accessed and executed using only the keyboard.

Ignores activation when disabled

Reported as: Disabled element active

A breadcrumb's link that presents as disabled must not navigate when it's activated.

When a link carries aria-disabled="true" or is styled to look unavailable but keeps its href or its click and key handlers, users can still activate it, navigate somewhere unexpected, and lose their place on the page.

Remove href from the link's <a> element to disable it, and set role="link" when it has to keep its role. For a custom link, have the event listeners check the disabled state and return before navigating.

Severity: Moderate

Standard	Success Criterion	Reference
WCAG 2.2	1.3.1 Info and Relationships (A)	Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
EN 301 549	9.1.3.1 Info and Relationships	Same as the WCAG text.

Event Listener Type

When script in a breadcrumb responds to keys, it listens for keydown or keyup. The keypress event is deprecated, and browsers don't fire it for many keys, including the arrow keys, Home, End and Escape.

Avoids the keypress event

Reported as: Deprecated keypress listener

A breadcrumb's key handling should use keydown or keyup, not keypress.

When a handler listens for keypress, keys the browser doesn't send through that event go unanswered, and keyboard users find the breadcrumb ignoring keys it's meant to respond to.

Replace each keypress listener with a keydown listener, and read the key from event.key.

Severity: Minor

FAQ

Which WCAG success criteria do the breadcrumb issues relate to?

Many breadcrumb issues relate to 4.1.2 Name, Role, Value: each part of the breadcrumb with its correct role, links and entries with accessible names, a disabled state set only on a link, declared one way only and with aria-disabled rather than disabled, and no interactive elements inside a link.

Under 1.3.1 Info and Relationships, the breadcrumb sits in a navigation landmark, its trail holds links, its last entry carries a valid aria-current value, and a disabled link ignores activation. Under 1.3.2 Meaningful Sequence, every entry above the current page is a link. Under 2.1.1 Keyboard, each link can be reached with the Tab key, takes focus itself, and goes to its page when users press Enter.

The rest are best practices that map to no success criterion: one link for each entry, a named navigation landmark kept apart from other landmarks, and a disabled link kept out of the tab order.

Why are some breadcrumb issues marked as Critical and others as Minor?

Severity reflects how much an issue gets in users' way. Critical issues stop users outright:

A part of the breadcrumb without its role
An entry in the trail without a name
A link that can't be reached or followed by keyboard

Serious issues break the breadcrumb for assistive technology users:

A trail with no links, or outside a navigation landmark
A link without a name
A current page that isn't marked
A disabled state reported wrongly
An interactive element nested in a link

Moderate issues weaken navigation or trust:

An entry above the current page that isn't a link
Nested navigation landmarks
A disabled link that still navigates

Minor issues affect how easily users find their way:

An aria-current value that doesn't fit
More than one link in an entry
An unnamed landmark
A disabled link left in the tab order
Focus that lands inside a link

The aria-owns checks and the sanity check on where the navigation role sits carry no severity: Evinced reports them as general and sanity checks.

Link: the element each entry in the trail is built from, including how to build and disable one
Site Navigation: the primary navigation a breadcrumb supplements but never replaces

Breadcrumb

When to Use

Examples

Structure and Semantics

List Structure

Navigation Landmark

Role

Link Name

Disabled

Forbidden Interactive Children

Relationships

aria-owns

Operation

Focus Sequence

Link Activation

Event Listener Type

FAQ

Recommended Reading

Breadcrumb

When to Use

Examples

Breadcrumb With CSS-Generated Separators

Breadcrumb With Separators in the Markup

Structure and Semantics

Breadcrumb Has Links

List Structure

Navigation Landmark

Role

Link Name

Disabled

Forbidden Interactive Children

Relationships

aria-owns

Operation

Focus Sequence

Link Activation

Event Listener Type

FAQ

Related Patterns

Recommended Reading