长答案

Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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可以实现如下：

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>

一些注意事项：

使用<nav>自动使用navigation界标（您的问题）。
使用aria-label为<nav>提供一个有意义的名称（最有可能的是，页面上有更多<nav>元素，应相应地标记每个元素）
使用<ol>使链接集结构化为层次结构。这也有助于屏幕阅读器用户了解您的页面的嵌套状态，如“面包屑，导航（下一个）列表，3个项目”一样
在列表的最后一页使用aria-current="location"或aria-current="page"将其标记为当前页面。
（可选），如果面包屑分隔符是用HTML实现的，请确保使用aria-hidden="true"对屏幕阅读器用户隐藏它。

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

2 个答案:

长答案