Re: Breadcrumbs

Then bigger issue here is giving a useful "label" to any
collection of navigation links on a web page.  Breadcrumbs are
just is just one example of a setup navigation links used on
web pages.   Users generally want to navigate over them to get
to main content and directly to them to benefit from their
conveince.  

One way with in current HTML 4.01 markup to label a set of
navigation links is to use the MAP element with text link
content.  Then using a tool like the Mozilla Accessibility
Extensions [1] or the IEAccessible plug-in for Internet
Explorer [2] you can bring up a list of MAP elements and the
title attribute of the MAP is used to label the set of links
associated with the MAP element.  Users can both be oriented
to there purpose and then set of links associated with the MAP
element.

Example markup:
<map name="navbar" title="Bread Crumbs">
<ol>
<li><a href="home.html">Home</a></li>
<li><a href="level1.html">Level 1</a></li>
<li><a href="level2.html">Level 2</a></li>
</ol>
</map>



[1]http://cita.disability.uiuc.edu/software/mozilla
[2]http://cita.disability.uiuc.edu/software/ieaccessible/index.html

---- Original message ----
>Date: Wed, 4 Aug 2004 10:34:41 -0500
>From: Phill Jenkins <pjenkins@us.ibm.com>  
>Subject: Re: Breadcrumbs  
>To: w3c-wai-ig@w3.org
>
>   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


Jon Gunderson, Ph.D., ATP
Coordinator of Assistive Communication and Information Technology
Division of Rehabilitation - Education Services
MC-574
College of Applied Life Studies
University of Illinois at Urbana/Champaign
1207 S. Oak Street, Champaign, IL  61820

Voice: (217) 244-5870
Fax: (217) 333-0248

E-mail: jongund@uiuc.edu

WWW: http://cita.rehab.uiuc.edu/
WWW: http://www.staff.uiuc.edu/~jongund

Received on Wednesday, 4 August 2004 12:36:41 UTC