hamashun.com

• 2007-07-19 JAWSの読み上げ方に補足頂いたので追記

ショートカットメニュー

1. 表現は視覚だけじゃない
2. 色んなUA（の一例）
3. 音声ブラウザとスクリーンリーダーの違い
4. スクリーンリーダについて
5. 音声ブラウザやスクリーンリーダーのシェア
6. 読み上げについて
7. JAWSの読み上げ方
8. CSSの話
9. 質疑応答
10. 点字ブラウザについて
11. 感想

表現は視覚だけじゃない

構造と表現が分けられている事が、Web標準の基礎。
と言うと「視覚表現と構造の分離」と思いがちだが、その考え方は聴覚表現や触覚表現でも必要。

例えば、強調を表現するにはCSSで文字色を赤にしたり太字にしたりするが、それだけでは聴覚的や触覚的には強調されていない。（相当する表現は声を大きくするとか、音程を変えるとか、解説を付けるとか？ 現段階の機能で可能かどうかは別で）。

色んなUA（の一例）

視覚系ブラウザ

IE、Firefox、Opera、Safari

モバイルブラウザ

端末ごとのブラウザ

フルブラウザ

PDAブラウザ

テキストブラウザ

Lynx

サーチエンジン

Google

音声ブラウザ

ホームページリーダー

Firefox+FireVox

音声ブラウザとスクリーンリーダーの違い

音声ブラウザは「ブラウザ」。 スクリーンリーダーはPCの操作など全般を支援する。
つまり、スクリーンリーダーはブラウザソフトでは無い。

スクリーンリーダについて

最強の呼び声高いスクリーンリーダーはJAWS（ジョーズ）。
ただし価格が高い。

前述の通り、スクリーンリーダーはIEなどのブラウザを通してアクセスする。 よってUAはそのブラウザとなる。
その為にアクセス解析ではシェアが分からず、クライアントに視覚障害者への対応を勧める事に苦労する（具体的な説得材料が一つ減ってしまう）。

アクセシブルでないサイト（ショッピングサイトなど）を使った際には、辻さんはその旨をサイト側に伝える事があるとか。
（これはShunの意見ですが）それが辻さんに限る事だとは思えないし、フォームのアクセシビリティは特に重要なのでは。

スクリーンリーダーという事は通常のPC操作も支援している訳で、例えばテキストを打つ場合も読み上げてくれる（キーを叩く度、変換する度に読み上げる）。
例としてスピーカーの辻さんの「辻」という字を変換すると、「辻斬りの 辻」と読み上げていた。

音声ブラウザやスクリーンリーダーのシェア

音声ブラウザではホームページリーダーが。 スクリーンリーダーではPc-TalkerとXPトーカ－が多い。
JAWSは性能はいいけれど、値段もあってかまだまだ一般には普及していない。
（ここでモデレーターの植木さんから補足があって、 「インフォアクシアではPc-Talkerとホームページリーダーの2つをチェック対象としている」との事）

読み上げについて

ホームページリーダーでは、見出しやリンク部分を女性の声で読み上げる事で、通常のテキスト（男性）との区別を付きやすくしていた。
支援ソフトの種類によっては、女性の声のままで音程を上げる事で区別を付けてる物もある。

「、」や「。」は、「てん」「まる」と読み上げられていた。
例として上の行だと、「てん やまる はてん てんまると読み上げられていましたまる」となる（「」はどうだったかな・・メモ忘れか、登場しなかったか。 こちらの件はJAWSの読み上げ方にて追記済み）。

前述のJAWSでは、h1要素やh2要素を「見出し1」「見出し2」と読み上げてくれる。
また、リンク部分も「リンク トップ」「リンク ブログ」などと、「リンク：ほげほげ」という形式で読み上げてくれる。 他のスクリーンリーダーではそこまではやってくれないらしく、この辺りが最強たる所以？

JAWSの読み上げ方

支援技術が実際にどのように読み上げるのかを、JAWSで体験する事ができました。
必死にメモを取りましたが、展開が速かったので曖昧な部分が多くあります。 正しくは音声とスライドの公開を待ってください。

