18

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

<ul class="breadcrumbs" aria-label="breadcrumb navigation" role="navigation">
    <li><a href="~/">Home</a></li>
    <li><a href="~/news">News</a></li>
    <li class="unavailable"><a href="#">@Model.Title</a></li>
</ul>

Given in this example Home is the site root, News is the first child, and the unavailable class is the current item the /news/article item.

Is there anything that could be done to improve this such as using rel attributes or aria-level attributes?

Volker E.
  • 5,911
  • 11
  • 47
  • 64
Chris Marisic
  • 32,487
  • 24
  • 164
  • 258
  • What are `level` attributes? – Volker E. Aug 22 '14 at 20:01
  • @VolkerE. see Craig's answer below and the usage of `aria-level` – Chris Marisic Aug 22 '14 at 20:45
  • Alright, so its the `aria-level` attributes http://www.w3.org/TR/wai-aria/states_and_properties and the HTML `rel` attributes http://www.w3.org/TR/html5/links.html#linkTypes – Volker E. Aug 22 '14 at 21:03
  • I'm wondering if an unordered list is semantically best?! If you're following a tree-like structure. There is an order in the breadcrumb. Another point, it might help to add something for screen readers like 'You are here:' before the tree list. – Volker E. Aug 23 '14 at 02:01

4 Answers4

18

I would avoid the use of aria-level and use a <ol> element instead. It is best to avoid using aria attributes wherever a native alternative exists. Using aria adds an extra layer of complexity. Simple HTML is far better and already has semantics that are surfaced to AT. This is the first rule of ARIA.

Borrowing from the WAI-ARIA-Practices document, breadcrumbs would look like something like this:

<nav aria-label="Breadcrumb" class="breadcrumb">
    <ol>
      <li>
        <a href="../../">
          WAI-ARIA Authoring Practices 1.1
        </a>
      </li>
      <li>
        <a href="../../#aria_ex">
          Design Patterns
        </a>
      </li>
      <li>
        <a href="../../#breadcrumb">
          Breadcrumb Pattern
        </a>
      </li>
      <li>
        <a href="./index.html" aria-current="page">
          Breadcrumb Example
        </a>
      </li>
    </ol>
</nav>

Some notes:

  1. Wrapping the breadcrumbs in a <nav> element lets screen reader users quickly find and jump to the breadcrumbs.
  2. Using <ol> element surfaces an order to screen reader users.
  3. The <ol> should be a child of the <nav>. Some implementations apply role="nav" to the <ol> itself. This is wrong and will override the default <ol> semantics.
  4. aria-current informs screen reader users that this is the current page. If the last breadcrumb for the current page is not a link, the aria-current attribute is optional.
