A navigational aid that shows the page’s position in the hierarchy. Mark up with nav and aria-label="breadcrumb".
Breadcrumbs are navigational aids that show users their current location within a website's hierarchy and provide a path back to previous levels. Named after the Hansel and Gretel fairy tale, breadcrumbs help users understand where they are and how they got there.
For accessibility, breadcrumbs serve multiple critical functions. They provide context for screen reader users who may have jumped directly to a page via search or external links. They offer keyboard users a quick way to navigate back through the site hierarchy without using the back button. And they help users with cognitive disabilities understand the relationship between different sections of your site.
Well-implemented breadcrumbs use semantic HTML (typically a `
Effective breadcrumb implementation requires attention to both visual design and accessibility requirements:
Semantic Structure: Use a `
Current Page Indication: Mark the current page with `aria-current="page"` rather than making it a clickable link. This tells screen reader users they've reached their destination.
Descriptive Links: Each breadcrumb link should clearly indicate the section or page it represents. Avoid cryptic abbreviations that don't make sense out of context.
Keyboard Navigation: Ensure all breadcrumb links are keyboard accessible and provide clear focus indicators.
Visual Design: Use consistent separators (commonly ">" or "/") and ensure adequate color contrast for all breadcrumb elements.
Mobile Considerations: On mobile devices, breadcrumbs may need to be truncated or redesigned to fit smaller screens while maintaining accessibility.
Join over 1 million websites using WebAbility to ensure digital accessibility compliance and provide equal access to all users.
Mechanisms such as skip links and landmarks that let users jump past repeated content directly to main sections.
Sequential navigation order when using Tab key. Should be logical and match visual reading flow.
ARIA role for navigation elements. Prefer native <a> elements with proper href attributes.
This glossary is continuously improved and maintained by WebAbility to advance accessible design and development.Contact us to suggest improvements or report issues.