スクリーンリーダーに対応するための CSS 設定

スクリーンリーダーとは盲目の方などが PC を操作するために用いるソフトウェア(プログラム)の総称です。 現在フォーカスしているテキストを音声で読み上げ、ユーザに伝えます。

スクリーンリーダーに対応するために求められる取り組みの 1 つとして、画像などに alt 属性を与えることが挙げられます。 スクリーンリーダーは、画像がどのような内容を示すかを理解して、それを音声にすることができません。 したがって、画像の代わりになるテキストが必要になる、ということです。

CSS 設定が必要な具体例

画像以外にも注意しなければならないケースがあります。前後にテキストがなければ上手く意味が伝わらないコンテンツです。 あるいは、アイコンなどの画像・フォントだけを表示しているコンテンツです。

例えば「次のページ」や「前のページ」を表現するために矢印のような画像や記号を使っているとき、 スクリーンリーダーは何も読み上げないか、あるいはその前後にあるページのタイトルだけを読み上げます。

このとき、健常者には見えないものの、スクリーンリーダーだけが読み上げるテキストがあれば、問題は解決します。 ここではスクリーンリーダー向けの CSS の設定などを紹介します。

スクリーンリーダーが読めるようにテキストを隠す方法

テキストを非表示にする方法はいくつもありますが、簡単な方法のいくつかは問題があります。

visibility: hidden は、不可視にはなるものの、その要素の描画領域は確保してしまいます。

display: none は要素を完全に描画しなくなりますが、スクリーンリーダーによって読まれない場合が多くあるようです。 (スクリーンリーダ― JAWS 以外で読まれない)

解決方法はいくつか存在しますが、ここでは描画領域を極めて小さくする手法を紹介します。

position: absolute;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;

位置を絶対位置に設定し、clip によって描画領域を限定して見えなくします。 また、必要なら overflow: hidden; を追加します。

1px 残ってしまいますが、高さが 0 のとき、Apple(Macなど) のスクリーンリーダー― VoiceOver が読み上げないことがあるようです。 実質的に見えることはありませんし、VoiceOver を考慮しなければ 0 にしてしまえば良いですね。

アイコンフォントをスクリーンリーダーに読ませないようにする方法

アイコンフォントは健常者にはアイコンに見えますが、スクリーンリーダーには謎の文字列に見えてしまいます。 したがって、アイコンフォントは読ませずに、隠したテキストを代わりに読ませる必要があります。

CSS(CSS Speech Module) には speak プロパティが用意されていて、speak: none; を指定すれば、 対象の要素は読み上げられない、とされています。ただし執筆した時点でこのプロパティに対応している環境は少ないようです。

また、要素の属性 aria-hidden="true" を設定することで、スクリーンリーダー(ユーザーエージェント)に読み上げさせないようにすることができます。 ただし、この方法についても対応する環境は多くないようですし、CSS ほど柔軟に対応できないという欠点があります。

資料が少ない

speak: none; の設定にしても aria-hidden="true" の設定にしても、どのような環境で対応しているのか、具体的な例を示した情報が見当たりません。 結論から言うと、ユーザ側の環境調整、あるいはスクリーンリーダー側でしか解決のしようがないので、何れかの方法で対応しておく他ありません。

各ブラウザやスクリーンリーダー―の開発本陣が対応状況を明確に示してくれない限り、状況は改善しそうにありませんね。 特別に企業レベルで予算をかけて対応するとかでない限り、一般健常者の方がすべてのパターンをチェックするのは作業コストが大きすぎて困難です。 各環境が素直に speak プロパティに対応して貰えればそれで多くの問題が解決するのですけどね。

資料・参考

ここで紹介する以外のテキストの隠し方などが紹介されています。

スクリーンリーダーのユーザがどのような環境でスクリーンリーダーを使っているのか、調査した結果が公開されています。 新しい調査結果も随時更新されているようです。ただし、日本国内向けの調査ではありません。 したがって、日本語のサイトでも類似した結果が得られるかどうかは定かではありませんが、参考にはできるでしょう。

先に紹介した 2012 年の調査結果を日本語翻訳したものです。 こちらを読めば、元のページも概ね何が書いてあるか把握することができると思います。