使网页中的内容只对读屏软件可见

在构建无障碍网页时，一个重要的考量是如何为使用读屏软件的视障者提供必要的信息，同时避免这些信息干扰到有视力的健视者。 本文将详细讲解怎样在网页中创建仅供读屏软件访问的内容。

正如文章开头所说，在理想情况下，网页内容应该对所有用户保持一致的可访问性。然而，在某些特定场景下，视觉呈现的信息对于视障者来说可能不够明确，或者需要额外的文本解释才能更好地理解。反之，一些为视障者提供的详细说明对于健视者来说可能是冗余甚至干扰的。 因此，我们需要一种技术，能够选择性地向读屏软件用户呈现信息，而对视觉用户保持隐藏。

哪些场景需要仅供读屏软件访问的内容？

例如，一个只有放大镜图标的搜索按钮，对于健视者来说很容易理解其功能。但对于视障者，读屏软件可能只会读出“按钮”，无法明确其用途。此时，我们可以添加一个仅供读屏软件访问的文本标签，如“搜索”，来增强其语义。

再比如，网页上的面包屑导航，通过视觉上的层级结构和位置，健视者可以轻松理解“首页 > 文章 > 当前页面”的含义。但读屏软件线性读取时，可能无法清晰表达这种层级关系。添加一段仅供读屏软件访问的“当前位于：”前缀，可以帮助视障者理解当前位置。

某些操作提示或状态指示，可能通过颜色或小图标来呈现。为了让视障者也能理解，可以添加隐藏的文本说明，例如用红色表示错误时，添加“错误提示”的文本。

“跳过”链接的优化： “跳到主要内容”或“跳过导航”链接对于使用键盘导航的视障者非常重要。但为了不影响视觉设计，可以将其初始隐藏，只在获得焦点时显示，但仍然确保读屏软件可以访问。

重要提示：谨慎使用仅供读屏软件访问的内容

要记住，许多视障用户并非完全失明，他们可能还有部分视力。 因此，我们应该尽量保持视觉内容和读屏软件读取内容的一致性。

不推荐的隐藏内容技术及其原因

在深入了解推荐的技术之前，先给大家讲一下一些不适合用于创建仅供读屏软件访问内容的方法：

display: none 或 visibility: hidden:

这两种 CSS 属性都会彻底隐藏元素，使其从页面布局中移除，并且不会被读屏软件读取。

它们的目标是完全隐藏元素，不针对特定的用户群体。

绝对不能使用这两种属性来创建仅供读屏软件访问的内容。这种办法会使内容对所有用户都不可见，包括视障者。

hidden 属性:

HTML 的 hidden 属性与 display: none 的效果类似，会隐藏元素并使其不被读屏软件读取。

其功能与 display: none 相同，旨在完全移除元素。此外，老旧浏览器如 IE11 可能不支持该属性。

不应使用 hidden 属性来创建仅供读屏软件访问的内容。

width: 0px, height: 0px 或其他 0 像素尺寸调整技术:

将元素的尺寸设置为 0，使其在视觉上不可见。

大多数读屏软件会忽略尺寸为 0 的元素，认为其不包含有效内容。此外，这种做法可能被搜索引擎视为作弊，引来降权。

及其不推荐使用 0 像素尺寸调整技术来隐藏内容。即使使用 font-size: 0 或 line-height: 0 可能会让读屏软件读取，但元素仍然占据页面空间，且不被推荐。

text-indent: -10000px;:

通过设置一个非常大的负文本缩进，将文本移出屏幕可视区域。

读屏软件通常会读取使用 text-indent 隐藏的文本。

如果隐藏的是链接、表单控件等可聚焦元素，健视者通过键盘导航时会聚焦到看不见的元素，造成困惑。如果指想让这些原本可聚焦的表单控件、链接等只能被读屏光标访问到，不能通过tab键/shift+tab访问到，需要设置元素的 tabindex="-1"。

虽然读屏软件可以读取，但对于包含可交互元素的场景，不推荐使用此方法。

推荐的隐藏内容技术：为视障者提供专属信息

绝对定位内容到屏幕外 (.sr-only 类)

这是最常用且推荐的方法。通过创建一个特定的 CSS 类，我们可以将元素定位到屏幕外，使其对健视者不可见，但仍能被读屏软件读取。

.sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

position: absolute;: 将元素从正常的文档流中移除，使其不影响其他元素的布局。

