WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Preferrred breadcrumb implementation?

for

From: ben morrison
Date: Jun 1, 2006 2:50AM

On 5/31/06, Austin, Darrel < <EMAIL REMOVED> > wrote:
> 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 actually rarely use breadcrumbs these days, but when I do I code
them as follows:

You are here: business advice > subpage 2 > subpage 3

<ol class="breadcrumb">
<li>You are here:</li>
<li><a href="#">business advice</a>&gt;</li>
<li><a href="#">subpage 2</a>&gt;</li>
<li>subpage 3</li>
</ol>

In have also used '>' as a graphic before in the stylesheet as well to
avoid the repetion of 'greater than' although wether this is
neccessary i'm not sure as '>' has come to represent a breadcrumb so
hearing it may help - other opinions needed.

Ben