、

「てん」

。

「まる」

？

「疑問符」

・

「ナカテン」

「」

「かっこ」「かっことじ」

【】

「すみつきかっこ」

h1要素 h2要素

「見出し 1」「見出し 2」

p要素

特に何も無く、通常のテキストとして読み上げる

リンク部分

「リンク：ほげほげ」

ul要素、ol要素

1項目を読み上げた後に「3の1」など、全体数と現在数を伝えてくれる

blockquote

「ブロッククォート～ブロッククォート終了」

strong要素 em要素

特に何も無く、通常のテキストとして読み上げる（「強い強調」と「強調」だったかも）

del要素

特に何も無く、通常のテキストとして読み上げる

Twitterで forestkさんに補足頂きました。 ありがとうございます！

ここで分かる事は、（strong要素や？）del要素を通常のテキストとして読み上げてしまう支援ソフトがある、という事。
つまり、音声系の環境もサポートするならば、他の手段でそれを伝える事を考える必要がある（もちろん正しいHTMLである事を前提に）。

CSSの話

画像置換にdisplay: none; を使用するとスクリーンリーダーで内容を得られなくなるように、視覚表現の為の指定がアクセシビリティを下げてしまう事がある。

また現在の音声ブラウザは、link要素のmedia属性に対応しているとは言いがたく、media="screen,print" などと指定しても読み込んでしまう。

質疑応答

CSSが適用されると隠される、ナビゲーションスキップメニューの是非

• ミツエーリンクス的にはNG
• ただ、聴覚ブラウザ専用ではなく、他の用途でも使えるなら（文書として必要なら）良いのでは
• 音声ブラウザにはhn要素のみを次々に読み上げる機能があるので、しっかりとしたマークアップをする事も大事（スクリーンリーダーでは未実装も多いが）
• WCAG的には、欲しい（植木さんの補足）
• この辺りは日々進歩している

一般の（製作者でない、という意味）視覚障害者はどのくらいWebを使っている？（主観で）

• ハードルが高いのは確か
• 支援ソフトも、今後はオープンソースが増えて値段も下がったりするかも

Googleの検索ページを読み上げたらどうなる？

• 検索結果のサイト名が見出しでマークアップされているので、そこだけを次々に読み上げる事ができる
• 少しインデントされている部分（関連リンク？）も同じく見出しでマークアップされている

Flashや動画コンテンツは？

• コンテンツ側が代替情報を用意する事が重要
• Flashのアクセシビリティはどんどん上がっていっている
• 動画に関しては、「ここを開くと動画が再生される」と分かっていればOK。 いきなり再生されるとびっくりする。
• いきなり再生されると、動画の音声と読み上げの音声がかぶってしまう
• 辻さんはMdN Interactiveのコラムでも、その辺りの事を書いているとの事

点字ブラウザについて

セッション終了後に、点字ブラウザの動作を見せてもらえる事になりました。
本当なら写真を撮ったりしたかったんですが、次のセッションの都合上無理でした。 なので文字だけで説明。

• 点字ブラウザは、画面でなく、モノ（もしかしたら、モノ＋ソフトの両方かも）
• 動的に点字が生成される
• 画面にあわせて、点字部分のパーツがニョキニョキ動く感じ
• 点字のパーツは、鉄系の素材で頑丈な感じ
• 値段は超高いっぽい

感想

実際に読み上げソフトを常用している人の話を聞けるっていうのは、ものっそい貴重な体験でした。
お恥ずかしながら、スクリーンリーダーと音声ブラウザの違いもこのセッションで知りました。
そういえば、聴覚スタイルシートの話は出ませんでした（質問するのも忘れた・・）。 まあ、media属性の対応もまだ十分で無いのなら、殆どサポートされて無いのかもしれません。

今回のセッションと直接の関係は無いんですけど、前に2ch系のBBSで「AAがあると何が何だか分からなくなる」っていう書き込みを見た事があります。
まあ、2chくらいの規模になると２ちゃんねる”を音声で読み上げてくれるWebブラウザもあるみたいですけれど。