如何通过CSS定位盲文/屏幕阅读器

Question

我使用webfont在网站上显示一些图标.这很棒,因为它们可以缩放,如果我愿意,我可以打印它们......但问题是盲人将它们视为普通字母或字符.以下示例返回一个漂亮的Icon +文本.

<span>i</span> Info
<span>t</span> Contact
etc...

一个盲人只会读:iInfo,tContact等...

有可能以某种方式仅使用CSS定位盲文和屏幕阅读器吗？

我在w3网站上发现了这个,但我不确定这部作品是否真实存在:http: //www.w3.org/TR/CSS2/media.html#media-types

有人对这个有经验么？

------ 更新 -----

:before&:after- >某些屏幕阅读器(如VoiceOver for MacOS)会大声读出"内容"部分.我亲自测试过这个.

@media braille, speech - >接缝不会对VoiceOver产生影响.它读取屏幕上可见的内容(使用safari和chrome测试)

speak: none;- >对VoiceOver或NVDA没有任何影响(https://twitter.com/#!/jcsteh/status/143848614979055616)

Answer 1

我认为没有"终极解决方案".但是您可以使用abbr-tag来描述font-char的使用,因此大多数屏幕阅读器会读出abbr的title-param,并且用户会获得"icon-character"的含义.

我不是百分百肯定,但是因为它接收NVDA,JAWS和适用于iOS的VoiceOver这个工作 - 在Mac OS X上(不幸的是)不 ...

例:

<abbr title="Attachment Icon">A</abbr>