Bring theme_breadcrumb() up to WCAG 2.0 AA

What is there to do?
theme_breadcrumb() does just that, only with < ol > instead of < ul >, which in this case makes sense, IMO.

If this is already applied to D8 than great. WCAG AAA requires navigation elements to be put in a list. Drupal 7 does not output the breadcrumb as a list so I had to override theme_breadcrumb() to do the above.

You are right, it should be <ol> instead of <ul> :

HTML lists - <ul>, <ol>, and <dl> - also convey a hierarchical content structure. Each of these has rules regarding their use as well. Unordered lists should be used when there is no order of sequence or importance. Ordered lists suggest a progression or sequence. Definition lists should be used explicitly for presenting a structure for definitions.

http://webaim.org/techniques/semanticstructure/

On first glance it does not appear that the D7 http://api.drupal.org/api/drupal/includes!theme.inc/function/theme_bread... uses a list.

@mike

yup, you're right. Was too early in the morning. Unless any core theme is overridding this then I'd say closed works as designed.

I've only added the aria-labelledby attribute, as described here: http://www.uvd.co.uk/blog/accessible-breadcrumbs-using-aria/

@BarisW

Thanks for trying this out. Have you tested w/ any screen-readers (NVDA/JAWS/VoiceOver), is the label read when navigating to the ul? I wonder if it is truely necessary, since the heading is directly before the UL in the DOM. Not a lot of screen-reader users navigate by list.

Hi Everett,

I tried with VoiceOver and there is a difference.

Without the patch you hear 'Heading level 2, You are here' followed by 'List, 3 items'.
With the patch you hear 'Heading level 2, You are here' followed by 'List, You are here, 3 items'.

I haven't test the other screen-readers though.

Thanks for testing. I wonder if this is what we want to have happen.

If we do this, we should apply it consistently to lists preceeded by headings. Perhaps it would be a good idea to close this issue, and to open a more generic issue to encourage a discussion around this concept and to make sure that it is consistently applied in Core.

Marked #1815356: Breadcrumb separator is a non-standard entity and not recognized by screen-readers as duplicate.

Quoting myself from over there:

I don't quite understand why the ordered list is not sufficient?

If the » character is not read/understood by screen-readers, only the OL remains, which has a leading heading of "You are here:" — 1. Home - 2. Foo - 3. Bar... would be helpful to understand what's wrong with that?

If possible, then I'd rather remove the » separator entirely from the HTML markup and output it via CSS instead:

.breadcrumb li:not(:last-child):after {
  content: ' » ';
}

Regarding the aria-labelledby and injecting HTML IDs everywhere, that's an absolute no-go.

Instead, aria-label suggests that we should be able to drop the entire heading (which is only output for screen-readers), and instead provide the label directly for the OL:

<ol aria-label="You are here">
<li><a href="/">Home</a></li>
<li>...</li>
</ol>

Objections? :)

The patch works fine. Great idea to use the aria-label attribute.

A great thing about this solution is that it solves the problem with breadcrumbs placed above the page title and introducing an error on the heading order (H2 placed above a H1).

However, when I tried the output of VoiceOver, the heading was not read out anymore (instead of the H2). Not sure if this is just bad configuration of my VoiceOver, maybe Everett can answer if this is correct?

re #17: The problem with that is that "Breadcrumb trail" is not really a term that exists. Only web designers/developers are able to understand what it means. It's not really translatable either — most often it's replaced with the synonymous term "hierarchy". (Though to not leave you with wrong facts, "breadcrumb" is translatable and a known dictionary word, but means... well, something completely different to innocent humans. It's like pointing at a car and saying "tomatoes.")

The idea of using "You are here" is I think derived from web sites that actually output a label/heading before the breadcrumb (visible for sighted users).

Sure, I'd also love to move forward here. :) Let's move the label/heading change into a separate issue, good idea.

If you're fine with this patch, then I think we're ready to go. This is the same as #16, just without a bogus extra blank line in the CSS (the new style is added to the existing breadcrumb styles).

- Installed Drupal 8.
- Applied patch #22.
- Enabled screen reader to browse through links on Safari.
- Breadcrumbs are being read properly, without the arrow.
- Checked HTML/CSS to verify the arrows are not being rendered in the HTML, rather they're being rendered via CSS.
- Tested in "Seven" and "Garland" themes.
- Works great! :)

Issue in IE8: breadcrumb separators not showing up

Yeeaaah, I don't think that's gonna fly. :\ It's fine for IE8 to degrade visually, but that basically makes the breadcrumb unusable. :(

Basically, it turns "Administer >> Foo bar >> Baz" to "AdministerFoo barBaz"

Bumping status back down, since a solution needs to be worked out for IE8.

Replaced the CSS solution with an aria role="presentation" solution.

Looks good in Seven, Bartik and Stark in FF16, Chrome 23 (beta), IE8 and IE9.

The simple solution for IE8 is to replace :last-child with :first-child, and to use a separate selector instead of :not.

Looks good to me. Attached screenshots including an ie8 cap. Voiceover in Safari reads the same pre and post patch: "You are here. Home. Forums. General Discussion."

Excellent patch. I do this in every single theme on every single site. Thanks all!

Committed and pushed to 8.x. Thanks!