miChecker詳細解説！音声ユーザビリティ&ロービジョンビューの使い方

前回、ウェブアクセシビリティ評価ツール「miChecker」でできることや導入方法、基本的な使い方について解説いたしました。

「miCheckerを導入してみたけれど、画面の見方がよくわからない…」
という方も少なくないのではないでしょうか。
miCheckerの見方を覚えることで、効率的にアクセシビリティ対策を進めることができます。

そこで、今回はmiCheckerを使って評価実行した際に表示される結果画面の見方について、詳しく解説していきたいと思います。

関連記事

ウェブアクセシビリティを強化！miCheckerの機能・導入・使い方を徹底解説

「音声ユーザビリティ」ビューの見方

スクリーンリーダーでの閲覧をイメージしながら確認する

「音声ユーザビリティ視覚化」を実行すると、スクリーンリーダーなどの支援技術を用いてページを閲覧した場合に、読み上げられる情報を視覚的にシミュレーションした結果が「音声ユーザビリティ」ビューに表示されます。

ここでは、画像や動画などの非テキストコンテンツは代替テキスト（alt属性の値など）のみが表示され、画像自体は表示されません。
また、テーブル構造以外の視覚的な表現（要素の配置や形状、文字色、背景色などの装飾的な情報）は適用されない状態で表示されます。

こうしてスクリーンリーダーで読み上げられる情報のみを読んで、ページの内容が正しく理解できるかどうか確認していきます。

情報に到達するまでに必要となる時間の予測

スクリーンリーダーは基本的にはページの冒頭から順に読み上げて行くため、ページの構造や情報量によっては、ユーザーが目的の情報に到達するまでに時間がかかってしまうことがあります。

「音声ユーザビリティ」ビューでは、スクリーンリーダーの利用者がページ内のそれぞれの情報に到達するまでに必要な時間の予測を、画面の明るさで表現しています。

ページ冒頭から離れていくほど（到達するまでに時間のかかる箇所ほど）、暗い背景色で表示されます。

見出しやページ内リンクなどが設定されている箇所は、ユーザーがスクリーンリーダーの機能を用いて容易にアクセスできる箇所のため、ページの途中でも再び明るく表示されます。

必要に応じてページ内リンクを設置したり、セクションの冒頭に見出しを配置することで、スクリーンリーダーの利用者にも目的の情報に早く到達できるようになります。

マークアップを確認する

ランドマーク（目印）を確認する

「音声ユーザビリティ」ビューでは、ランドマーク（目印）となる要素が設定されている箇所にアイコンが表示されます。青線で囲われた範囲が、そのランドマークに属する内容となっています。

ランドマークが指定されていると、スクリーンリーダーなどの支援技術を利用している場合に、メインコンテンツやヘッダー・フッター、記事など、それぞれのブロックへ移動することが容易になります。

ランドマークは種類によって役割が異なります。
以下の表を参考に、ランドマークが設定されている区画と内容がふさわしいものになっているかどうか、確認してください。

見出しを確認する

スクリーンリーダーは、ページ内に設定された見出し（h1〜h6タグ）を順に読み上げる機能を持っています。
見出しが適切に設定されていれば、スクリーンリーダーを利用しているユーザーは本の目次を読むようにページの概要を理解できるようになります。

「音声ユーザビリティ」ビューでは、見出しに設定された箇所は背景色が水色で表示されます。
水色背景で表示されている見出し部分にマウスを当てると、見出しのレベル（h1〜h6）も表示されます。
見出しのみを読み上げた時や見出しから見出しへ移動した時に、本の目次のように利用できるようになっているかどうか、確認してください。

ページ内リンクを確認する

ページ内リンクが設定されている箇所は、青い矢印のアイコンが表示されます。

リンク元はスタート地点を示す「|→」のアイコンが表示され、

リンクの遷移先は到達地点を示す「→|」のアイコンが表示されます。

これらのアイコンをクリックすると、リンク元からリンクの参照先までが赤い矢印で繋いで表示され、リンクの参照関係を視覚的に確認することができます。

