Wie kann man für Screenreader-Benutzer barrierefreien Text in HTML bereitstellen?

Question

Ich habe eine Website, die farbige Divs mit Zahlen enthält, zum Beispiel einen roten Block mit der Nummer 2 darin. Farbe ist wichtig für das Verständnis. Ein blinder Benutzer schickte mir eine E-Mail und fragte, ob ich einen Screenreader verwenden könnte, der „2 rot“ liest.

Ich habe versucht, es als alt="2 red" hinzuzufügen, aber er sagte, es habe nichts bewirkt. Er dachte, dies könnte nur das Alt-Tag des Bildes lesen.

Gibt es dafür eine gute Möglichkeit, die mit div-Elementen funktioniert?

Answer 1

编辑2020年： 目前 display:none 或 visibility:hidden 似乎普遍导致内容在视觉上和屏幕阅读器上不可见（在Firefox和Chrome中使用NVDA进行测试），所以下面的陈述是无效的。 目前，将内容移出屏幕似乎是为屏幕阅读器用户提供内容的唯一方式，也请参阅以下表格： http://stevefaulkner.github.io/HTML5accessibility/tests/hidden-2016.html

---

除非在接受的答案中另有说明，至少 Chromevox¹ 和 NVDA² 也会读取具有 display:none 或 visibility:hidden CSS 属性的元素，如果设置了 aria-hidden=false。然而，目前只有在 Chrome（65）中，而不是在 Firefox 或 Edge 中（根据我的测试）。

所以（目前仅在 Chrome 中可行），也可以像这样做：

<h1 aria-hidden="false" style="display: none;">仅供屏幕阅读器使用的标题</h1>
<h1 aria-hidden="false" style="visibility: hidden;">仅供屏幕阅读器使用的第二个标题</h1>
<h1 aria-hidden="true">仅供屏幕使用的标题</h1>

其中 Chromevox 和 NVDA 会读取第一个和第二个标题。 还请参阅：https://jsfiddle.net/4y3g6zr8/6/

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

^{1_{Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn} 2_{NVDA https://www.nvaccess.org/}}

Answer 2

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

有效的解决方案

ARIA标签 ★ ★ ★ ★ ★ ★

aria-label（不要与aria-labelledby混淆，后者从另一个元素的文本中提取可访问名称）用于为元素添加屏幕外描述性内容，类似于alt=属性为图像添加屏幕外描述性内容，当图像无法显示时使用。

不同之处在于，aria-label可以用于非图像元素。

<div aria-label="测试A"><p aria-hidden="true">测试B</p></div>
<!--
     结果（屏幕阅读器）：测试A
     结果（常规）：测试B
-->

添加aria-hidden属性可以隐藏内部文本。

定位 + 裁剪 + 折叠 ★ ★ ★ ★

.screenreader {
    position: absolute !important; /* 脱离文档流 */
    height: 1px; width: 1px; /* 几乎折叠 */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* 仅IE 7+支持不带逗号的clip */
    clip: rect(1px, 1px, 1px, 1px); /* 其他所有浏览器 */
}

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

定位 ★ ★ ★

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

<div>星期三<span class="screenreader">，2014年9月24日</span></div>

缩进 ★

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

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

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

不起作用

visibility: hidden; 和/或 display:none;

这些样式将隐藏文本，使其对所有用户都不可见。文本从页面的视觉流中移除，并被屏幕阅读器忽略。如果要让内容被屏幕阅读器读取，请不要使用此CSS。但是，如果要让内容不被屏幕阅读器读取，请使用它。

width:0px;height:0px

与上述相同，因为没有高度或宽度的元素会从页面流中移除，大多数屏幕阅读器将忽略此内容。HTML的宽度和高度可能会产生相同的结果。如果要让内容被屏幕阅读器读取，请不要将内容大小设置为0像素。

更多信息：

• WebAIM残障人士中心
• Fangs Mozilla屏幕阅读器模拟器