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

概述我有一个网站,上面有数字的彩色div,例如一个红色的块,里面有数字2.颜色对理解很重要.一位盲人用户通过电子邮件向我询问是否可以让他的屏幕阅读器说“2红”. 我尝试将其添加为alt =“2 red”,但他说没有做任何事情.他认为它可能只读取图像的alt标签. 为div做一个好方法吗？ 谢谢！ 至于alt文本,你是正确的,只适用于图像..但你可以使用aria-label代替非图像元素的alt属性,如 我有一个网站,上面有数字的彩色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-->

添加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); /* All other browsers */}

该剪辑用于完全隐藏1px x 1px元素,否则它仍将在屏幕上可见.

位置★★★

.screenreader {    position: absolute;    left:-9999px;}<div>Wed<span >nesday</span>,Sept<span >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

总结

以上是内存溢出为你收集整理的在HTML中,我如何才能获得仅供屏幕阅读器(即盲人)访问的文本？全部内容，希望文章能够帮你解决在HTML中,我如何才能获得仅供屏幕阅读器(即盲人)访问的文本？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。