Breadcrumbs, and the Separator Nobody Should Hear

A breadcrumb answers two questions at once. Where am I, and how do I get back up. That is worth having near the top of a page for anybody who landed deep in a site without walking down to it, which is what happens every time somebody arrives from a search result.

It is also the cheapest component we write about. The pattern has no keyboard interaction at all, which is unusual enough to be worth saying out loud, because it means the whole job is markup. Two details separate the version that helps from the version that adds noise to every page on the site.

Name the Trail, and Know When a Name Is Needed

Wrap the trail in a nav element so it registers as a navigation landmark, then give that landmark an accessible name, usually aria-label="Breadcrumb". The reason is comparison rather than description. A screen reader user pulling up the page's landmarks sees a list, and two regions both called navigation give them nothing to choose between.

The rule underneath is more precise than always label everything. Where a page has more than one navigation landmark, each one needs its own unique label. Where a page has only one, the label is not strictly required. Almost every real page has a main menu and a breadcrumb, so you are in the first case, and there is one deliberate exception worth knowing. Where two landmarks hold an identical set of links, such as pagination controls repeated above and below a long table, W3C says to give them the same label rather than inventing two.

Inside the nav, use an ordered list. The order is the meaning here, and a list gives the count away for free, so somebody hears three items rather than counting them as they go.

The Separator Should Not Be Read Aloud

This is the detail that gets missed, and it is the one that shows up on every single page of a site rather than once. A slash or a chevron typed between the links is text, so it is announced. The trail reads as Home slash Guides slash Breadcrumbs, and the reader hears that on arrival at every page they visit.

• Put the separator in CSS, with a pseudo-element. Generated content never enters the accessibility tree, so there is nothing there to announce.
• If it has to sit in the markup, hide it with aria-hidden="true". That is safe here in a way it is not elsewhere, because a separator is never focusable, and hiding a focusable thing leaves a keyboard user landing on nothing.
• An icon separator needs deciding on rather than treating. An img with no alt attribute at all is the case that announces as an image or as its filename. A decorative img with alt="", or an inline SVG carrying aria-hidden="true", is already silent.

Mark the Current Page, and Pick One of Two Ways

The last item in the trail is the page the reader is already on, and there are two published ways to say so. Remove the anchor, so the current item is plain text that cannot be clicked, which W3C's own tutorial presents first because it stops a reader wondering what that link would do. Or keep the anchor and add aria-current="page", which is what the tutorial recommends when the markup will not let you take the link out.

You are not being asked for both. The breadcrumb pattern says aria-current is optional once the current item is no longer a link, so unlink it and you are done. Whichever route you take, only one element in the set gets marked as current, and bolding the text is not one of the routes, because weight is a visual signal and nothing more.

Which Rule Breadcrumbs Actually Discharge

Breadcrumbs are a published way to satisfy 2.4.8 Location, which asks that a reader can work out where they are inside the site. That criterion is Level AAA. W3C's own note on conformance says AAA is not something to require across a whole site, and that is exactly why picking up an individual AAA criterion on purpose is a reasonable thing to do. This is one of the cheapest to pick up, because the work is markup and there is no behavior to build.

Breadcrumbs are not one of the ways to satisfy 2.4.5 Multiple Ways at Level AA. That criterion asks for more than one route to a page, and the six routes W3C names are a search function, a site map, a table of contents, links to related pages, a list of every other page, and linking every page from the home page. A breadcrumb points up the hierarchy rather than out to the page somebody was looking for. Build breadcrumbs for their own reasons and count search or a site map toward the AA rule, because that is the one an owner is legally exposed on.

Two honest qualifications sit under that. W3C says on every criterion that there may be other ways of meeting it that its technique lists do not cover, so a sufficient-techniques list is a floor rather than a fence. And one of the six, providing links to related pages, is broad enough that somebody could argue a breadcrumb belongs inside it. What we would not do is put that argument in a report, because the technique's own description is about locating additional information rather than about showing a hierarchy.

There is also a scope limit on 2.4.5 that saves owners a lot of worry. A page that is the result of, or a step in, a process is excepted, so a checkout flow and a page of search results are outside the rule entirely.

Keep the trail in the same place on every page, which is 3.2.3 Consistent Navigation, and make sure each link reads sensibly on its own, which our link text checker will tell you in a few seconds.

Structured Data Is a Separate Question

Adding BreadcrumbList markup helps a search engine show the trail in its results, and it does nothing at all for accessibility. Assistive technology reads the accessibility tree, which is built from rendered elements, roles and ARIA properties. A block of JSON is not in it. Do both, and do not let anybody tell you the first one covers the second.