面包屑：缩写但仍可访问

Question

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

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

您如何处理此处的辅助功能问题？

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

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

我们可以通过以下几种方式实现这一目标：

1. 使用display：none但这会隐藏所有用户的隐藏内容，包括屏幕阅读器

2. 我们可以使用class.sr-only（因为我们正在使用Bootstrap）或类似的隐藏链接，所以只有拥有屏幕阅读器的用户才会看到痕迹的隐藏部分。这将有效，但它将从Tab键顺序中删除隐藏的部分面包屑。

3. 我们可以坚持上面的＃2并将taborder =“0”添加到痕迹路径中的那些隐藏链接，但是我们还必须将taborder =“0”添加到整个站点上的每个interktive元素，这不是一个选择。 :-)

是否还有其他方法可以在标签顺序中包含隐藏链接？

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

Answer 1

  

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

这完全是主题。

盲人是喜欢简单事物的普通人。如果您认为您的面包屑太长，请给它们相同的功能：

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

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

如果您在标签和语音顺序中包含隐藏的链接，则表明您确定无法访问您的网站。

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

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

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