概要
代替テキストとは、ページのコード内で画像に付けられた短い説明文で、視覚障害や弱視の訪問者が画像を直接見ることができないため、スクリーンリーダーが画像そのものの代わりに音声で読み上げるものです。SEO重視の代替テキストガイドでは、この同じ属性が検索エンジンによる画像発見にどう役立つかを見ていますが、こちらの角度は、晴眼の訪問者が単に写真を見るだけで得る情報と同じものにアクセスするために代替テキストに頼っている実在の人にとって、それが何を意味するかに特化しています。
この区別は実際に重要です — 純粋に画像検索で上位表示するために書かれた代替テキストは、画像が実際に何を示しているかを真に説明するのではなく、キーワードで埋め尽くされてしまうことがあり、これは技術的には要件の文言を満たしていても、スクリーンリーダー利用者には十分に機能しません。
重要な理由
スクリーンリーダー利用者にとって、代替テキストのない画像は完全にスキップされるか(存在しないかのように)、「IMG_4821.jpg」のような役に立たないファイル名として読み上げられるかのどちらかです — いずれにせよ、その画像が晴眼の訪問者に伝えるはずだった情報は単純に失われます。これは、画像が意味のあるコンテンツを運んでいるときに深刻な障壁になります — データを示すグラフ、プロセスを説明する図、周囲のテキストのどこにも記述されていない機能を示す製品写真などです。
これはまた、多くの企業が遵守を求められるWCAG(ウェブコンテンツアクセシビリティガイドライン)のような基準の下で、多くの状況における法的なアクセシビリティ要件でもあります — しかし、これを純粋にコンプライアンスのチェック項目として扱うことは、実在の訪問者にとっての本物の日常的なアクセス問題を解決しているという要点を見逃しています。
修正方法
- 実際の情報を伝えるすべての画像について、それを見ることができない誰かに電話で説明するかのように、実際に何が示されているかを説明する代替テキストを書きましょう。
- 説明は簡潔かつ具体的にしましょう — 通常は1文か短い句で十分です。周囲のテキストですでに与えられている情報を繰り返すのは避けましょう。
- 情報を追加しない純粋に装飾的な画像(背景のテクスチャ、区切り線など)には、空の
alt=""を使用し、スクリーンリーダーが意味のないものを読み上げるのではなく、完全にスキップするようにしましょう。 - それ自体がリンクである画像(ホームページにリンクするロゴなど)については、画像の見た目だけでなく、リンクがどこにつながるかを説明する代替テキストを書きましょう。
- 書いたテキストが声に出して読んだときにうまく聞こえると想定するのではなく、無料のスクリーンリーダー(NVDA、VoiceOver)でテストして、画像が実際にどう読み上げられるかを聞きましょう。