What can be done to improve the accessibility of a breadcrumb menu similar to:
When searching the Web for a thorough solution on accessible breadcrumbs, @Craig Brett's solution seemed good at first sight. But after reading several sources, aria-level
seems to be misused there (besides a W3C Validation problem, see my comment above).
Therefor I like to propose this approach:
In this solution we have an HTML5 sectioning element (nav
), which should have a heading, and *tada* there it is. Class vis-off
signifies an element that is just available to screen readers. With aria-labelledby
I'm telling the screen reader to read that headline.
In contrast to Chris' solution, either the
or aria-level
is gone.
I'd so or so go for an
if necessary, because the items are in order. Better leaving it out, otherwise it gets very verbose in many screen readers on every page ("List item 1…").
aria-level seems to be misused in the solution above in my understanding. It must be child of a role attribute like f.e. role="list" and that role just signifies not structurally marked-up non-interactive lists.
Maybe a role treeitem
might be more appropriate. IMHO it's overkill.
PS: I'm not using BEM notation here to shorten the ids and classes for readability.