我有一个网站,上面有数字的彩色div,例如一个红色的块,里面有数字2.颜色对理解很重要.一位盲人用户通过电子邮件向我询问是否可以让他的屏幕阅读器说“2红”.
我尝试将其添加为alt =“2 red”,但他说没有做任何事情.他认为它可能只读取图像的alt标签.
为div做一个好方法吗？
谢谢！
解决方法
至于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
-->
位置剪辑折叠★★★★
.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); /* 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 Center for Persons with Disabilities
> Fangs Screen Reader Emulator for Mozilla
