E-mail List Archives
Thread: Preferrred breadcrumb implementation?
Number of posts in this thread: 5 (In chronological order)
From: Austin, Darrel
Date: Wed, May 31 2006 1:40PM
Subject: Preferrred breadcrumb implementation?
No previous message | Next message →
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> > <a>section</a> > <a>subsection</a> >
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
From: ben morrison
Date: Thu, Jun 01 2006 2:50AM
Subject: Re: Preferrred breadcrumb implementation?
← Previous message | Next message →
On 5/31/06, Austin, Darrel < = EMAIL ADDRESS 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> > <a>section</a> > <a>subsection</a> >
>
> 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>></li>
<li><a href="#">subpage 2</a>></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
From: Austin, Darrel
Date: Thu, Jun 01 2006 8:00AM
Subject: RE: Preferrred breadcrumb implementation?
← Previous message | Next message →
> 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.
Yes, I guess that's specifically the question. To reword them:
- Does hearing 'greater than' actually help contexualize the beadcrumbs
for the user?
- Does leaving it as a OL/UL, like the rest of the navigation on the
site confuse more than help?
- Would labelling them as breadcrumbs also help, and, if so, is the
term 'breadcrumb navigation' ideal?
-Darrel
From: Jared Smith
Date: Thu, Jun 01 2006 10:00AM
Subject: Re: Preferrred breadcrumb implementation?
← Previous message | Next message →
Austin, Darrel wrote:
> - Does hearing 'greater than' actually help contexualize the beadcrumbs
> for the user?
I would say yes. But only because breadcrumbs tend to be done like this
and this has become a bit of a de facto standard. Unfortunately, there
isn't (yet) markup for identifying navigation and sub-navigation.
> - Does leaving it as a OL/UL, like the rest of the navigation on the
> site confuse more than help?
I would either use the > and linear test OR a list. I think using both
might be a little overboard. And definitely an ordered list as a hierarchy
is being presented. If your main navigation is a list, I might argue
against using another list for breadcrumbs, especially if you have a
linearized sub-navigation.
> - Would labelling them as breadcrumbs also help, and, if so, is the
> term 'breadcrumb navigation' ideal?
Perhaps, but most people won't understand 'breadcrumb navigation'. I'd
probably go with 'You are here:' or something more informative.
On our upcoming site design, we went with:
You are here: Home > Articles > Introduction to Web Accessibility
'You are here:' is visually hidden, but read by screen readers. We did not
go with a list, as our informal testing indicated that the > better
indicated the breadcrumb hierarchy to users than an ordered list. It also
renders more accurately when styles are disabled:
You are here:
1. Home
2. Articles
3. Introduction to Web Accessibility
... does not really present the semantic structure of the breadcrumbs,
where Articles is within or subordinate to (or less than!) Home.
So much of accessibility is understanding the issues, choosing from
multiple 'good' options, and doing what you think is best. It's certainly
subject to opinion, but this is what my opinion on this would be.
Jared
From: Austin, Darrel
Date: Thu, Jun 01 2006 12:30PM
Subject: RE: Preferrred breadcrumb implementation?
← Previous message | No next message
> So much of accessibility is understanding the issues,
> choosing from multiple 'good' options, and doing what you
> think is best. It's certainly subject to opinion, but this is
> what my opinion on this would be.
Jared:
Thanks for the thorough response. I agree with everything you said, so I
feel a bit better going with my original gut reaction.
And 'you are here'...duh...that is obviously better than 'breadcrumb
nav'...I should have been able to come up with that one. Thanks for the
idea! ;o)
-Darrel