Question

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

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

一个盲人只会读到：iInfo，tContact等......

是否有可能以某种方式仅针对盲文＆amp;使用CSS的屏幕阅读器？

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

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

------的更新 -----

:before＆amp; :after - ＆gt;一些屏幕阅读器，如VoiceOver for MacOS，会大声读出“内容”部分。我亲自测试了这个。

@media braille, speech - ＆gt;接缝不会对VoiceOver产生影响。它会显示屏幕上可见的内容（使用safari和chrome测试）

speak: none; - ＆gt;对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>

Answer 2

您并不是唯一想知道此处的可访问性问题。最近关于displaying icons with fonts and data-attributes的24Way文章对此进行了大量讨论。 Jon Hicks提出的建议是仅使用：before伪元素生成你的span，大多数屏幕阅读器都没有这个元素（我相信Apple的VoiceOver可能是例外，但无论如何都要在所有目标浏览器中测试）。这样，有视力的用户将获得图标和文本，而辅助浏览器将获得文本。

编辑添加：我自己没有尝试过这种方法，但看起来非常简单和可预测。

Answer 3

你可以这样编码：

<span class="icon">i<span class="audio-description"> icon</span></span> Info
<span class="icon">t<span class="audio-description"> icon</span></span> Contact

使用以下CSS：

.audio-description 
{
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media speech
{
    .icon
    {
        display: none;
        speak: none;
    }
}

这为屏幕阅读器可以读取的每个图标添加了说明，但是moves it off the screen因此在标准Web浏览器中不可见。

这样做的好处是它应该优雅地降级：

在标准的Web浏览器中，您的图标应该以与现在相同的方式呈现（除非禁用CSS，在这种情况下，查看器将看到额外的图标文本）
在尊重@media speech的屏幕阅读器中，图标不应该全部读出
在不尊重@media speech的屏幕阅读器中，该图标应显示为i icon等。

此外，由于屏幕上移动内容似乎是为屏幕阅读器提供替代文本的常用方法，因此该解决方案不太可能突然中断（即屏幕阅读器不太可能先说出icon部分即使它被移到了最左边。）

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

3 个答案: