面包屑：缩写但仍可访问答案

【问题标题】：Breadcrumbs: Abbreviated but still accessible面包屑：缩写但仍可访问
【发布时间】：2017-11-16 14:41:28
【问题描述】：

上面是典型的面包屑。有时面包屑中的步骤很多，所以我们必须通过替换中间的一些步骤来缩短它并显示三个点

当用户点击三个点时，整个面包屑都是可见的。

您将如何处理这里的可访问性问题？

我们希望向我们的屏幕阅读器用户展示所有步骤，以便这些用户可以通过标签浏览整个面包屑导航，了解这些点。

所有其他用户将只能看到这些树点。

我们可以通过以下几种方式来实现：

使用 display:none 但这会隐藏所有用户的隐藏内容，包括屏幕阅读器
我们可以在这些隐藏链接上使用 class.sr-only（因为我们使用的是 Bootstrap）或类似的东西，因此只有具有屏幕阅读器的用户才能查看面包屑的隐藏部分。这将起作用，但它会从标签顺序中删除隐藏的部分面包屑。
我们可以坚持上面的 #2 并将 taborder="0" 添加到面包屑中的那些隐藏链接，但是我们还必须将 taborder="0" 添加到整个站点上的每个交互元素，并且这不是一个选择。 :-)

还有其他方法可以在 Tab 键顺序中包含隐藏链接吗？

（当然，人们可以讨论缩写面包屑的用户体验方面，但这可能是另一个话题。）

【问题讨论】：

我投票决定将此问题作为离题结束，因为在 SO 上，您应该尝试自己编写代码。在 doing more research 之后，如果您遇到问题，您可以发布您尝试过的内容，并清楚地解释什么不起作用并提供一个 Minimal, Complete, and Verifiable example.
好的，帖子已经更新了。

【解决方案1】：

（当然，人们可以讨论将面包屑缩写为另一个主题的用户体验方面。）

这就是主题。

盲人是喜欢简单事物的正常人。如果你认为你的面包屑太长，给他们同样的功能：

 <button aria-label="view full breadcrumb">...</button>

面包屑并不是为盲人发明的。它们是WCAG AAA guideline 中的一种技术的一部分，这意味着：这不是强制性的，它关系到每个人。

如果您在选项卡和语音顺序中包含隐藏链接，则可以确定您的网站将无法访问。

使用屏幕阅读器来支持眼睛的近盲人将无法在屏幕阅读器宣布链接时查看屏幕上的链接。

使用仅键盘系统的人将聚焦一个不可见的链接，这将消除聚焦顺序的可预测性。

请注意，对于 2/ 和 3/，sr-only 不会从 tabindex 中删除元素，因此这将按您的预期工作

【讨论】：