WebAIM - Web Accessibility In Mind

E-mail List Archives

Preferrred breadcrumb implementation?

for

From: Austin, Darrel
Date: May 31, 2006 1:40PM

I'm redoing some of the elements on our site and want to re-evaluate how
I implement topic-path navigation (breadcrumbs).

At the moment, visually, it looks like this:

Home > section > subsection >
PAGE TITLE

Semantically, it's an UL with an image of a > used. So, in a screen
reader, it looks like any other list of links, which probably isn't
idea.

I'm thinking that it might be better to literally write it out as it
looks:

<a>Home</a> &gt; <a>section</a> &gt; <a>subsection</a> &gt;

Thoughts on that? It is annoying to have to hear 'greater than' after
each link item in a screen reader?

In addition, should the breadcrumb navigation be labeled somehow? For my
site nav, I use this:

<dl>
<dt>Site Navigation</dt>
<dd><ul>...links...</ul></dd>
</dl>

I then hide the DT off screen.

Seems like that would be useful for breadcrumbs, but not sure what
'average joe' term would make sense to most folks. Seems that pointing
it out as being 'breadcrumbs' might actually confuse more than help.

Thoughts?

-Darrel