user729928
  • 703
  • 4
  • 8
  • Can't argue with this being the absolute official answer as of CURRENT_YEAR. – Chris Marisic Mar 06 '18 at 16:34
  • This is the best solution to this question. One thing to not forget though is how to style the separators and make sure they are not announced by screen reader users. You can see the [full example of the breadcrumbs pattern](https://www.aditus.io/patterns/breadcrumbs/). – lucalanca Dec 10 '19 at 11:45
9

Going from using a screen reader and reading this blog post, the rel attributes won't make a difference to A.T. As for using aria-level, it works if you put it on the anchor tags. I'd also advise wrapping the list in a nav element, for semantic purposes and to save the need of putting a navigation role on the list when you don't need to.

I wound up with this markup for what I think is a not-too-bad breadcrumb. Hide the bullets using CSS (I didn't stop to do that I'm afraid) and I'd say its good. 

<nav aria-label="breadcrumb" role="navigation">
  <ul>
    <li><a href="#" aria-level="1">Home</a></li>
    <li><a href="#" aria-level="2">News</a></li>
  </ul>
</nav>

Hope this helps!

Luca
  • 9,259
  • 5
  • 46
  • 59
Craig Brett
  • 2,295
  • 1
  • 22
  • 27
  • Thanks for your feedback Craig. I hadn't thought about wrapping the `ul` in a `nav`. I had thought level was relevant but wasn't sure where it went exactly. According to http://stackoverflow.com/questions/14180785/html5-nav-element-vs-role-navigation this seems to suggest always using ` – Chris Marisic Aug 15 '14 at 13:24
  • Thanks for pointing that one out. Ok, that was quite an interesting read. I'll amend my answer to do that, as it would cover all bases. Not sure if its overkill or not, but it makes no difference, at least to NVDA in Firefox. – Craig Brett Aug 15 '14 at 13:38
  • Do you have any ideas what should be done for the last link that's the current page? Should it be hidden from readers? Should it have an aria-level at all? – Chris Marisic Aug 15 '14 at 17:35
  • 1
    Hmmm, I don't know if there's any concrete answer to this. By convention, I guess most users of A.T would be used to it not being a link at all and just being plaintext. Or, another answer would be to put aria-disabled="true" on the anchor so they know its not clickable. I think either would be explanatory enough. – Craig Brett Aug 17 '14 at 10:24
  • 2
    W3C Validator says that the elements with `aria-level` are missing a `role` attribute. – Volker E. Nov 25 '14 at 02:33
  • What role would you suggest for these links? I'd question whether its needed or not. – Craig Brett Dec 02 '14 at 09:23
  • just to add to the topic: http://www.w3.org/TR/wai-aria/states_and_properties#aria-level the `aria-level` attribute can be used on a item with role `listitem` - its place is on the `li`, not the `a` tag – Luca Nov 09 '15 at 11:20
  • After editing the question according to my comment, I've rolled back to the previous version based on the fact that the answer is based on the statement "As for using aria-level, it works if you put it on the anchor tags" – Luca Nov 09 '15 at 11:25
4

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:

<nav aria-labelledby="bc-title" role="navigation">
    <h6 id="bc-title" class="vis-off">You are here:</h6>
    <a href="~/" aria-labelledby="bc-level-1">
        <span id="bc-level-1" class="vis-off">Homepage Website-Title </span>Home
    </a>
    <a href="~/news" aria-labelledby="bc-level-2">
        <span id="bc-level-2" class="vis-off">Level 2: News </span>News
    </a>
    <a href="#" aria-disabled="true">@Model.Title</a>
</nav>

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 <ul> or aria-level is gone.
I'd so or so go for an <ol> 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.

Volker E.
  • 5,911
  • 11
  • 47
  • 64
  • Dear anonymous down-voter. Please give me some feedback! I've tested that solution in ChromeVox extension for Chrome http://www.chromevox.com/ And that worked fine for me! – Volker E. Dec 13 '14 at 14:59
  • 1
    Thanks for this answer. I came across another source that said to use `aria-label="You are here:"` instead of `aria-labelledby` ([here](http://www.w3.org/WAI/tutorials/menus/multiple-ways/)). Does your approach have an advantage over this? – Jordan Running Sep 21 '15 at 15:19
  • 2
    @Jordan In my proposed solution I'm also taking care of HTML5 outlines http://www.w3.org/TR/html5/sections.html#headings-and-sections -- which says every `section`, in this case ` – Volker E. Sep 22 '15 at 18:54
  • Thanks for the clarification! – Jordan Running Sep 23 '15 at 00:14
  • I find the headings too verbose for something that isn't actually a heading on a page when I come across them on the web. But that's an opinion thing. I'm not keen on having to explicitly put labels in when it's not needed and letting the AT use its own implementation when possible, as there is variation. Are you saying the only way to do this is to hide described by labels and put them on the links? – Craig Brett Feb 04 '16 at 11:08
  • @Volker E: I had to implement a breadcrumb today hense why I came back to this question. I thought I'd try your approach and it comes out a little weird when you read it with a screen reader: "Level 1: HomeHome". A possible improvement here might be to only have the levels in that hidden span. – Craig Brett Feb 04 '16 at 11:51
  • 1
    @VolkerE. ended up back here a year+ later, i'd recommend removing the h6 tag and using something else. Since breadcrumbs are at the top of the page, using an h6 there means the usage of headers are no longer compliant. Apparently the way this works in the top to bottom source ordering, header tags are not supposed to be duplicated and should always be descending. h1 h2 h3 h2 h3 invalid h1 h2 h3 h4 h5 valid. – Chris Marisic Apr 21 '16 at 20:15
4

You can use like below

<nav role="navigation"  aria-label="breadcrumbs">
    <p id="breadcrumblabel">You are here:</p>
    <ol id="breadcrumb" aria-labelledby="breadcrumblabel">
        <li><a href="index.html" title="Home">Home</a></li>
        <li><a href="products.html" title="Menu1">Menu1</a></li>
        <li><a href="shoes.html" title="Menu2">Menu2</a></li>
    </ol>
</nav>
Hello Universe
  • 3,248
  • 7
  • 50
  • 86
  • 1
    You do not need to apply a role attribute to ` – Ralph David Abernathy Jul 26 '16 at 19:41
  • 3
    @RalphDavidAbernathy, while in an ideal world the role is not needed because it is implied, some browsers don't treat the nav element correctly, so the aria role should be used for clarity. – Derek Henderson Sep 09 '16 at 10:06
  • This is a great solution. But I think the `You are here:` part should be an `

    ` instead, so that the heading is added to the document outline.

     – JAT86 Apr 11 '18 at 15:54