如何通过CSS定位盲文/屏幕阅读器 [英] How to target a braille / screen-reader via CSS

问题描述

我使用webfont在网站上显示一些图标。这是太棒了，因为他们规模，我可以打印他们，如果我想...但问题是，盲人看到他们作为正常的字母或字符。以下示例返回一个很好的Icon +文字。

I use a webfont to display some icons on a website. This is fantastic because they scale, and i can print them if i want to... But the problem is that blind people see them as normal letters or characters. The following example returns me a nice Icon + text.

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

盲人只读：iInfo，tContact等。 ..

A blind person will just read: iInfo, tContact etc...

可能以某种方式只定位盲文 - &屏幕阅读器与CSS？

Is it possible somehow to target only braille- & screen-readers with CSS?

我在w3网站上找到了这个，但我不知道是否真正的工作：
http://www.w3.org/TR/CSS2/media.html#media-types

I found this on the w3 website, but I'm not sure if the work in real live: http://www.w3.org/TR/CSS2/media.html#media-types

有没有人有这方面的经验？

Does anyone have any experience with this?

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

------update-----

：before & ：之后 - >一些屏幕阅读器，如MacOS的VoiceOver读取内容部分大声。我已经用我的自我测试过了。

:before & :after -> Some screen-readers such as VoiceOver for MacOS do read the "content" part out loud. I have tested this by my self.

@media braille，speech - >接缝没有影响VoiceOver。它读取屏幕上显示的内容（使用safari和Chrome测试）

@media braille, speech -> Seams not to have a influence on VoiceOver. It reads whats visible on the screen (tested with safari & chrome)

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

speak: none; -> has no influence at all on VoiceOver or NVDA ( https://twitter.com/#!/jcsteh/status/143848614979055616 )

推荐答案

我认为没有最终解决方案。但是你可以使用abbr-tag来描述你的font-char的使用，因此大多数屏幕阅读器都会读出abbr的title-param，用户会得到icon-character的含义。

I think there is no "ultimate solution" to this. But you can use the abbr-tag to describe the use of your font-char, therefore most screen-readers will read-out the title-param of abbr and the user gets the meaning of the 'icon-character'.

我不是100％肯定，但因为它接缝NVDA，JAWS和VoiceOver的iOS这是工程 - 在Mac OS X（不幸的是）不 ...

I'm not 100% sure, but as it seams NVDA, JAWS and VoiceOver for iOS this works — on Mac OS X (unfortunately) not…

示例：

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

这篇关于如何通过CSS定位盲文/屏幕阅读器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！