sr-only内链接干扰键盘视觉用户焦点顺序的解决方案咨询

关于.sr-only的适用范围 #

.sr-only不是仅适用于文本，它是一个视觉隐藏样式，可以作用于任何HTML元素，包括链接、按钮等可交互元素。问题出在：Bootstrap 4默认的.sr-only只处理了元素的视觉隐藏，没有处理元素获得焦点时的状态——视觉用户用键盘导航（Tab键）时，会选中这些隐藏的链接，出现“焦点存在但看不到元素”的异常情况。

通用解决方案 #

根据你的需求，有两种可选方案：

方案1：让隐藏链接获得焦点时可见（推荐）

给.sr-only容器内的链接额外添加Bootstrap 4自带的.sr-only-focusable类。这个类的作用是：

• 平时保持视觉隐藏，和.sr-only效果一致
• 当元素通过键盘获得焦点时，自动取消视觉隐藏，让视觉用户能看到当前焦点位置，避免混乱

示例代码：

<div class="sr-only">
  <p>图表描述文本...</p>
  <a href="/link1" class="sr-only-focusable">链接1描述</a>
  <a href="/link2" class="sr-only-focusable">链接2描述</a>
</div>

方案2：移除隐藏链接的焦点可访问性

如果你希望视觉用户完全无法通过键盘访问这些隐藏链接（仅让屏幕阅读器读取），可以给链接添加tabindex="-1"属性，这样键盘导航（Tab键）会跳过这些链接，不会出现异常焦点。

示例代码：

<div class="sr-only">
  <p>图表描述文本...</p>
  <a href="/link1" tabindex="-1">链接1描述</a>
  <a href="/link2" tabindex="-1">链接2描述</a>
</div>

注意：这个方案下，屏幕阅读器用户依然可以通过阅读器的操作激活链接跳转，但视觉用户无法用键盘选中它们，适合你希望视觉交互只通过SVG完成的场景。

内容的提问来源于stack exchange，提问作者eye-wonder