入力フォームとラベルの確認をする

ユーザーに入力を促す入力フォームとその項目名や説明を記載したラベルを関連付けすることで、スクリーンリーダーの利用者にもフォームの内容を理解しやすくなったり、細かな操作が苦手なユーザーであっても入力項目の選択が容易になったりします。

ラベルが設定されている箇所は背景がピンク色で表示されます。
この場合は、ラベルと入力フォーム（上図の場合はオレンジ色で表示されているテキスト入力箇所）との関連付けが正しくされているかどうか、またラベルの内容が適切なものであるかどうかを確認してください。

一方、ラベルが設定されていないと、背景は何も色がつかずに表示されます。
ラベルが設定されていないと、スクリーンリーダーの利用者は何を入力すれば良いのか正しく判断がつかないことがあります。
入力フォームが何を入力するものなのか、正しく判断できるようなラベルを設定するようにしてください。

アクセシビリティの問題がある箇所を確認する

上図のように、「音声ユーザビリティ」ビュー内に赤い「！」マークが表示されていることがあります。
これはその箇所に明確なアクセシビリティ上の問題があることを示しています。
「！」マークが表示された時は「！」マークの表示された箇所にカーソルを当てると、問題の内容を確認することができますので、表示された内容を参考に対応を行ってください。

「詳細レポート」を確認する

「詳細レポート」には、問題のある箇所や人の目で確認が必要な箇所などが一覧表示されています。
左側に黄色の星アイコンがついた項目は該当する箇所が明確な項目になります。
星アイコンがついた項目を選択すると、「音声ユーザビリティ」ビュー内の該当箇所がハイライト（黄色の背景色）で表示されます。

また「詳細レポート」では、項目ごとに問題の度合いが「問題あり」「問題の可能性大」「要判断箇所」「手動確認」の4種類のアイコンで分類されて表示されます。

このうち「問題あり」のアイコンが表示された項目は対応が必須となります。

その他の項目については、「内容」欄を参考に検証を行い、必要であれば対応を行なってください。

「ロービジョン」ビューの見方

ロービジョンユーザー（弱視者や高齢者）の閲覧をイメージしながら確認する

画面左側が元のWEBページ、右側がロービジョンユーザー（弱視者や高齢者）にとっての見え方になります。
見比べると、かなりコントラストが低く見えることがわかります。
この機能を用いれば、新規ページやリニューアルするページについて、ロービジョンユーザーに見えづらいページになっていないかどうか検討することができます。

設定ボタンから、視力の程度・色覚異常のタイプ・水晶体透過率（年齢）の設定をそれぞれ切り替えてシミュレーションを行うこともできます。

ロービジョンの問題点について確認する

色覚的な問題は人の目だけでは適切かどうか判断がしにくいものですが、「miChecker」を利用すれば、ロービジョンユーザーのことも考慮した客観的な視点で評価を行い、問題点の洗い出しが可能です。

「音声ユーザビリティ視覚化」を行なった時同様に「ロービジョンシミュレーション」を行なった場合も、検出された問題点や確認すべき点が画面下部の「詳細レポート」内に一覧表示されます。

「ロービジョンシミュレーション」の「詳細レポート」では、以下の表のようにアイコンで問題の種別が区分されています。

「音声ユーザビリティ視覚化」の時と同様に、左側に黄色の星アイコンがついている項目を選択すると、「ロービジョンシミュレーション」内の該当箇所が矩形枠で囲われて表示されます。

また、「詳細レポート」には「深刻度」の項目もあります。
深刻度の数値が高いほど、問題解決の優先度も高くなります。

まとめ

「miChecker」のシミュレーション結果や評価について正しく理解し、具体的な改善策を検討したり実行することで、障害を持った方や高齢者も含めたすべてのユーザーにとって、より使いやすいWEBサイトを作成することが可能です。

ウェブアクセシビリティは、技術的な側面だけでなく、社会的な責任でもあります。
すべての人に平等な情報提供を行うためにも、miCheckerを活用し、アクセシビリティの向上に努めていきましょう。