Last active

Accessible Breadcrumbs Markup

  • Download Gist

Accessible Breadcrumbs Markup

Screen Readers

On MacOS X Mountain Lion, VoiceOver 6 reads "Breadcrumbs with 3 items, navigation. Link, Home. Link, Library. Visited link, Data."

On Windows XP, Windows Eyes reads "Two links. Link, Home. Link, Library. Visited Link, Data."

On Windows XP, NVDA 2012.3 reads "Navigation landmark. Link, Home. Link, Library. Visited Link, Data."



The ARIA hidden attribute is used to prevent screen readers from reading the peripheral dividing bar as meaningful content.

Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content.

Missing rel="index", rel="up", etc.

rel (relationship) values have been removed. While rel="up" was valid in HTML 3, it has since been dropped in HTML 4 and 5. For a list of valid rel values, see and

1 2 3
[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
content: "/";
1 2 3 4 5 6 7
<nav role="navigation" aria-label="breadcrumbs">
<a href="/">Home</a>
<span aria-hidden="true"></span>
<a href="/library">Library</a>
<span aria-hidden="true"></span>
<a href="">Data</a>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.