CSSのspeakプロパティがスクリーンリーダーでの読み上げに影響するのか検証してみた

おせち料理食べてたら2月になってた。おかしいな。

で

今日はCSSのspeakプロパティがスクリーンリーダーでのページの読みあげにどう影響するのか検証してみる。

ことの発端

昨日Twitterでスクリーンリーダーの話をしてたら



と聞かれた。私はspeakプロパティ事態を知らなかったので少し調べてみた。で、読み上げには何の影響も与えないのではと考えた。理由は、speakプロパティをIEがサポートしておらず、IEコンポーネントブラウザのNetReader(私が使ってる視覚障害者向けのブラウザ)ではspeakプロパティをサポートしないと思ったから。ただほんとにそうなのか気になってきたので検証してみようということになった。

スピークプロパティとは

そもそもspeakプロパティとは何なのか。speakプロパティは、ページ内のテキストの読みあげ方法を指定できるCSSプロパティ。値には以下のものが設定できる。

  1. none(指定箇所を読み飛ばす)
  2. normal　(言語に応じて読み上げる)
  3. spell-out　(1文字ずつ読み上げる)

Speakプロパティをサポートするブラウザが見当たらない

上に書いたようにIEはこのCSSプロパティをサポートしていない。それにfirefox、chrome、safariはこのCSSプロパティをサポートしているかわからないとのこと。
ただNetReaderは視覚障害者向けのブラウザだし、検証してみる価値はあると考えた。

ということで検証してみた

実際にCSSとHTMLを書いてNetReaderとIE9、Google Chrome上でスクリーンリーダーがどのようにページを読み上げるか調べた。使ったスクリーンリーダーはPC-TalkerとGoogle Chromeの読みあげに対応してるNVDA。実際に書いたソースを貼ってみる。

HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<P>最近は<abbr title="Hypertext Preprocessor">PHP</abbr>の勉強をしている。</P>
</body>
</html>
CSS
@charset "utf-8";
abbr {speak : spell-out ; }

この二つのファイルを同じディレクトリに置いてHTMLをそれぞれのブラウザで開く。speakプロパティの値が読み上げに影響するとすればこのHTMLは「最近はP・H・Pの勉強をしている。」と読み上げられるはずである。

結果

NetReader、IE、Chromeのいずれのブラウザでもspeakプロパティの値は読み上げに何の影響も与えなかった。文字で表すとすれば「最近はPHPの勉強をしている。」と読み上げられた。

多くのブラウザがspeakプロパティをサポートしていない理由

多くのブラウザがspeakプロパティををサポートしていない理由。それはspeakプロパティが音声ブラウザ用に作られた機能だから。音声ブラウザは、ブラウザに読みあげ機能が実装されているもの。たとえば、かなり前に開発が止まってしまったIBMのホームページリーダーのようなもの。
なので、読みあげ機能のないブラウザではspeakプロパティはサポートされないという分け。今更気づくとかさすが私だね!はぁ。検証した意味あったのかな…。ま、楽しかったしいいや。

余談

昨日の夜に私がスクリーンリーダーに関してTwitterでわーわー言ったことをなんと@sakisaka7さんがTogetterにまとめてくれました!
視覚障害者向けのWeb設計を考える - Togetter
あまり多くのことは書いてありませんがぜひ読んでみてください。