如何使用听觉CSS？

Question

1. 我曾经读过一个地方，声音样式表不再被使用了？有什么东西取代了他们吗？我肯定有什么东西被用来让那些视力受损的人变得更容易？
2. 如果声音CSS仍在使用，是否有一种方法可以指定在特定的地方应该说什么，类似于对图像使用"alt“？例如，我正在使用图标字体作为我的标志。我希望能让用户听到我公司的名字，但是因为它是用span完成的，所以在这个特定的跨度中没有位置可以显示单词(我在这里假设系统读取显示在屏幕上的单词，而不是所有的代码，所以如果有实际的文本可读，这显然会更好)。也许包括一个内容：‘任何你想要的文本’是添加了某种方式？

要点是，我正在为客户开发一个关于歌剧的网站，客户希望每个人都能访问这些内容。很明显，有视力障碍的人会特别想听到一些事情。

Answer 1

1.有替代听觉的方法吗？

从CSS3开始，音频样式表确实被废弃了。主要浏览器如火狐删除了不久前的实现。还包括一个speech媒体，但到目前为止我还没有看到任何实现(目前看来它只是提案 )。

许多有视觉障碍的人使用屏幕阅读器，并在较小程度上使用可刷新的盲文显示器来查看内容，因此您通常不必担心语音的直接实现。这方面要发挥作用的要点是：

• 人们必须能够使用选项卡键浏览内容
• 所有相关的丰富内容，如图像等，需要有一个文本等效。
• 您的html应该是语义的(请看aria属性)

2.如何使图标字体(和其他无法阅读的项目)可访问？

在这篇关于防弹可访问字体图标的文章中，他们提出了一个很好的解决方案：

由于这些字符没有任何直接的语义意义，所以可以将它们包含在:before的span伪类中。

.logo:before {
    font-family: YourIconFontFamily;
    content: "★";
}

然后将公司名称直接包含在span中：

<span class="logo">Your company<span>

Answer 2

1. 根据W3，它是在CSS 2中定义的，但已经被CSS3否决了。您还可以查看语音模块：http://www.w3.org/TR/css3-speech
2. 您可以只对屏幕阅读器使用具有特定内容的另一个span，它看起来如下所示： <span aria-hidden="true">Here could be your company name</span> 来源：aria-隐藏/