Watching Breadcrumb Navigation for Landmarks, Labels, and Keyboard Use
Breadcrumbs are small, structural, and routinely built as a row of divs. Checking the nav landmark, its label, and the current page marker that assistive technology depends on.
Breadcrumbs sit near the top of a product page and most shoppers barely register them. For a screen reader user they answer a specific question fast: where am I in this store, and what is the level above this one? That only works if the breadcrumb is marked up as navigation, labelled as breadcrumb navigation, and honest about which item is the current page.
Strip the structure away and the same visual row becomes a string of links with no context. A links list will read them out with no indication that they form a path, and the final item, which is usually the current page and not a link at all, gets announced the same as the rest.
One landmark, with a name
A page often has several nav elements: the main menu, a footer menu, a breadcrumb trail. Without labels, a screen reader's landmark list shows navigation, navigation, navigation. The breadcrumb nav needs an aria-label of breadcrumb, and the main menu needs its own distinct label, so the two can be told apart in the list and jumped to separately.
Check this with a landmark list rather than by reading the code. If the list shows unnamed navigation landmarks, that is the finding, regardless of how tidy the markup looked. The label is cheap to add in a template and it pays off on every page that uses the template, which for a product breadcrumb is the whole catalogue.
The current page marker does real work
The last breadcrumb should carry aria-current with a value of page, and in most patterns it should not be a link to itself. That marker is how assistive technology distinguishes you are here from the places you can go back to. Without it, shoppers may follow the final breadcrumb expecting a different page and land where they already were.
Separators matter less but they still show up in findings. A slash or chevron rendered as text can be read aloud between every item, turning the trail into a string of punctuation. Decorative separators belong in CSS or in markup hidden from assistive technology, so the path reads as names, not symbols.
Keyboard order and long trails
Tab through the breadcrumb on a deep category path. The order should follow the visual path, home or top category first, current level last, with a visible focus indicator on each link. Long trails on mobile often collapse into a single back link, which is a reasonable pattern, provided the collapsed version is still a real link with a meaningful name and not an icon that announces as button.
When you log a breadcrumb issue, name the template. Breadcrumbs are generated, so a defect on one product page is a defect on all of them, and framing it that way is what gets a one line template fix scheduled instead of a debate about a single page.
Related reading: Watching Filter and Sort Controls on Mobile Collection Pages, Watching Homepage Carousels: Autoplay, Pause, and Focus Order, Watching Sticky Help Buttons and Chat Bubbles Cover Focus.
Frequently asked questions
Why does a breadcrumb need a nav landmark?
So assistive technology can identify it as navigation and let the user jump straight to it. Without the landmark, the breadcrumb is just an undifferentiated row of links.
What should the breadcrumb nav be labelled?
Breadcrumb, using aria-label on the nav element. That distinguishes it in the landmark list from the main navigation and footer navigation, which should carry their own distinct labels.
How is the current page marked in a breadcrumb?
With aria-current set to page on the final item, which is normally plain text rather than a link to itself. That tells assistive technology this item is where the user already is.
Should separators between breadcrumb items be read aloud?
No. Slashes and chevrons are decorative in this context and should be presented via CSS or hidden from assistive technology, so the trail is announced as a sequence of page names.