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

Not sure why my e-mail isn't archived (I allowed it), so pardon me if this
ends up twice.
Feel free to delete it if necessary!

-------------------
Original reply
-------------------

If I may pitch in on this:

1. If a breadcrumbs navigation is marked up as a list (which doesn't seem
semantically too sound), then shouldn't they be in an ordered list at the
very least? I'd like to think there's a structure to a breadcrumbs
navigation (main parent -> child -> child -> etc), so that would make
sense. The only issue is that if you really want to express the hierarchy,
then technically you would need to make nested lists for each child, which
produces a lot of code and isn't the nicest.

2. I would not see a reason to use hr's in this, they're a paragraph level
thematic breaks. There's no need for it in this context and I feel it's a
visual separator if anything (which belongs in CSS).

3. If we separate the data from the visuals, then we need to present an
ordered way of displaying related links (regardless of which symbol is used
to display the hierarchy).

One of the techniques I use myself, is to provide assistive text that's
available to screen readers and hidden for regular browsers (I use the
"visuallyhidden" class from HTML5boilerplate for this).
An example could be:

<nav>
  <p>
    <span class="visuallyhidden">You are viewing: </span>
    <a href="/shoes/">Shoes</a><span class="visuallyhidden">: </span>
    <a href="/shoes/men/">Men</a><span class="visuallyhidden">: </span>
    <a href="/shoes/men/casual/">Casual</a>
  </p>
</nav>

I'm not sure if a colon is the most appropriate symbol to use, maybe
someone can pitch in on that.

To illustrate my point about the lists (without the assistive mark-up just
for illustration):
<nav>
  <ol>
    <li><a href="/shoes/">Shoes</a></li>
    <ol>
      <li><a href="/shoes/men/">Men</a></li>
      <ol>
        <li><a href="/shoes/men/casual/">Casual</a></li>
      </ol>
    </ol>
  </ol>
</nav>

Which would produce something like:
1. Shoes
  1.1 Men
    1.1.1 Casual

Instead of (with un-nested ul):
- Shoes
- Men
- Casual


On 20 July 2013 23:16, jason@accessibleculture.org <
jason@accessibleculture.org> wrote:

> 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
>
>
>
>