プロが教える店舗＆オフィスのセキュリティ対策術

音声ブラウザ、スクリーンリーダー用CSSについて

解決済

  • 質問者：swd70
  • 質問日時：
  • 回答数：3件

はじめてご質問させていただきます。
現在、音声ブラウザ、スクリーンリーダーでの閲覧を意識したサイトを制作しております。

ブラウザ上では文字情報が閲覧でき、スクリーンリーダーで読み上げた際、特定の箇所だけは読み上げないといった仕様を目標に構築しておりますが、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環境にて制御できればと思っております。

よろしくご指導の程お願い申し上げます。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1

  • 回答者： ORUKA1951
  • 回答日時：

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になりました。(両方併記したほうがよいかも)


　
    • good
    • 0
    • 件
通報する
この回答へのお礼

＞ORUKA1951様

ご教示いただきありがとうございます。

speakにつきましては既に試してみたのですが、残念ながら読み上げられてしまっていました。
対応ブラウザとバージョンが狭いようで、ブラウザによっては…かもしれませんがＩＥ8でPC-Talker3を使用した際には
読み上げられてしまいました。

CSS2.1からmedia-type:speachということで　aural, speachでの設定、またimportからではなく、<head>内に直接記載し指定しているのですが、やはりうまくいきません。

また文章構造のマークアップについてもありがとうございます。
普段からidやclassについては意識していいるのですが、改めて正しいマークアップの重要性を認識いたしました。

ありがとうございました。

通報する
お礼日時：2011/10/06 11:35

No.2

  • 回答者： ORUKA1951
  • 回答日時：

わすれてました。


div.figure{speak:none;}
を・・・
　挿絵はいっさい無視する。とか

　視覚系のプロパティと異なりますので、簡単な場合はわざわざ分けなくても同居しても構いません。
    • good
    • 0
    • 件
通報する

No.3ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

　肝心なところを読み飛ばしてました。



　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プロパティで分を追加するほうがよいような気がします。
    • good
    • 0
    • 件
通報する
この回答へのお礼

＞ORUKA1951様

お世話になっております。
たび重なるご教示恐れ入ります。

やはりPC-talkerはcssを理解し、読み上げをすることが出来ないとのことで
大変勉強になりました。

たしかにおっしゃる通り、読み上げの制御を必要とする設計をおこなっている時点でダメでしたね。

ご回答ありがとうございました。

通報する
お礼日時：2011/10/06 15:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報