Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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 7.5.4.1 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."

Notes

aria-hidden="true"

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. w3c.org

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 whatwg.org and microformats.org.

[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>
</nav>
@bonilladisseny

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
Something went wrong with that request. Please try again.