- ベストアンサー
音声ブラウザ、スクリーンリーダー用CSSについて
- 音声ブラウザやスクリーンリーダーでの閲覧を意識したサイト制作についてアドバイスをお願いします
- cssをMedia Typeでspeech, auralで振り分けているが、実際の表示通りに全て読み上げられてしまう問題が発生しています
- PC-Talker環境での制御方法について教えてください
- みんなの回答 （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/index.html ) ただ、現実問題としては大変難しく読み上げを念頭に置くなら、当初からそれを念頭においてペーづしを作成し、視覚ブラウザ用にcontentプロパティで分を追加するほうがよいような気がします。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
わすれてました。 div.figure{speak:none;} を・・・ 挿絵はいっさい無視する。とか 視覚系のプロパティと異なりますので、簡単な場合はわざわざ分けなくても同居しても構いません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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/aural.html ) 少しばかり変更があります。出来ればCSS2.1を参照してください。media-type:speachになりました。(両方併記したほうがよいかも)
お礼
＞ORUKA1951様 ご教示いただきありがとうございます。 speakにつきましては既に試してみたのですが、残念ながら読み上げられてしまっていました。 対応ブラウザとバージョンが狭いようで、ブラウザによっては…かもしれませんがＩＥ8でPC-Talker3を使用した際には 読み上げられてしまいました。 CSS2.1からmedia-type:speachということで aural, speachでの設定、またimportからではなく、<head>内に直接記載し指定しているのですが、やはりうまくいきません。 また文章構造のマークアップについてもありがとうございます。 普段からidやclassについては意識していいるのですが、改めて正しいマークアップの重要性を認識いたしました。 ありがとうございました。
お礼
＞ORUKA1951様 お世話になっております。 たび重なるご教示恐れ入ります。 やはりPC-talkerはcssを理解し、読み上げをすることが出来ないとのことで 大変勉強になりました。 たしかにおっしゃる通り、読み上げの制御を必要とする設計をおこなっている時点でダメでしたね。 ご回答ありがとうございました。