Table of Contents
What are Breadcrumbs?
Breadcrumbs are a secondary navigation element on websites that shows visitors the current path through the site hierarchy. The term originates from the fairy tale Hansel and Gretel, in which the children scatter breadcrumbs along their path through the forest to find their way back.
Breadcrumbs are typically displayed at the top of a page and represent the hierarchy from the homepage to the current position – for example: Home > Products > Electronics > Smartphones. Each level is a clickable link that allows visitors to jump directly to parent categories or subpages without having to use the menu.
Breadcrumbs serve several important functions: They improve orientation for visitors on the website, facilitate navigation through multi-level structures, reduce the number of clicks needed, and provide a compact overview of the site hierarchy. At the same time, they help search engines like Google better understand a website's structure.
For digital accessibility, a correctly implemented breadcrumb navigation is essential. It enables people with disabilities – particularly screen reader users, people with cognitive impairments, and older visitors – to better orient themselves and control their navigation. Read in this article how breadcrumbs help users.
Breadcrumbs improve usability, orientation, and SEO equally
Accessible implementation is a WCAG success criterion
Google displays breadcrumbs as rich snippets in the SERPs
Benefits of Breadcrumbs for Visitors, SEO, and Usability
Orientation and Overview: Breadcrumbs give visitors a clear, visual representation of their position within the site hierarchy. This is especially valuable on websites with deep levels or complex categories. A user immediately knows where they are and what path they took through the content.
Reduced Navigation Steps: Without breadcrumbs, visitors would have to return to the menu to navigate to parent pages. With breadcrumb navigation, they can directly click to any level in the hierarchy – this saves time and significantly improves usability.
Lower Bounce Rate: Studies show that websites with well-implemented breadcrumbs have lower bounce rates and longer visit durations. Visitors feel more secure and explore more content when they don't feel lost in the site hierarchy.
SEO Benefits: Breadcrumbs help search engines and their crawlers understand a website's structure and hierarchy. With correct Schema.org markup, breadcrumbs can be displayed as rich snippets in Google's SERPs, which significantly increases click-through rates. They also support internal linking between categories and subpages.
Cognitive Support: People with dyslexia, memory disorders, or other cognitive impairments benefit particularly from breadcrumbs. They reduce cognitive load by providing a visual framework and clear overview for navigation. Visitors don't have to remember how they reached the current position.
Types of Breadcrumbs
There are three common breadcrumb variants that differ in function and design. Which variant is right depends on your website's structure and your visitors' needs.
Location Breadcrumbs (Hierarchy)
The most common type. Shows the site hierarchy – from the homepage through categories to the current position. Example: Home > Shop > Electronics > Smartphones. These breadcrumbs always display the same structure regardless of the path the visitor took.
Path Breadcrumbs
Based on the actual path a visitor took through the website. They show the individual journey – similar to breadcrumbs in the fairy tale. If a user visits different subpages in different order, different breadcrumbs are displayed. This variant is less common today.
Attribute Breadcrumbs
Show the attributes or filters used to reach the current page. Common in e-commerce and online shops. Example: Home > Women's Shoes > Size 39 > Color Black. Visitors can click on individual attributes and change them without repeating the entire navigation.
Breadcrumbs and Accessible Web Design
Breadcrumbs are a critical element for digital accessibility. A correctly implemented breadcrumb navigation helps people with disabilities understand the site hierarchy and find their way around the website. A poorly implemented version can be invisible or even confusing for these users.
Screen Reader Users: Visitors using screen readers need semantically correct HTML markup of breadcrumbs. This includes using the <nav> element with aria-label="Breadcrumb" and proper structuring as an ordered list. Without correct markup, screen reader users cannot recognize the element as breadcrumb navigation.
Keyboard Navigation: All links in breadcrumbs must be accessible via keyboard and have a visible focus indicator. This is essential for users who cannot use a mouse. The visitor must be able to reach each level of the breadcrumb navigation by pressing the Tab key.
Cognitive Accessibility: A clearly structured breadcrumb navigation helps visitors with attention disorders or dyslexia understand their position. The overview of levels reduces confusion and provides orientation – similar to how breadcrumbs in the fairy tale of Hansel and Gretel showed the way back.
The Web Content Accessibility Guidelines (WCAG) contain several success criteria that are directly applicable to breadcrumbs and regulate their accessible implementation.
Best Practices: Creating Accessible Breadcrumbs
Follow these rules to ensure your breadcrumbs are accessible, user-friendly, and SEO-optimized.
Semantic HTML and ARIA
Use the <nav> element with aria-label="Breadcrumb". Use an ordered list (<ol>) to emphasize the hierarchy of levels. Mark the current position with aria-current="page" – as text, not as a link.
Visual Clarity and Design
Use a clear separator between levels (e.g. ">", "/" or an arrow icon). Ensure links are sufficiently large and have adequate spacing. The contrast between text and background must be at least 4.5:1. If the path is very long, limit the display to 5–7 levels.
Keyboard and Focus Management
All links must be accessible via keyboard. A visible focus indicator in CSS is essential. Link text should be meaningful – avoid terms like "click here" or "next". Focus must flow logically from left to right through the levels.
SiteCockpit Solution
How easyVision Supports Breadcrumb Navigation
easyVision makes breadcrumbs more accessible to all visitors. The widget offers the ability to increase font size – particularly important for older users who might miss small navigation elements. Through the contrast enhancement feature, breadcrumbs and separators remain readable even in poor lighting conditions. Additionally, visitors can disable animations, which improves focus visibility when clicking through the levels.
Technical Implementation: Breadcrumbs in HTML, CSS, and CMS
HTML Structure (Best Practice): The foundation for accessible breadcrumbs is semantically correct HTML markup. Use a <nav> element with aria-label, an ordered list, and mark the current position with aria-current="page". The last element in the path should not be a link since it represents the current page.
CSS Styling: Style the separator between levels using CSS pseudo-elements (::before or ::after) instead of text characters in the HTML content. Ensure that focus states are clearly visible – don't rely on color alone, but also use borders or underlines. Responsive design is essential: On mobile devices, breadcrumbs should be shortened if the path is too long.
Schema.org Markup for Google: Additionally create BreadcrumbList schema so search engines understand the page hierarchy. Google can display this markup as rich snippets in the SERPs. The data should be validated with the Google Rich Results Testing Tool.
Implementation in CMS and PHP: Most content management systems like WordPress, Shopware, or TYPO3 offer breadcrumbs as a built-in function or via plugins. If you use your own system with PHP, create the breadcrumb navigation dynamically based on the page hierarchy. Ensure that the HTML markup contains all accessibility attributes even when dynamically generated.
JavaScript Extensions: If JavaScript is used for dynamic breadcrumbs, ensure navigation works without JavaScript. Use aria-live="polite" for dynamic updates so screen reader users are informed of changes.
Common Breadcrumb Implementation Errors
Missing Semantic Structure: The most common error: breadcrumbs are implemented as simple <div> or <span> elements with ">" as a separator. For screen reader users, this element is invisible and not navigable. Without correct HTML, no crawler recognizes breadcrumbs as such.
No aria-current Marking: The current position in the path should not be displayed as a link. It must be marked with aria-current="page". This helps screen reader users understand what level they're on.
Poor Focus Indicator: If the focus indicator in CSS is weak or invisible, visitors using only the keyboard cannot navigate breadcrumbs. The focus state must be clearly visible on every link.
Too Many Levels: A breadcrumb navigation with 10 or more levels is confusing and worsens usability. This usually indicates a site hierarchy that is too deep. The rule is a maximum of 5–7 levels.
Ambiguous Link Text: Breadcrumb elements like "Click here" or "Next" are not meaningful. Each element should clearly name the category or page it leads to.
Confusion with the Menu: Breadcrumbs are a supplementary navigation element, not a replacement for the main menu. Both should work independently and offer visitors different navigation options.
Breadcrumbs in E-Commerce and Online Shops
Attribute Breadcrumbs in Shops: In e-commerce websites and online shops, breadcrumbs are often more complex because visitors filter products through various attributes – such as category, size, color, or price. Good breadcrumb navigation presents these attributes as clickable levels so users can change individual filters without starting from the beginning.
Dynamic Breadcrumbs: Some shop systems use dynamic breadcrumbs that change based on the visitor's path. If navigation content changes, screen reader users must be informed – aria-live regions can help here.
Mobile Optimization: On mobile devices, long breadcrumb paths can cause space problems. A common solution is shortening to "Home > … > Current Category". If this approach is chosen, the full navigation must remain accessible via an expandable element.
Breadcrumbs and Search Function: On search results pages, breadcrumbs often don't follow the classic site hierarchy. An alternative presentation works well, for example: "Home > Search Results for 'Sneaker'". This maintains orientation for visitors even on search pages.
Relevant WCAG Success Criteria for Breadcrumbs
The Web Content Accessibility Guidelines (WCAG) contain several success criteria that relate to the accessible implementation of breadcrumbs and navigation elements:
WCAG 1.3.1 – Info and Relationships (Level A): The structure and hierarchy of breadcrumbs must be communicated through HTML markup – not just visually through design or CSS. Crawlers and screen readers must be able to understand the page hierarchy.
WCAG 1.4.3 – Contrast Minimum (Level AA): Text in breadcrumbs must have a contrast ratio of at least 4.5:1 to the background. This ensures visitors with visual impairments can read the navigation.
WCAG 2.1.1 – Keyboard (Level A): All breadcrumb functions must be operable via keyboard. Visitors who cannot click must be able to reach every level using the Tab key.
WCAG 2.4.3 – Focus Order (Level A): Focus must move in logical order through the levels. The breadcrumb path must be focusable from left to right.
WCAG 2.4.7 – Focus Visible (Level AA): The current focus must be clearly visible on every breadcrumb element – essential for users navigating only with the keyboard.
WCAG 3.2.3 – Consistent Navigation (Level AA): Breadcrumbs must appear consistently in the same position on all subpages of a website. Visitors expect breadcrumb navigation in the same location.
The Accessibility Act requires companies to meet these WCAG criteria. With easyStatement, you document the accessible implementation of your breadcrumbs and navigation.
Frequently Asked Questions about Breadcrumbs
Tools for Testing Breadcrumbs
Browser Developer Tools: Chrome and Firefox DevTools allow you to inspect the HTML structure of your breadcrumbs. Use the Accessibility Tree to see how screen readers interpret breadcrumb navigation.
Screen Reader Testing: Test with free software like NVDA (Windows) or VoiceOver (macOS). Verify that breadcrumbs are correctly announced as navigation and each link in the path is accessible.
Keyboard Navigation Test: Navigate using only Tab and Shift+Tab. All links must be reachable and focusable. The focus indicator must be clearly visible on every element of the path.
Google Rich Results Test: Validate your BreadcrumbList schema to ensure Google reads the data correctly and displays breadcrumbs as rich snippets in the SERPs.
Automated Testing: easyMonitoring from SiteCockpit offers automated WCAG testing of your entire website – including analysis of breadcrumbs, contrast, and navigation structure.
Check Your Breadcrumbs for Accessibility
Are your breadcrumbs accessible and SEO-optimized? Check now with SiteCockpit for free whether your breadcrumb navigation meets WCAG standards.
No credit card required.