Skip to content

Instantly share code, notes, and snippets.

@jonathantneal
Created November 8, 2012 09:33
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jonathantneal/4037764 to your computer and use it in GitHub Desktop.
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>
@bonitron
Copy link

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