Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Accessible Breadcrumbs Markup

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

[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
content: "/";
<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>

Interesting... so, as I understand screen readers may read the dividing bar even using the :after attribute on the a selector, and that's why you are using that piece of css and the extra markup in the html.

What about if using an image or a icon font?
I guess with images you can save markup, but add extra data loading. But with an icon font you also add probably more chaos as the screen reader could interpret whatever it wants.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment