Issue with "Breadcrumb Navigation": various refinements needed

[scottaohara]

MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation

What information was incorrect, unhelpful, or incomplete?

It is probably worth mentioning that the right arrows created by the CSS pseudo-element will be exposed to and announced by screen readers. These 'dividers' are arguably decorative and per their current implementation, result in someone navigating by list items to have to listen to "right arrow" (or similar) prior to the announcement of the text of the list item.

What did you expect to see?

A few things should probably be called out here:

• Mention that pseudo content like this will be exposed by modern browsers to AT.
• Indicate that if one does not wish to have these dividers announced, they could either use decorative images or use pseudo elements to create their own basic shapes (see: https://scottaohara.github.io/a11y_breadcrumbs/)
• If someone still wants to do this, they should use the ::after pseudo selector instead. Then, at least, the divider content is announced after the important content (link) of the list item
• Call out that one could also use CSS content alternative text, but for the fact it's only supported by chromium browsers. Testing with Chrome+VO, adding a / " " to the content declaration resulted in the right arrow being ignored.

Did you test this? If so, how?

Using screen readers (VO, NVDA, JAWS, Narrator).

MDN Content page report details

• Folder: en-us/web/css/layout_cookbook/breadcrumb_navigation
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md
• Last commit: https://github.com/mdn/content/commit/9157a5f692a322498329435c0c6f05bca0296e36
• Document last modified: 2022-01-28T00:41:55.000Z

[schalkneethling]

Thank you for reporting @scottaohara!

[caugner]

This is actually a content issue. The MDN breadcrumbs are fine (just verified with Mac OS integrated VoiceOver), but the recipe on the MDN page advertises using content: "→";, which causes the problem mentioned by Scott.