面包屑：缩写但仍可访问
Breadcrumbs: Abbreviated but still accessible
上面是一个典型的面包屑。
有时那个面包屑中有很多步骤，所以我们必须通过替换中间的一些步骤来缩短它并显示三个点来代替
当用户点击三个点时，整个面包屑都可见。
您将如何处理这里的辅助功能问题？
我们想向我们的屏幕 reader 用户显示所有步骤，这样这些用户就可以在知道这些点的整个面包屑空白区域中使用 tab 键。
所有其他用户将只能看到那些树点。
我们可以通过以下几种方式实现这一点：
使用display:none但这会隐藏所有用户的隐藏内容，包括屏幕readers
我们可以使用 class.sr-only（因为我们使用的是 Bootstrap）或类似的隐藏链接，所以只有屏幕 reader 的用户我们将看到面包屑的隐藏部分。这会起作用，但它会从选项卡顺序中删除隐藏的部分面包屑。
我们可以坚持上面的#2，将 taborder="0" 添加到面包屑中的那些隐藏链接，但是我们还必须将 taborder="0" 添加到整个站点，这不是一个选项。 :-)
是否有任何其他方法可以将隐藏链接包含在 Tab 键顺序中？
（当然，可以讨论缩写面包屑的用户体验方面，但这可能是另一个话题。）
(Sure, one can discuss the UX aspect of abbreviating a breadcrumb another topic.)
这正是主题。
盲人是喜欢简单事物的正常人。如果你觉得你的面包屑太长，给他们同样的功能:
<button aria-label="view full breadcrumb">...</button>
面包屑导航并不是为盲人发明的。它们是 WCAG AAA guideline 中一项技术的一部分，这意味着：它不是强制性的，它涉及到每个人。
如果您在选项卡和语音顺序中包含隐藏的 link，您确定您的网站将无法访问。
使用屏幕阅读器辅助眼睛的近盲人在屏幕阅读器播报时将无法在屏幕上看到 link。
使用纯键盘系统的人会聚焦一个不可见的 link，这将消除聚焦顺序的可预测性。
请注意，对于 2/ 和 3/，sr-only 不会从 tabindex 中删除元素，因此这将按您预期的方式工作
上面是一个典型的面包屑。 有时那个面包屑中有很多步骤，所以我们必须通过替换中间的一些步骤来缩短它并显示三个点来代替
当用户点击三个点时，整个面包屑都可见。
您将如何处理这里的辅助功能问题？
我们想向我们的屏幕 reader 用户显示所有步骤，这样这些用户就可以在知道这些点的整个面包屑空白区域中使用 tab 键。
所有其他用户将只能看到那些树点。
我们可以通过以下几种方式实现这一点：
使用display:none但这会隐藏所有用户的隐藏内容，包括屏幕readers
我们可以使用 class.sr-only（因为我们使用的是 Bootstrap）或类似的隐藏链接，所以只有屏幕 reader 的用户我们将看到面包屑的隐藏部分。这会起作用，但它会从选项卡顺序中删除隐藏的部分面包屑。
我们可以坚持上面的#2，将 taborder="0" 添加到面包屑中的那些隐藏链接，但是我们还必须将 taborder="0" 添加到整个站点，这不是一个选项。 :-)
是否有任何其他方法可以将隐藏链接包含在 Tab 键顺序中？
（当然，可以讨论缩写面包屑的用户体验方面，但这可能是另一个话题。）
(Sure, one can discuss the UX aspect of abbreviating a breadcrumb another topic.)
这正是主题。
盲人是喜欢简单事物的正常人。如果你觉得你的面包屑太长，给他们同样的功能:
<button aria-label="view full breadcrumb">...</button>
面包屑导航并不是为盲人发明的。它们是 WCAG AAA guideline 中一项技术的一部分，这意味着：它不是强制性的，它涉及到每个人。
如果您在选项卡和语音顺序中包含隐藏的 link，您确定您的网站将无法访问。
使用屏幕阅读器辅助眼睛的近盲人在屏幕阅读器播报时将无法在屏幕上看到 link。
使用纯键盘系统的人会聚焦一个不可见的 link，这将消除聚焦顺序的可预测性。
请注意，对于 2/ 和 3/，sr-only 不会从 tabindex 中删除元素，因此这将按您预期的方式工作