---
title: 有哪些不同的方法可以隐藏内容（使其仅对屏幕阅读器可用）？
---

这些技术与可访问性 (a11y) 相关。

## 小/零尺寸

`width: 1px; height: 1px` 并结合使用 CSS clip 使元素在屏幕上几乎不占用任何空间。

不建议使用 `width: 0; height; 0`，因为搜索引擎可能会因此受到惩罚，认为它有恶意意图，例如关键词堆砌。

## 绝对定位

`position: absolute; left: -99999px` 将把元素定位到屏幕之外。但是，根据 [WebAIM 的文章](https://webaim.org/techniques/css/invisiblecontent/)：

> 可导航元素（例如链接和表单控件）不应隐藏在屏幕外。有视觉的用户仍然可以使用键盘导航它们，但除非对它们进行样式设置以使其在接收到键盘焦点时可见，否则他们将看不到它们。

仅当您的内容仅包含文本时才使用此方法。

## 文本缩进

`text-indent: -9999px`。这仅适用于 `block` 元素中的文本。与上面的绝对定位技术类似，给定此样式的可聚焦元素仍然可以聚焦，这会给使用键盘导航的视觉用户造成混淆。

## 错误的方法

以下方法是错误的，因为它们会向用户 **和** 屏幕阅读器隐藏内容，如果目的是仅向屏幕阅读器公开内容，则这是不正确的。

* `display: none`
* `visibility: hidden`
* `hidden` 属性

## 实际应用中的技术

理想情况下，建议结合上述方法，以确保它在所有浏览器中都能正常工作。

建议您使用成熟 CSS 框架中的以下方法之一，而不是实现您自己的从渲染树和 a11y 树中删除元素的方法，这些方法已经在许多网站上经过了实战测试。

### Tailwind CSS

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

### Bootstrap CSS

```css
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
```

## 参考资料

* [CSS in Action - Invisible Content Just for Screen Reader Users](https://webaim.org/techniques/css/invisiblecontent/)