在HTML中,我如何才能获得仅供屏幕阅读器访问的文本(即盲人)？

Question

我有一个带有数字的彩色div的网站,例如一个内部带有数字2的红色块.颜色对理解很重要.一位盲人用户通过电子邮件向我询问是否可以让他的屏幕阅读器说"2红色".

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

为div做一个好方法吗？

Answer 1

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

有效的解决方案

ARIA标签★★★★★★

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.但是DO会将它用于您不希望被屏幕阅读器阅读的内容.

宽度:0像素;高度:0像素

如上所述,因为从页面流中删除了没有高度或宽度的元素,所以大多数屏幕阅读器将忽略该内容.HTML宽度和高度可能会给出相同的结果.如果您希望屏幕阅读器读取内容,请不要将内容大小设置为0像素.

进一步:

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

Answer 2

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

除非已接受的答案中另有说明，否则至少Chromevox ¹ 和 NVDA ²也会读取具有样式display:none或visibility: hiddenCSS 属性（如果aria-hidden=false已设置）的元素。然而目前仅在 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/kgejglhpjiefppelpmljglcjbhoiplfn} 2 _{NVDA https://www.nvaccess.org/}}