Accessibility Questions: Nested ordered list as navigation breadcrumb

E.J. Zufelt everett at zufelt.ca
Mon Jun 21 19:24:16 UTC 2010


At the end of the day I really don't think it matters too much, as long as the usage is consistent.

Hierarchical lists of only one item can be annoying as some screen-readers announce list start, list end, for each list... but it does convey more meaning.

A flat list serves the purpose of showing some relationship between the items, and is semantic... it is after all a flat list of related single items.

No list lacks any real semantic connection, which is often then represented with a character like >, but depending on the character used some screen-readers ignore the character as it is an unsupported decorative symbol.

HTH,
Everett Zufelt
http://zufelt.ca

Follow me on Twitter
http://twitter.com/ezufelt

View my LinkedIn Profile
http://www.linkedin.com/in/ezufelt



On 2010-06-21, at 3:11 PM, Michael S Elledge wrote:

> Hi Jonathan--
> 
> You may want to go with no list at all, and with the Item 1 > Item 2 > Item 3 sequence that has become conventional--if not very logical for screen reader users.
> 
> Otherwise I wonder if screen reader users might confuse it with the navigation bar. Just a thought.
> 
> Mike
> 
> Jonathan Hung wrote:
>> Hi everyone,
>> 
>> A navigation breadcrumb is typically a sequence of text links implying a hierarchical relationship between breadcrumbs. A logical implementation in HTML would be to use an ordered list, however there are two approaches to doing this:
>> 
>> 1. A flat ordered list.
>> 2. A nested ordered list.
>> 
>> Example: Item 1 > Item 2 > Item 3
>> 
>> Approach 1 - Flat List: <ol><li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ol>
>> Approach 2 - Nested List: <ol><li>Item 1</li> <li><ol><li>Item 2</li> <li><ol><li>Item 3</li></ol></li></ol></li></ol>
>> 
>> 
>> Question 1: Which of these approaches would be preferred with respect to accessible navigation? The nested list approach carries more relational information, but may be unnecessary.  Seems to me that Approach 2 is better suited for a menu system and not necessarily for flat navigation.
>> 
>> Question 2: Is there an alternative implementation that should be considered?
>> 
>> Thanks!
>> 
>> - Jonathan.
>> 
>> ---
>> Jonathan Hung / jhung.utoronto at gmail.com <mailto:jhung.utoronto at gmail.com>
>> Fluid Project - ATRC at University of Toronto
>> Tel: (416) 946-3002
>> ------------------------------------------------------------------------
>> 
>> _______________________________________________________
>> fluid-work mailing list - fluid-work at fluidproject.org
>> To unsubscribe, change settings or access archives,
>> see http://fluidproject.org/mailman/listinfo/fluid-work
>>  
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://fluidproject.org/mailman/listinfo/fluid-work

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20100621/24a058c4/attachment.html>


More information about the fluid-work mailing list