left: -10000px;: 将元素向左移动 10000 像素，确保在绝大多数屏幕分辨率下都不可见。

top: auto;: 让浏览器自动决定垂直位置，通常会保持元素在其原本的位置。

width: 1px;, height: 1px;: 将元素的宽高设置为 1 像素。这是一种保险措施，即使由于某些原因（例如用户禁用了绝对定位），元素仍然会很小，几乎不可见。

overflow: hidden;: 隐藏超出元素尺寸的内容，进一步确保视觉上的不可见性。

使用方法:

只需将该 CSS 类添加到需要隐藏的 HTML 元素上：

<div class="sr-only">这段文字只会被读屏软件读取。</div>

案例分析:

搜索框的标签:

<input type="text" id="search-input">
<label for="search-input" class="sr-only">搜索</label>
<button aria-label="搜索"></button>

在这个例子中，我们使用 aria-label 为按钮提供了无障碍名称。同时，我们为输入框关联了一个隐藏的 标签，为读屏软件用户明确了输入框的用途。

面包屑导航的提示:

<nav aria-label="面包屑导航">
    <span class="sr-only">目前位置：</span>
    <a href="/">首页</a> &gt;
    <a href="/articles">文章</a> &gt;
    <span>当前页面</span>
</nav>

通过添加隐藏的 "当前位置："，读屏软件用户能更清晰地理解这是一组面包屑导航链接。

CSS clip 和 clip-path

这是一种相对较新的技术，可以裁剪元素，使其只显示一个很小的区域（通常是 1 像素）。与屏幕外定位类似，这种方法也能实现视觉隐藏，同时保持读屏软件的可访问性。

.sr-only-clip {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%); /* 更现代的裁剪方式 */
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

clip: rect(1px, 1px, 1px, 1px);: 定义一个裁剪矩形，只显示元素内部的一个 1x1 像素的区域。

clip-path: inset(50%);: 一种更现代的裁剪方式，从元素的每个边缘向内裁剪 50%，最终也只留下一个极小的区域。

height: 1px;, width: 1px;, margin: -1px;, overflow: hidden;, padding: 0;, position: absolute;: 这些属性是为了增强兼容性和确保隐藏效果。

使用方法:

与 .sr-only 类类似，将该 CSS 类添加到需要隐藏的元素上：

<span class="sr-only-clip">这段文字也只会被读屏软件读取。</span>

案例分析:

clip 和 clip-path 的使用场景与 .sr-only 类似，都可以用于隐藏辅助文本或提示信息。

优化 “跳过” 链接的无障碍体验

为了不影响视觉设计，我们可以初始隐藏“跳过”链接，只在通过键盘聚焦时显示出来，但要确保读屏软件始终可以访问到它。

#skip a {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#skip a:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible; /* 或 auto，取决于具体需求 */
}

<div id="skip"><a href="#main-content">跳到主要内容</a></div>

<main id="main-content">
    <!-- 主要内容 -->
</main>

初始隐藏: 使用类似于 .sr-only 的样式将链接移出屏幕。

焦点显示: 使用 :focus 伪类，当链接获得键盘焦点时，将其 position 恢复为 static，并设置合适的 width、height 和 overflow，使其在屏幕上可见。

也可以使用 CSS transitions 来动画显示聚焦的“跳过”链接，使其从页面上方滑入，再在失去焦点后滑出。这种方式可以更清晰地提示用户链接的存在。

何时应该使用仅供读屏软件访问的内容？

通常情况下，仅当以下情况成立时，才应考虑使用此技术：

视觉信息不足以传达意义： 例如，一个图标需要额外的文本解释才能让视障者理解其含义。

提供额外的上下文或提示： 例如，为面包屑导航添加提示信息。

优化特定用户的体验： 例如，初始隐藏“跳过”链接以优化视觉设计，但确保其对键盘用户可用。

创建仅供读屏软件访问的内容是构建无障碍网页的重要组成部分。通过合理运用 .sr-only 类或 CSS clip 技术，我们可以为视障用户提供必要的补充信息和更好的导航体验，而不会干扰到健视用户。 开发者应该充分理解各种隐藏技术的特性和适用场景，谨慎使用，并始终以提升所有用户的网页体验为目标。 记住，无障碍设计的目标是包容性，让每个人都能平等地访问和使用网络信息。

参考资料:

https://webaim.org/techniques/css/invisiblecontent/