html - 如何在元素上使用听觉样式表?

标签 html css cross-browser css-speech

刚刚在网上搜索并得出以下代码。当我在 Firefox4 和 Safari 上运行它们时,我似乎听不到任何声音。我该如何解决这个问题?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
@media aural {
h1, h2, h3, 
h4, h5, h6    { voice-family: paul, male; stress: 20; richness: 90 }
h1            { pitch: x-low; pitch-range: 90 }
h2            { pitch: x-low; pitch-range: 80 }
h3            { pitch: low; pitch-range: 70 }
h4            { pitch: medium; pitch-range: 60 }
h5            { pitch: medium; pitch-range: 50 }
h6            { pitch: medium; pitch-range: 40 }
li, dt, dd    { pitch: medium; richness: 60 }
 dt            { stress: 80 }
pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
em            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
strong        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
dfn           { pitch: high; pitch-range: 60; stress: 60 }
s, strike     { richness: 0 }
i             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
b             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
u             { richness: 0 }
 a:link        { voice-family: harry, male }
 a:visited     { voice-family: betty, female }
a:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}
</style>
</head>

<body>
<p id="a" class="heidi">Testing</p>
 <p id="b" class="peter">Testingb</p>
 <h2>Heading2</h2>
</body>
<html>

最佳答案

Aural 样式表供屏幕阅读器阅读(因此您在样式表开头看到的 aural 媒体类型),而不是供浏览器呈现。这就是为什么您的浏览器什么都不说的原因。

它们是适用于有视觉障碍的人的辅助工具,他们需要依靠听觉而不是视觉来细读网站。

Aural style sheets在 CSS2.1 规范中进行了描述,但已被 CSS3 Speech Module 取代.不过,目前尚不清楚对这两种规范存在何种支持,因为大多数使用中的屏幕阅读器只是读取浏览器呈现和显示的内容。

关于html - 如何在元素上使用听觉样式表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6607571/

相关文章:

javascript - 通过偏移数学居中在非 webkit 浏览器中不起作用

css - 计算器不工作 ie 11

android - div宽度的问题

javascript - Nivo Slider Nivo-control 导航边距

html - 将 div 裁剪到同级 div

php - 响应速度不适用于 slider

javascript - 在不同的样式上加载 css 样式

html - Div 需要低于绝对位置

html - 搜索跨浏览器工作的回复 utf 字符箭头

html - Bootstrap 下拉列表被溢出 :hidden container, 截断如何更改容器?