Re: Breadcrumbs

One question keeps being asked "How do you make bread crumbs accessible?"

I think the questions that folks are trying to debate is how to make bread 
crumbs link more understandable, do we really need them, are they useful, 
etc.  But let me try to answer the original question about whether they 
are accessible:

Today, the screen readers and talking browsers read the bread crumb links 
just as the sighted user sees them - a few links separated by some 
characters.  Let's ask ourselves: How does the sighted user know they are 
bread crumb links?   Some only know because someone explained it to them 
that's what bread crumb links look like - a set of links separated by 
"greater than looking" character.  Others figure it out based on the 
content of the links and that they follow one another in some hierarchal 
order.  So far all that information is available to the screen reader user 
just as the sighted user  - so I claim they are technically accessible. 
Perhaps equally confusing, equally unusable, but still equally accessible. 


If someone codes them as a list and uses CSS to add "greater than looking" 
image characters before each link - then I believe that is NOT accessible 
because if I turn off CSS I loose the hint from the "greater than looking 
images" that separate the links.  Those images/characters are the hint 
that lets both the sighted and screen reader users know they have 
encountered a bread crumb list of links.  CSS should not be used to add 
semantical information through styling.  Some may argue that styling a 
list to make it look like a bread crumb list is OK because it's a list 
after all isn't it?  My response has already been that it is not "just" a 
list of links.  Bread crumbs are a special list of links that convey 
additional hierarchal meaning that is not available from the current set 
of XHTML 1.1 list tags - hence the invention of the current use of the 
"greater than" characters and the horizontal formatting on a single line. 

If the original question is "How should we code them to make them sound 
better to screen readers users? - then I would ask you designers to ask 
yourselves how do you want them to be read to you?  In other words, if you 
were reading your site to an associate that wasn't looking at the screen, 
How would you read the set of links separated by greater than characters?  
If you were designing a voice response system for a telephone and you 
wanted to let the users know where they were in the hierarchy of the set 
of menus, what would you say?  Would you want to explain it in detail 
every time the user asked or would you want to be able to have a verbose 
version and a condensed version.  For example, you probably wouldn't want 
to add the text to a visual web page that said "Start of Bread crumb 
links", followed by the links separated by greater than characters.  So as 
a designer you could choose between just adding a title attribute to the 
first link or adding an icon with alt text that indicated that a bread 
crumb list follows.  The title attribute is the condensed version because 
is not visible and is not spoken every time, while the icon is more 
verbose because it is visible and the alt text would be spoken every time. 
 Both are equally accessible, but you may consider one more user friendly 
than the other - hence a design usability decision or best practices 
example.. 

But lets say you want it to both sound good and include a clue that it was 
a bread crumb list.  One design option would be to add the title attribute 
to the first link, then uses small icon images in-between the links that 
had more English sounding text than "greater than".  I could think of a 
number of phrases we might be able to narrow down to a recommended few:. 
For example:
which includes
follows
followed by
contains
etc.

So a bread crumb list would be read by a screen reader more like a human 
reading the list to an associate as such:

<link> Home, which includes <link> Products, which includes <link> 
Specific Product, which includes This page.
Home, contains Products, contains Specific Product, contains This page.
Home, followed by Products, followed by Specific Product, followed by This 
Page. ,

You could get even more creative with the alt text and vary it in-between 
the links, such as
Home, which includes Products, followed by this Specific Product, which 
contains This Page.

have fun,
Phill Jenkins