Breadcrumbs

What are Breadcrumbs?

Breadcrumbs are a type of secondary navigation that shows users the path they’ve taken within a website. They are typically placed consistently across all pages within a website, usually near the top of a page. Most appear as horizontal links, such as:

Home > Products > Shoes > Running Shoes

Their main purpose is to help users understand and visualize a website’s structure and hierarchy, see where they are, and quickly navigate to previous pages. 

How Do Breadcrumb Trails Impact Accessibility?

Breadcrumb trails play a key role in making websites easier to navigate and understand for all users, including those relying on assistive technologies. They provide orientation and context by showing users their location within a site, something that’s especially important for complex websites or pages with multiple levels of content.

Accessible breadcrumbs help users:

By implementing accessible breadcrumb trails, you not only enhance usability and efficiency for users with disabilities but also improve overall site structure and search engine optimization (SEO) by giving search engines clearer context about your content hierarchy. 

What WCAG Success Criteria are Relevant for Breadcrumb Trails?

Accessible breadcrumb trails directly support the following WCAG success criteria:

• WCAG Success Criterion 2.4.8 Location: This criterion states that information about the user's location within a set of Web pages must be available. Breadcrumbs clearly fulfill this by showing the path to the current page.

• WCAG Success Criterion 2.4.5 Multiple Ways: This criterion requires that there is more than one way to locate a Web page within a set of Web pages. Breadcrumbs provide an additional, hierarchical navigation method alongside sitemaps or main menus.

How Do I Maximize Accessibility When I Code Breadcrumbs?

To maximize accessibility when coding breadcrumbs, follow these best practices:

• Use semantic HTML links: Implement breadcrumb items using HTML links to ensure they are interactive and recognized by assistive technologies.

• Place breadcrumbs consistently: Ensure breadcrumb trails are placed consistently within each page to foster predictability for users.

• Provide a clear visual separator: Use a visible separator (e.g., ">", "|", "/", or "→") to help users differentiate items in the trail visually.

• Identify the current page with aria-current: Use the aria-current attribute on the link representing the current page to convey its status to assistive technology, informing screen reader users which page they are currently on.

• Keep breadcrumbs short and descriptive: Use concise, meaningful link text so all users can quickly scan the path. Avoid using overly long labels that could clutter the trail and overwhelm screen reader output.

• Support keyboard navigation: Test that users can tab through breadcrumb trails in a logical order, activate links with Enter, and identify the current page without confusion. 

By combining semantic HTML, consistent placement, and clear ARIA usage, you create breadcrumb trails that are accessible and usable for everyone.

How Do I Test the Accessibility of Breadcrumb Trails?

Keyboard Navigation

Use the Tab and Shift + Tab keys to navigate through the breadcrumb links. Ensure all links are focusable and that the navigation order is logical.

Screen Reader Testing

First, navigate to the breadcrumb trail and confirm that it’s easy to locate.

Next, listen to how the screen reader announces each link in the trail. Verify that the aria-current attribute is applied to the last item so the current page is correctly identified.

Finally, use screen reader quick keys or elements lists (like the VoiceOver Rotor or NVDA Elements List) to review all breadcrumb links. Each link should be announced with clear, descriptive text so users understand its purpose and where it will take them.

Visual Inspection

Manually check that the visible separators are clear and that the breadcrumbs are consistently positioned across different pages. 

How Can I Learn More About Breadcrumb Trails?

Improving your understanding of breadcrumbs goes beyond coding them correctly. It’s about knowing how real users experience them. Here are a few ways to deepen your knowledge and practice:

• Start with official guidance: When implementing breadcrumbs, always refer to W3C's WAI ARIA Authority Practices and WCAG documentation. These include detailed technical instructions and examples for building semantic components.

• Conduct regular accessibility testing: Integrate screen reader and keyboard testing into your regular development workflow for any navigation components. Hands-on practice with these tools helps bridge the gap between understanding accessibility guidelines and implementing them effectively.

• Integrate accessibility into your workflow: Add breadcrumb accessibility checks into your development process, whether that’s through agile acceptance criteria or waterfall requirements. Embedding accessibility early prevents rework later.

• Build confidence step-by-step: If you are new to building accessibility, start small by focusing on meeting all guidelines for a single type of element, such as navigation, before moving on to more complex components.