?


/* Adds >> Double >> Arrows >> After >> Each >> Link */
ul.arrows li:after {
content: "020 020 020 0BB 020";
 }

They aren’t, however, semantically organized in a list. I’ve actually decided that exposing them in a single line with separators is perfectly sufficient. I’m sure if anybody disagrees I’ll hear about it…

As far as the nested/single list question, I’d absolutely say single list. Ben’s article talks about the value of semantics in a nested list versus the complexity of the code, and I’d have to say that the subtlety of the semantics to nesting lists doesn’t really seem to present great value.

I firmly believe that they are seriously over-used

Aha! That explains why i couldn’t find them on your site when looking for explanation. I’ll have to take this opportunity the, to say that I would have found them very useful on your site. I, for one, find breadcrumbs invaluable.

I think we’ll go in between and hide both a heading “Document Tree” and an explanation of what the bread crumb is. Then, for visual users, add something like “Your location within the site:”

The only question left is, should the links be presented as nested lists or a single list?

Thanks for your feedback.

For this, you can simply provide a label for the navigational device: “Navigation Trail”, “Breadcrumb Trail,” “Contextual Navigation” — - whatever you believe to be the best label for your context, and you can conceal this from CSS-enabled browsers (if you choose).

On the whole, I have my doubts about the overall value of breadcrumbs on most sites - I firmly believe that they are seriously over-used.

We’ll keep on thinking about this, but there must be a solution which meets all categories!

Hate to say this, but there might not be. This is the eternal problem with accessibility: sometimes, there isn’t a solution which is best for everybody. Instead, you end up needing to implement multiple solutions. You’ve really got a 5th category which should be in that list, as well - cognitive disabilities. This is where you may find yourself needing very clear explanatory language about what the breadcrumb navigation is, OR you may need to eliminate excess language in order to provide symbols which represent it. Depends on the audience.

There’s almost always a trade-off of some sort.

So, unless i’m wrong, we have a serious trade off between:

1. Visually able users.
2. Visually able users without images.
3. Visually able users without css.
4. Visually disabled users with screen readers

We’ll keep on thinking about this, but there must be a solution which meets all categories!

If you set up your breadcrumb trail using a semantically separated element (such as a list, ordered or unordered), then the links are effectively separated from a screen reader perspective. You can then use background images on the links to give the visual appearance of a double chevron being used as a separator, without forcing these to be listened to by the screen reader user.

In this case, you can potentially run into difficulties for users with images disabled, however: since the links may not have any clear visual separators other than the images. So, you need to consider using some additional separating characteristic, as well. One option is to actually use an image with a background color to match the overall background, then set a different background color on the link itself, behind the image. With images disabled, the links will be separated by this differentiation in color. It’s not a very strong choice, since it gives no sense of path, but at least it’s something.

“Do not add non-link, printable characters (surrounded by spaces or not) between adjacent links unless the semantics of the document naturally would include such characters.”

Whilst i can understand how annoying it might/must be to hear a screen-reader say, “Home double-chevron Level 1 double chevron etc.”, what better way is there of doing breadcrumbs bearing in mind that a left-to-right double chevron is considered to be the most usable way of identifying the road between the current page and the home page?