2011-07-07 13 views
1

剛剛搜索了網絡,並提出了以下代碼。當我在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> 
+2

你使用屏幕閱讀器嗎?你的屏幕閱讀器是否支持CSS? – Guillaume

+0

不使用屏幕閱讀器 –

回答

14

語音樣式表是爲屏幕閱讀器讀取(因此你在樣式表的開始看到aural媒體類型),而不是瀏覽器渲染。這就是爲什麼你的瀏覽器沒有說什麼。

他們是視覺障礙人士的輔助工具,他們需要依靠聽覺而不是視力來瀏覽網站。

Aural style sheets在CSS2.1規範中描述,但已被CSS3 Speech Module替代。不過,目前還不知道對這兩種規格有什麼樣的支持,因爲大多數屏幕閱讀器都只是讀取瀏覽器渲染和顯示的內容。

相關問題