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

我正在尝试向基于

元素的面包屑组件添加可访问性。我一直在研究咏叹调的角色，我偶然发现了一个很适合的角色。但是，我无法确定它是否真的适合我的breadcrumbs组件，以及我的组件是否根据角色的描述实现了所需的内容。下面提供了我的面包屑列表样式和结构的演示：

ul.面包屑{
显示：-网络工具包盒；
显示：-webkit flex；
显示器：flex；
列表样式：无；
利润率：10px 8px；
填充：0；
边界半径：4px；
盒影：0 1px 3px rgba（0,0,0,0.1），0 1px 2px rgba（0,0,0,0.15）；
}
面包屑李{
-webkit-box-flex:1；
最大宽度：100%；
-webkit-flex-grow:1；
柔性生长：1；
-webkit弹性基础：0；
弹性基准：0；
位置：相对位置；
文本对齐：居中；
背景：#e0；
高度：32px；
线高：32px；
右边距：18px；
}
面包屑李：以前，
面包屑李：之后{
内容：“；
位置：绝对位置；
排名：0；
宽度：0；
身高：0；
边框：0实心#E0；
边框宽度：16px 8px；
}
面包屑李：以前{
左-16px；
左边框颜色：透明；
}
面包屑李：之后{
左：100%；
边框颜色：透明；
左边框颜色：#E0；
}
李：第一个孩子：以前{
边界：0；
}
面包屑李：最后一个孩子{
右边距：0；
}
面包屑李：最后一个孩子：之后{
边界：0；
}

文件

面包屑

微格式使用角色
导航
，这似乎更合适：

请阅读以下问题：
简短回答：否。您应该使用
导航
角色

长话短说
如果使用
HTML5元素，则会自动推断
导航
角色



A可以按如下方式实现：

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




→


→




一些注意事项：


使用
自动使用
导航
地标（您的问题）
使用
aria-label
为
提供一个有意义的名称（很可能，页面上有更多
元素，您应该相应地标记每个元素）
使用
将链接集结构化为层次结构。这也有助于屏幕阅读器用户了解您的页面是如何“嵌套”的，因为它将被宣布为“面包屑、导航（下一个）列表，3项”
使用列表最后一页上的
aria current=“location”
或
aria current=“page”
将其标记为当前页面
（可选）如果面包屑分隔符是在HTML中实现的，请确保使用
aria hidden=“true”
对屏幕阅读器用户隐藏它
我相信
导航
比
目录
更合适，但我并没有太注意它，因为我的页面中有
导航
元素，它们具有相同的角色。显然，我可以使用标签来处理这个问题，所以我想
导航
毕竟是更好的选择！