A Pen by Jonathan Neal.

Accessible-Breadcrumbs-Markup.markdown

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.

A Pen by Jonathan Neal on CodePen.

License.

index.html

<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>

style.css

[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
	content: "/";
}