在 HTML 中，我怎样才能拥有只有屏幕阅读器（即盲人）才能访问的文本？

Question

我有一个网站，其中包含带数字的彩色 div，例如，其中包含数字 2 的红色块。颜色对于理解很重要。一位盲人用户给我发邮件问我是否可以让它为他的屏幕阅读器说“2 red”。

我尝试将其添加为 alt=“2 red” 但他说那没有做任何事情。他认为它可能只读取图像的 alt 标签。

有没有好的方法可以为 div 执行此操作？

原文由 Some Guy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

至于 alt 文本，你是正确的，它只适用于图像。但是你可以使用 aria-label 代替非图像元素的 alt 属性，如下所示：

有效的解决方案

咏叹调标签 ★ ★ ★ ★ ★

aria-label （不要与 aria-labeledby 混淆，相关标签从另一个元素的文本中提取可访问的名称）用于向元素添加屏幕外的描述性内容以 alt= 属性的方式向图像添加屏幕外描述性内容，以便在图像不可显示时使用。

区别在于， aria-label 可以用在非图像元素上。

 <div aria-label="test A"><p aria-hidden="true">test B</p></div>
<!--
     result (screenreaders):  test A
     result (regular):        test B
-->

aria-hidden 属性的添加隐藏了内部文本。

位置+剪辑+折叠★★★★

 .screenreader {
    position: absolute !important; /* Outside the DOM flow */
    height: 1px; width: 1px; /* Nearly collapsed */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
    clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}

剪辑用于完全隐藏 1px x 1px 元素，否则它仍然会在屏幕上可见。

排名★★★

 .screenreader {
    position: absolute;
    left:-9999px;
}

<div>Wed<span class="screenreader">nesday</span>, Sept<span class="screenreader">ember</span> 24, 2014</div>

缩进 ★

 .screenreader {
    text-indent: -5000px;
}

实际缩进值并不重要，只要它在页面布局范围之外即可。该示例会将内容向左移动 5,000 像素。

此解决方案仅适用于完整的文本块。它在锚点或表单、从右到左的语言或与其他文本混合的特定内联文本上效果不佳。

不管用

可见性：隐藏；和/或显示：无；

这些样式将对所有用户隐藏文本。文本从页面的视觉流中删除，并被屏幕阅读器忽略。如果您希望屏幕阅读器阅读内容，请不要使用此 CSS。但是请务必将它用于您不想让屏幕阅读器阅读的内容。

宽度：0px；高度：0px

如上所述，由于从页面流中移除了一个没有高度或宽度的元素，大多数屏幕阅读器将忽略此内容。 HTML 宽度和高度可能会给出相同的结果。如果您希望屏幕阅读器阅读内容，请不要将内容大小设置为 0 像素。

进一步：

• WebAIM 残疾人士中心
• 适用于 Mozilla 的 Fangs 屏幕阅读器模拟器

原文由 davidcondrey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

编辑 2020：目前 display:none 或 visibility:hidden 似乎通常导致内容在视觉上和屏幕阅读器中不可见（刚刚在带有 NVDA 的 Firefox 和 Chrome 中测试），因此下面的声明无效.将内容移出屏幕目前似乎是仅为屏幕阅读器用户提供内容的唯一方法，另请参阅此表： http ://stevefaulkner.github.io/HTML5accessibility/tests/hidden-2016.html

---

除非在已接受的答案中另有说明，否则至少 Chromevox 1 和 NVDA 2也会读取样式元素 display:none 或 visibility: hidden CSS 属性 if aria-hidden=false is set但是目前 仅在 Chrome (65) 中，而不在 Firefox 或 Edge 中（根据我的测试）。

所以（目前不幸的是只在 Chrome 中）它也可以做这样的事情：

 <h1 aria-hidden="false" style="display: none;">Heading only for Screen Readers</h1>
<h1 aria-hidden="false" style="visibility: hidden;">Second Heading only for Screen Readers</h1>
<h1 aria-hidden="true">Heading only for Screen</h1>

Chromevox 和 NVDA 读取第一个和第二个标题。另见： https ://jsfiddle.net/4y3g6zr8/6/

如果所有浏览器都同意这种行为，那么这将是比其他解决方案中提出的所有 CSS 技巧更简洁的解决方案。

1 Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn2 NVDA https://www.nvaccess.org/

原文由 klues 发布，翻译遵循 CC BY-SA 4.0 许可协议