RE: 4.13.1 Bread crumb navigation - use of right angle brackets

Was prompted by Steve's bug report [1] to jump in late to this thread. 

I agree that the ">" character should be added via CSS, at least as generated content if not as a background image. 

I got different results for VoiceOver than Leif. In my tests VoiceOver does read the ">" character added using <style>nav a:after{content:">"}</style>. I think, though, that the character should be added to the list item and not the link, i.e., <style>nav li:after{content:">"}</style>. In that case, VoiceOver only reads the ">" when reading word by word using the VO commands, VO+left/right arrows, but not when tabbing from link to link because the ">" is not part of the link when added this way.

If the ">" is appended to the list item using CSS, JAWS 14 in Firefox reads the ">" character when using the up/down arrow keys, but not tabbing link to link. JAWS doesn't read the ">" at all in IE.

NVDA 2013.1.1 only reads it in Firefox when reading character by character. That is, it doesn't read the ">" character when using the up/down arrows.

I think <ol> is preferable to <ul>. Even if, as Léonie points out, setting list-style to none effectively erases the difference between the two, the hierarchical relationships between the crumbs is still expressed in the semantics of the markup itself.

I'd be interested to hear folks' opinions on the use of <nav> in this context. I tend not to use a separate <nav> for breadcrumbs as I don't consider them "major navigation blocks", at least not on par with main site navigation or section navigation. I'm also starting to grow a little concerned about landmarkitis. A common scenario is to have a site-wide main navigation, followed by breadcrumbs, and then some kind of section or sidebar navigation. If each of these uses <nav>, then you effectively have three navigation landmarks, which is starting to get cumbersome, IMO, but I'm not an actual screen reader user.

One approach I have used in the past is to include both the main menu and the breadcrumbs within the same <nav> element.

At the same time, if <nav> is used for the breadcrumbs, I do like the idea of aria-label. Of course, aria-label doesn't do much good on a <ul>.

The following works well enough in VoiceOver and JAWS, though not in NVDA:

<div role="group" aria-label="You are here">
   <ul>
      <li><a href="/">Main</a></li>
      <li><a href="/products/">Products</a></li>
      <li><a href="/products/dishwashers/">Dishwashers</a></li>
   </ul>
</div> 

[1] https://www.w3.org/Bugs/Public/show_bug.cgi?id=22739

Jason Kiss
jason@accessibleculture.org
http://www.accessibleculture.org

-----------------
From: Leif Halvard Silli <xn--mlform-iua@xn--mlform-iua.no> 
Date: Sun, 27 Jan 2013 20:53:10 +0100
To: tink@tink.co.uk 
Cc: 'Gez Lemon' <g.lemon@webprofession.com>, public-html@w3.org, steve.faulkner@gmail.com, 'Silvia Pfeiffer' <silviapfeiffer1@gmail.com> 
Message-ID: <20130127205310311067.0fb705d0@xn--mlform-iua.no> 
Léonie Watson, Sun, 27 Jan 2013 16:14:25 -0000:
> " Realistically, the > is just decoration, so should be provided with CSS."
> 
> Agreed. I'd even suggest that there is little to compel anyone to use 
> the > character at all, except perhaps for convention. It's a style 
> choice at this point of course.

I checked that VoiceOver doesn't pronounce e.g. this CSS.
  <style>nav a:after{content:">"}</style>
But have you checked that other screenreaders don't?

> "The examples provided should meet WCAG, so I suggest the following 
> (using an unordered list, but an ordered list would be fine in this
> context):
> 
> <nav aria-label="You are here">
> <ul>
>   <li><a href="/">Main</a></li>
>   <li><a href="/products/">Products</a></li>
>   <li><a href="/products/dishwashers/">Dishwashers</a></li>
>   <li>Second hand</li>
> </ul>
> </nav>"
> 
> Think this is a good example. 

1) Does it not meet the WCAG to do an <a> without @href, like the
   current example? <li><a>Second hand</a></li>
2) The current example is paragraph with links inside. To use a
   list means that one must turn each list into a paragraph - 
   visually, by the use of <style>nav li{display:inline}</style>.
  
   Thus, how about letting each list end with a <hr>, and use 
   that as the link separator? Here is a demo:
   
http://software.hixie.ch/utilities/js/live-dom-viewer/saved/2072


   It can even possible to use generated CSS inside the hr
   hr:before {content:">"}
-- 
leif halvard silli

Received on Sunday, 21 July 2013 03:17:21 UTC