Proper ARIA navigation processing for breadcrumbs

Question

What can be done to improve the accessibility of a palette 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> 

In this example, Home is the root of the site, News is the first child, and the inaccessible class is the current item / news / article item.

Is there something that could be done to improve this, for example using the rel or aria-level attributes?

Answer 1

I would avoid using aria-level and use the <ol> element instead. It is better to avoid using the attributes of an aria wherever there is a native alternative. Using aria adds an extra level of difficulty. Simple HTML is much better and already has semantics that pop up on AT. This is the first ARIA rule .

Adapting from WAI-ARIA-Practices , breadcrumbs would look 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:

• The flow around the breadcrumbs in the <nav> element allows users of the on-screen reader to quickly find and jump on breadcrumbs.
• Using the <ol> element allows you to organize the user to read from the screen.
• <ol> must be a child of <nav> . Some implementations apply role="nav" to the <ol> . This is incorrect and will override the default <ol> semantics.
• aria-current informs users from the screen that this is the current page. If the last summary for the current page is not a link, the aria-current attribute is optional.

Answer 2

Based on using the screen reader and reading this blog post , the rel attributes won't have anything to do with AT. As for using aria-level , it works if you put it in anchor tags. I also advise wrapping the list in the nav element for semantic purposes and keep the need to place the role in the list when you don't need it.

I got this markup because, in my opinion, this is not too bad bread. Hide the bullets with CSS (I didn’t stop doing it, I'm afraid), and I would say that it’s 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!

Answer 3

When searching the Internet for a thorough solution on available breadcrumbs, @Craig Brett's solution seemed good at first glance. But after reading several sources, aria-level seems to be misused (besides the W3C validation problem, see my comment above).
Therefore, I like to suggest 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 sequence element ( nav ), which should have a title, and * tada *. The vis-off class means an item that is read-only from the screen. With aria-labelledby I tell the screen reader to read this headline.

Unlike Chris’s decision, either <ul> or aria-level gone.
I would somehow go to <ol> if necessary, because the elements are fine. It is better to leave it, otherwise it will be very verbose in many screen readers on each page ("List item 1 ...").

aria-level seems to be misused in the solution above in my understanding. It must be a child of a role attribute, for example fe role="list" , and this role simply means unstructured non-interactive lists.
Perhaps the role of treeitem might be more appropriate. IMHO this is overkill.

PS: I do not use the BEM notation here to shorten identifiers and classes for readability.

Answer 4

You can use as 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>