はじめてご質問させていただきます。
現在、音声ブラウザ、スクリーンリーダーでの閲覧を意識したサイトを制作しております。
ブラウザ上では文字情報が閲覧でき、スクリーンリーダーで読み上げた際、特定の箇所だけは読み上げないといった仕様を目標に構築しておりますが、cssをMedia Typeでspeech, auralで振り分けしているのですが、実際の表示通りに全て読み上げられてしまい、行き詰っております。
過去の質問等検索させていただき、色々試しましたが、私の実力不足です。
よろしければアドバイスの程お願申し上げます。
ご参考までに簡単ではございますがソースを記載させていただきます。
●<head>内CSS参照
<link rel="stylesheet" type="text/css" href="base.css" media="all">
<link rel="stylesheet" type="text/css" href="aural.css" media="aural">
●aural.css
.silence {
display: none;
}
(visibilityや!importつけたりなど色々試しましたができませんでした)
●body内
<body>
<p class="silence">表示されるが読み上げない</p>
<p>表示され読み上げもされる</p>
</body>
以上でございます。
検証しておりますスクリーンリーダーはPC-Talkerです。
まずはPC-Talker環境にて制御できればと思っております。
よろしくご指導の程お願い申し上げます。
No.3ベストアンサー
- 回答日時:
肝心なところを読み飛ばしてました。
PC-talkerは、ブラウザではありませんからスタイルシートを理解して読み上げることは出来ません。
PC-Talker単独ではなく、NetReaderやNVDAなどとの連携でないとダメです。
Web標準の日々レポート 「文書構造がもたらす利点 ~環境に依存しないコンテンツ~」 中村精親さん 辻勝利さん | Blog hamashun.com ( http://www.hamashun.com/blog/2007/07/web_4.html )
スクリーンリーダと音声ブラウザの種類とそれらの概要 - E-riverstyle Vanguard | CSSやXHTML,Javascriptやweb製作に関する事を紹介 ( http://blog.e-riverstyle.com/2010/02/post-75.html )
Make it accessible!: 2006年2月 ( http://otasweb.cocolog-nifty.com/otasweb/2006/02 … )
ただ、現実問題としては大変難しく読み上げを念頭に置くなら、当初からそれを念頭においてペーづしを作成し、視覚ブラウザ用にcontentプロパティで分を追加するほうがよいような気がします。
>ORUKA1951様
お世話になっております。
たび重なるご教示恐れ入ります。
やはりPC-talkerはcssを理解し、読み上げをすることが出来ないとのことで
大変勉強になりました。
たしかにおっしゃる通り、読み上げの制御を必要とする設計をおこなっている時点でダメでしたね。
ご回答ありがとうございました。
No.2
- 回答日時:
わすれてました。
div.figure{speak:none;}
を・・・
挿絵はいっさい無視する。とか
視覚系のプロパティと異なりますので、簡単な場合はわざわざ分けなくても同居しても構いません。
No.1
- 回答日時:
p.silence{
speak:none;
}
で、無視します。時間を開けるなら
p.silence{
valume:none;
}
です。スクリーンリーダー用のプロパティは、視覚端末用のものとはまったく異なります。
HTMLにも工夫が必要です。わざわざ、スクリーンリーダー用、点字端末用にゴチャゴチャ書くのではなく、きちんと文書構造にしたがってマークアップしておきましょう。
<div class="section">
<h2>見出し</h2>
<p>段落</p>
<p>段落<img src="" alt="湖畔から見上げると壮大な富士山がますます大きく見えました。"></p>
<div class="figure">
<h3>挿絵</h3>
<p>段落</p>
</div>
<div class="nav">
ナビゲーション
</div>
</div>
と言う風に、意味を表すclass名をつけておくべきです。そのうえで
div.nav{speak:none;}
img{azimuth:left-side;voice-family:male;}
とすれば、「ナビゲーションは読まない」「画像の代替テキストは女声で左方向から」と、後からのメンテナンスも楽です。
CSS2.1 Aural style sheets ( http://www.w3.org/TR/CSS2/aural.html )
CSS2(古い) 音声スタイルシート ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
少しばかり変更があります。出来ればCSS2.1を参照してください。media-type:speachになりました。(両方併記したほうがよいかも)
>ORUKA1951様
ご教示いただきありがとうございます。
speakにつきましては既に試してみたのですが、残念ながら読み上げられてしまっていました。
対応ブラウザとバージョンが狭いようで、ブラウザによっては…かもしれませんがIE8でPC-Talker3を使用した際には
読み上げられてしまいました。
CSS2.1からmedia-type:speachということで aural, speachでの設定、またimportからではなく、<head>内に直接記載し指定しているのですが、やはりうまくいきません。
また文章構造のマークアップについてもありがとうございます。
普段からidやclassについては意識していいるのですが、改めて正しいマークアップの重要性を認識いたしました。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
携帯サイト、ナノでのタグ編集...
-
IEで表示されてしまう余白をな...
-
オシャレな区切り線はありませ...
-
div要素が重なってします
-
開始タグと終了タグについて
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
HTMLのJIS規格について
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
グリッドレイアウトで"auto-fit...
-
Macで画像の切り抜きできないの?
-
【ヒトの神秘】美男美女から何...
-
ウインドウを小さくするとbody...
-
htmlの文字が縦書きになる
-
CSSのクラス名・ID名の指定でワ...
-
スクロールボックスを中央に配...
-
隙間をなくすには?
-
<h1>、<h2>と<p><div>の行間を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
要素間、要素内に隙間が空く
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報