如何对屏幕阅读器隐藏「展开更多」按钮且保留其对明眼用户的可聚焦性

核心思路 #

将内容拆分为两个独立模块，分别适配屏幕阅读器和普通视觉用户，从根源避免可聚焦元素加aria-hidden的规范冲突。 #

具体实现步骤 #

1. 实现仅屏幕阅读器可见的样式类 #

首先定义通用的.sr-only样式，该类会让元素在视觉上完全隐藏，但不会被屏幕阅读器忽略：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

2. 编写DOM结构 #

<!-- 仅对屏幕阅读器开放的完整文本，普通用户不可见 -->
<p class="sr-only">此处放入横幅的完整文本内容，屏幕阅读器会直接朗读全部内容</p>

<!-- 对普通视觉用户开放的内容块，整体对屏幕阅读器隐藏 -->
<div aria-hidden="true">
  <p class="truncated">此处放入截断后的横幅文本...</p>
  <button id="expandBtn">展开更多</button>
</div>

3. 实现普通用户侧的展开交互 #

按照原有逻辑编写「展开更多」按钮的点击事件即可，比如移除截断样式、切换显示完整文本等，该块整体已对屏幕阅读器隐藏，所有交互都不会影响辅助设备的内容读取。 #

方案优势 #

• 完全符合WAI-ARIA规范：aria-hidden加在非可聚焦的div容器上，规避了可聚焦元素加该属性的兼容性问题
• 交互逻辑无冲突：按钮依然支持鼠标点击、键盘聚焦操作，普通视觉用户的使用习惯不受影响
• 屏幕阅读器用户体验最优：无需额外操作即可直接获取完整内容，也不会感知到「展开更多」按钮的存在

注意事项 #

确保屏幕阅读器专属的完整文本，和视觉侧展开后的完整文本内容完全一致，避免出现信息不对称的问题。

内容的提问来源于stack exchange，提问作者Brendan