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

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

Received on Sunday, 21 July 2013 19:48:42 UTC