屏幕阅读器隐藏元素

问题

如何创建一个 CSS 类，使元素在视觉上隐藏，但屏幕阅读器仍能读取？

解答

这是一个常见的无障碍（a11y）需求。常规的 display: none 或 visibility: hidden 会同时对屏幕阅读器隐藏内容，我们需要一种特殊的隐藏方式。

标准实现

.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;
}

使用示例

<!-- 图标按钮添加屏幕阅读器文本 -->
<button>
  <svg aria-hidden="true"><!-- 关闭图标 --></svg>
  <span class="wem5t">关闭菜单</span>
</button>

<!-- 跳转链接 -->
<a href="#main-content" class="wem5t">跳转到主要内容</a>

<!-- 表单标签 -->
<label for="search" class="wem5t">搜索</label>
<input type="search" id="search" placeholder="搜索...">

各属性的作用

.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;
}

可聚焦元素的变体

如果隐藏的是可聚焦元素（如跳转链接），聚焦时应该显示：

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

不要使用的方式

/* ❌ 屏幕阅读器也会忽略 */
.hidden {
  display: none;
}

/* ❌ 屏幕阅读器也会忽略 */
.invisible {
  visibility: hidden;
}

/* ❌ 可能导致布局问题 */
.off-screen {
  position: absolute;
  left: -9999px;
}

关键点

• display: none 和 visibility: hidden 会同时对屏幕阅读器隐藏
• 使用 clip + 1px 尺寸的组合实现视觉隐藏但保持可访问
• margin: -1px 消除 1px 尺寸可能产生的影响
• 跳转链接等可聚焦元素需要在获得焦点时显示
• 这个类在 Bootstrap（.visually-hidden）和 Tailwind（.sr-only）中都有内置实现