スクリーンリーダー
主に視覚障害のあるユーザーが、Web ページの内容を音声で読み上げるために使うソフトウェアのことです。
※代表例：NVDA・JAWS(Windows)、VoiceOver(iOS / macOS)、TalkBack(Android)
画面の見た目ではなく、裏側の「HTML構造」を上から順に解釈して読み上げるため、正しいタグ付け(見出しや段落など)が品質に直結します。近年は、運転中や家事中など「画面を見られない状況」で利用する一般ユーザーも増えています。
Web 担当者が実務でできる「簡易検証」
完璧なテストは難しくても、以下の方法で「明らかな読み上げの破綻」は検出できます。
- ツールを使う：Mac 標準の「VoiceOver(Cmd+F5 で起動)」や、Chrome 拡張機能「ChromeVox」をオンにして実際にサイトを触ってみる。
- 操作の確認：見出しだけを拾い読みして内容が伝わるか。フォームの送信まで音声案内だけで完結できるかを確認する。
初心者が陥りがちな「7 つの落とし穴」
- 「こちら」リンク：リンクテキストを「こちら」や「もっと見る」にしてしまい、音声だけだと「何のリンクか」が全く伝わらない。
- 見出しのスキップ：見た目のデザインを優先して「H2」の次に「H4」を使うなど、階層を飛ばしてしまい読み上げ順が混乱する。
- アイコンボタンの罠：虫眼鏡アイコン(検索)などにテキストによるラベル(aria-label 等)がなく、音声ソフトが「ボタン」としか読み上げない。
- モーダルの迷子：モーダル(画面の前面に浮かび上がる子ウィンドウ)が開いたことが音声で告知されず、ユーザーが操作不能になる。
- 画像認証(CAPTCHA)の壁：「歪んだ文字を読ませる」などの画像認証が音声に対応しておらず、ログインや送信ができない。
- SPA の画面遷移：SPA(ページ遷移なしで画面が切り替わる仕組み)で、画面が変わったことが音声で通知されない。
- ARIA の乱用：読み上げを補助する「ARIA 属性」をむやみに入れすぎた結果、かえって音声ソフトが混乱してしまう(※正しい HTML タグを優先するのが鉄則です)。
言葉をよく利用する人
- コーダー / フロントエンドエンジニア
- デザイナー
- Web 担当者(発注側)
- ディレクター
会話上での使用例
納品物の検収で読み上げソフトを使って通読した場面
-
Web担当者
VoiceOverでトップページを通して聞いてみたんですが、「もっと見る」というリンクが何度も読み上げられて、何のリンクなのか分からないんです。
-
コーダー
スクリーンリーダーだと前後の文脈が消えてしまうので、リンクテキスト自体を具体的にする必要があります。
-
コーダー
「事例一覧をもっと見る」「お知らせをもっと見る」のように直すか、aria-labelで補足する形で対応しますね。
お問い合わせ完了モーダルの読み上げ仕様を業者と詰める場面
-
Web担当者
お問い合わせ完了のモーダルですが、スクリーンリーダーでちゃんと「送信しました」が伝わっていますか。
-
コーダー
今はaria-liveで動的に告知するようにしています。モーダルが開いた瞬間に読み上げられる作りです。
-
コーダー
心配でしたら、VoiceOverとNVDAで実機テストした動画を提出しますので、それで確認していただけますか。