我应该为面包屑列表使用 ARIA 目录角色吗？

Question

我正在尝试为 breadcrumbs 组件添加可访问性，该组件基于 <ul> 元素。我一直在研究 ARIA 角色，我偶然发现了 directory role，这似乎很合适。但是，我无法确定它是否真的适合我的面包屑组件，以及我的组件是否根据角色的描述实现了所需的任何内容。下面提供了我的面包屑列表样式和结构的演示：

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>

Answer 1

breacrumbs 微格式使用角色 navigation，这似乎更合适： http://microformats.org/wiki/breadcrumbs-formats

另请阅读以下问题：Proper ARIA handling of breadcrumb navigation

Answer 2

简短回答：否。您应该改用 navigation 角色。

长答案

如果您使用 <nav> HTML5 元素，将自动推断出 navigation 角色。

<nav></nav>

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

一个fully accessible breadcrumb component可以实现如下：

<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>

一些注意事项：

使用 <nav> 自动使用 navigation 地标（您的问题）。
使用 aria-label 为 <nav> 提供一个有意义的名称（很可能，页面上有更多 <nav> 元素，您应该相应地标记每个元素）
使用 <ol> 使链接集结构化为层次结构。这也有助于筛选 reader 用户了解 "nested" 您的页面的情况，因为它将宣布为 "breadcrumbs, navigation (next) list, 3 items"
在列表的最后一页上使用 aria-current="location" 或 aria-current="page" 将其标记为当前页。
（可选）如果在 HTML 中实现了面包屑分隔符，请确保将其隐藏在使用 aria-hidden="true".

我应该为面包屑列表使用 ARIA 目录角色吗？

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

html

css

accessibility

wai-aria

长答案