Re: [WSG] Breadcrumb as Section Heading H1

[Stephen Stagg]

On 23 Feb 2006, at 11:19, Ian Anderson wrote:

Kevin Futter wrote:

Anyway, for the benefit of others interested in this thread/topic,  
the
upshot from the above link seems to be that the pipe character (|)  
is the
best compromise currently available as a screen reader-friendly  
element
separator.

I profoundly disagree with that. The vertical bar is the worst  
thing you can use in a breadcrumb trail, regardless of how it reads  
in a screen reader. This is conventionally used on the web as a  
separator for sibling links, and it really doesn't work as a  
breadcrumb separator for sighted users.

I don't think a list is appropriate markup for breadcrumbs and  
prefer the conventional "You are in: home > products > foo"

I like to implement my bread-crumbs as an UL and then stylistically  
add the 'visual direction' indicator using an image.

For the benefit of Screen-readers and textmode browsers, I add a LI  
with the text 'breadcrumb' at the top of the list which is then  
hidden using CSS.  It's not a perfect solution but it works.

<ul>
  <li class="first">Breadcrumb: </>
  <li><a>Menu Item 1</></>
  <li><a>Menu Item 2</></>
  <li><a>Menu Item 3</></>
</>

ul li{
background:url(directional sliding doors graphic);
}

ul li.first{
background:url(terminating graphic);
text-indent:9000;
overflow:hidden.
}

you can see it at work at:

http://www.minimology.co.uk/gallery/www/

******************************************************
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************