こんにちは。キャスレーコンサルティングの佐藤です。
業務では主にJavaを使用し、実装からテスト工程を担当しています。
前回の記事（カラーユニバーサルデザインに配慮したUIを作ろう！）では、
カラーユニバーサルデザインについて調査しました。
その過程で、視覚障害を持つ方にとって操作しやすいUIについて興味を持ち、
その中でも、今回はスクリーンリーダーに着目しました。
スクリーンリーダーとは？
スクリーンリーダーとは、一言で言うと「コンピューターの画面読み上げソフト」です。
視覚障害を持つ方がPCを操作するために、画面の情報や操作を音声で読み上げることで操作を補助します。
このソフトウェアを利用することで、
「いま何が表示されているか」「選択した部分に何があるか」が分かるようになります。
実際に、スクリーンリーダーを利用してWebサイトを操作する流れは以下のようになります。
- 使用する端末で、スクリーンリーダーを起動する。
WindowsやMacなど主要なOSにはスクリーンリーダーが標準搭載されています。
例えばMacでは、「システム環境設定＞アクセシビリティ」でVoiceOverを選択し、
「VoiceOverを有効にする」にチェックを入れることで起動することができます。 - キーボードやトラックパッドを使って画面上を移動し、スクリーンリーダーに読み上げさせながら、
目的のURLやボタンがある場所を見つける。 - 見つけた場所でEnterキーを押して、遷移する。
このようにディスプレイの情報を目で見るのと、
スクリーンリーダーで読み上げるのとでは、操作方法にかなり違いがあります。
以上を踏まえ、スクリーンリーダーを利用するユーザーにとって
より操作しやすいWebサイトを制作するために、気をつけると良い点について紹介していきます。
記述する基本となる言語を明示する
ページ内で記述する、基本となる言語が指定されていないと
スクリーンリーダーは、正しい発音で読み上げることができない場合があります。
lang属性からコンテンツの言語を判断するため、
日本語であれば、タグの lang属性に ja を指定しましょう。
悪い例）
<html> <head> <meta content="text/html; charset="utf-8"> <title>○○○○</title> </head>
良い例）
<html lang="ja"> <head> <meta content="text/html; charset="utf-8"> <title>○○○○</title> </head>
内容を的確に示すタイトルをつける
titleタグの内容は、タイトルバーや検索サイトの結果表示に反映されます。
スクリーンリーダーの利用者は、titleタグのテキストでページの大まかな内容を把握します。
そのため、titleタグが適切でない場合、本文も読み上げて判断しなければならず
ページの内容を理解するのに時間がかかってしまいます。
これを未記入にしたり、すべてのページのtitleタグを同じにするのは避け
以下のように、各ページの内容に即したタイトルをそれぞれ指定します。
悪い例：企業のコーポレートサイト）
<html lang="ja"> <head> <meta content="text/html; charset="utf-8"> <title></title> </head>
良い例：企業のコーポレートサイト）
<html lang="ja"> <head> <meta content="text/html; charset="utf-8"> <title>会社概要 | ○○株式会社</title> </head>
<html lang="ja"> <head> <meta content="text/html; charset="utf-8"> <title>事例一覧 | ○○株式会社</title> </head>
<html lang="ja"> <head> <meta content="text/html; charset="utf-8"> <title>ブログ | ○○株式会社</title> </head>
画像の代替情報を設定する
スクリーンリーダーは画像の代わりに、alt属性の内容を読み上げます。
このためalt属性が指定されていないと、画像の内容を把握できない場合があります。
また、リンクのある画像でalt属性が指定されていないと
リンクのURLをそのまま読み上げてしまうため、内容に即したalt属性を指定しましょう。
悪い例）
<a href="○○.html"><img src="○○.gif"></a>
良い例）
<a href="○○.html"><img src="○○.gif" alt="次ページ"></a>
一方で、画像の内容によっては、alt属性を指定しないほうが良い場合もあります。
以下は、各項目に遷移するURLの前に、アイコンなどの画像を置く場合を想定してみました。
悪い例）
<img src="○○.png" alt="第一章"><a href="○○○○">第一章</a> <img src="○○.png" alt="第二章"><a href="○○○○">第二章</a> <img src="○○.png" alt="第三章"><a href="○○○○">第三章</a>
スクリーンリーダーでは、imgタグのalt属性を読み上げてから
a hrefタグのアンカーテキストを読み上げるため、「第一章」が２回読まれてしまいます。
このように、直前や直後の内容を補足的に示している画像の場合には
alt属性を空にするほうが有効な場合もあります。
良い例）
<img src="○○.png" alt=""><a href="○○○○">第一章</a> <img src="○○.png" alt=""><a href="○○○○">第二章</a> <img src="○○.png" alt=""><a href="○○○○">第三章</a>
選択肢の名称を分かりやすくする
プルダウンメニューやリストボックスで、選択肢の情報と対応する単位が離れている場合、
スクリーンリーダーの利用者は、選択すべきことが分からなくなることがあります。
悪い例）
<select name="month"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> 月
ここでは、月の数字と単位が離れているため、何を選択すればよいか分かりにくくなってしまいます。
以下のように、選択肢に単位を含めて表示することで解決できます。
良い例）
<select name="month"> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> </select>
単語内にスペースや改行を入れない
1つの単語にスペースや改行が入っていると、スクリーンリーダーで正しく読み上げられません。
また、①②③の丸つき文字や、ローマ数字のような機種依存文字も表示が変わってしまうことがあるため
別の文字に置き換えるか、画像で表示するようにしましょう。
悪い例）
<a href="○○○○">第 一章</a> 第<br> 一<br> 章<br>
良い例）
<a href="○○○○">第一章</a> 第一章<br>
スクリーンリーダーで試してみる
良い例のコードを集めたページと、悪い例を集めたページを作って、
実際にスクリーンリーダーで想定通りに読み上げられることを確認しました。
スクリーンリーダーを利用するのは初めてなので、
良い例のページを操作するだけでも難しかったのですが
悪い例のページは、目が見える人が隣にいないと操作できないだろうなと思いました。
良い例のページ）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>会社概要 | ○○株式会社</title> </head> <body> <div> <p>画像の代替情報を設定する</p> <a href="○○.html"><img src="./sample/arrow.jpg" alt="次ページ" width="30" height="30"></a> </div> <br> <div> <div> <img src="./sample/No1.jpg" alt="" width="30" height="30"><a href="○○○○">第一章</a> </div> <div> <img src="./sample/No2.jpg" alt="" width="30" height="30"><a href="○○○○">第二章</a> </div> <div> <img src="./sample/No3.jpg" alt="" width="30" height="30"><a href="○○○○">第三章</a> </div> </div> <br> <div> <p>選択肢の名称を分かりやすくする</p> <select name="month"> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> </select> </div> <br> <div> <p>単語内にスペースや改行を入れない</p> <a href="○○○○">第一章</a> <p>第一章<br></p> </div> </body> </html>
悪い例のページ）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <p>画像の代替情報を設定する</p> <a href="○○.html"><img src="./sample/arrow.jpg" width="30" height="30"></a> </div> <br> <div> <div> <img src="./sample/No1.jpg" alt="第一章" width="30" height="30"><a href="○○○○">第一章</a> </div> <div> <img src="./sample/No2.jpg" alt="第一章" width="30" height="30"><a href="○○○○">第二章</a> </div> <div> <img src="./sample/No3.jpg" alt="第一章" width="30" height="30"><a href="○○○○">第三章</a> </div> </div> <br> <div> <p>選択肢の名称を分かりやすくする</p> <select name="month"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> 月 </div> <br> <div> <p>単語内にスペースや改行を入れない</p> <a href="○○○○">第 一章</a> <p>第<br>一<br>章<br></p> </div> </body> </html>
おわりに
今回スクリーンリーダーについて調べてみて、機能や使い方を初めて知りました。
PC画面を目で見て操作する際には、あまり影響がないと思っていた属性の指定などが
スクリーンリーダーを使用する場合には、情報の理解度に大きく影響することが分かりました。
また、Webサイトを作成する際は、一般的によく使われているものに倣う方が
視覚障害をもつ人にとっては、使いやすいサイトになることが分かりました。
今後、ITはますます生活になくてはならない存在になっていくと思うので、
どのような人にとっても使いやすいサイトにすることを、より意識していきたいと思います。
