Proper ARIA handling of breadcrumb navigation

后端 未结 4 959
后悔当初
后悔当初 2021-01-31 20:53

What can be done to improve the accessibility of a breadcrumb menu similar to:

4条回答
  •  情歌与酒
    2021-01-31 21:52

    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.

提交回复
热议问题