2011-07-07 8 views
1

ちょうどネットを検索し、次のコードを思いついた。私はFirefox4とSafariでそれらを実行すると、私は何も聞こえていないようだ...どのように私はこれを修正することができますか?スクリーンリーダーではないレンダリングするブラウザに対して、(あなたはスタイルシートの先頭に表示さ故にauralメディアタイプを)読むこと要素に聴覚スタイルシートを使用するにはどうすればよいですか?

<!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

聴覚スタイルシートです。だからあなたのブラウザは何も言わない。

これらは、視覚障害を持つ人々のためのアクセシビリティツールです。ビジターではなく、Webサイトを閲覧するために視覚に頼る必要があります。

Aural style sheetsは、CSS2.1仕様で記述されていますが、CSS3 Speech Moduleで置き換えられています。しかし、どちらの仕様にもどんな種類のサポートが存在するのかは分かっていませんが、ほとんどのスクリーンリーダーはブラウザがレンダリングして表示するものを読み込むだけです。

関連する問題