Should I use the ARIA directory role for a breadcrumbs list?

Question

I am trying to add accessibility to a breadcrumbs component, which is based on a <ul> element. I have been researching ARIA roles and I stumbled upon the directory role, which seems like a good fit. However, I cannot figure out if it really is a good fit or not for my breadcrumbs component and if my component implements whatever is required based on the role's description. A demo of my breadcrumbs list styling and structure is provided below:

ul.breadcrumbs {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  list-style: none;
  margin: 10px 8px;
  padding: 0;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
}
ul.breadcrumbs li {
  -webkit-box-flex: 1;
  max-width: 100%;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-basis: 0;
  flex-basis: 0;
  position: relative;
  text-align: center;
  background: #e0e0e0;
  height: 32px;
  line-height: 32px;
  margin-right: 18px;
}
ul.breadcrumbs li:before,
ul.breadcrumbs li:after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border: 0 solid #e0e0e0;
  border-width: 16px 8px;
}
ul.breadcrumbs li:before {
  left: -16px;
  border-left-color: transparent;
}
ul.breadcrumbs li:after {
  left: 100%;
  border-color: transparent;
  border-left-color: #e0e0e0;
}
ul.breadcrumbs li:first-child:before {
  border: 0;
}
ul.breadcrumbs li:last-child {
  margin-right: 0;
}
ul.breadcrumbs li:last-child:after {
  border: 0;
}

<ul class="breadcrumbs">
  <li><a href="#">Root</a>
  </li>
  <li><a href="#">Folder</a>
  </li>
  <li>File</li>
</ul>

score 2 · Accepted Answer · edited May 23 '17 at 12:17

2

The breacrumbs microformat uses the role navigation, which seems more appropriate : http://microformats.org/wiki/breadcrumbs-formats

Read also, the following question: Proper ARIA handling of breadcrumb navigation

edited May 23 '17 at 12:17

Community

1
1

answered Feb 08 '17 at 08:48

Adam

17,838
32
54

I believe `navigation` is a better fit than `directory`, but I did not really pay too much attention to it due to the fact I have `nav` elements in my pages which have the same role. Apparently, I can use labeling to deal with this problem, so I guess `navigation` is the better option after all! – Angelos Chalaris Feb 08 '17 at 14:48

lucalanca · Answer 2 · 2019-12-10T12:21:48.947

Short answer: No. You should use the navigation role instead.

Long answer

If you use the <nav> HTML5 element, the navigation role is automatically inferred.

<nav></nav>

<!-- is equivalent to -->
<div role="navigation"></div>

A fully accessible breadcrumb component can be implemented as follows:

breadcrumbs screenshot

<nav aria-label="breadcrumbs">
  <ol>
    <li>
      <a href="/">
        Home
      </a>
      <span aria-hidden="true">→<span>
    </li>
    <li>
      <a href="/parent">
        Parent
      </a>
      <span aria-hidden="true">→<span>
    </li>
    <li>
      <a
        href="/parent/current"
        aria-current="location"
      >
        Current
      </a>
    </li>
  </ol>
</nav>

Some notes:

Use <nav> to automatically use the navigation landmark (your question).
Use aria-label to provide a meaningful name to the <nav> (most likely, you have more <nav> elements on the page and you should label each one accordingly)
Use <ol> to make the set of links structured as a hierarchy. This also helps screen reader users understand how "nested" your page is as it will be announce as "breadcrumbs, navigation (next) list, 3 items"
Use aria-current="location" or aria-current="page" on the last page of the list to mark it as the current page.
(optional) if the breadcrumbs separator is implemented in HTML, make sure to hide it from screen reader users with aria-hidden="true".

Should I use the ARIA directory role for a breadcrumbs list?

2 Answers2

Long answer