代替テキストとは

代替テキストとは、Webサイト内の画像や動画などの非テキストによる情報伝達手段が機能しなかった場合や、Webサイト利用者が何らかの事情で視覚情報が得られない場合に差し替えて表示する文字情報を指します。

画像に付与するHTML属性のことを特にalt属性と呼び、情報にアクセスする方法を多角化に提供することを目的とします。具体的には視覚障がい者がWebページを読み上げツールを使って閲覧するときには、一般的に写真や図の代わりに代替テキストを読み上げるシステムが採用されます。他にも、通信等の問題により画像が読み込まれなかった場合は代替テキストが表示され、表示されなかった画像の内容を伝達します。

また、代替テキストを設定しておけば、検索結果上で表示される本文を抜粋して表示したスニペットにも反映されるため、ユーザーに対するアプローチにもなります。ただし、文法や文のつながりが切れているように見える状態はユーザーに優しくないため、コンテンツの文章に自然につながるような代替テキストを設定することが推奨されます。

Webアクセシビリティの側面からも代替テキストは非常に重要です。総務省が公開している「みんなの公共サイト運用ガイドライン（2016年版）」では、最低限適合するレベルとして「音声解説又はメディアに対する代替コンテンツ（収録済み）の達成基準」を規定しており、Webサイト運営側が必ず対応することを求めています。例えば、画像や動画には、その内容を簡潔に説明するテキストを付与します。例えば「〇〇株式会社（logo.gif）」というロゴ画像には、alt属性として「〇〇株式会社（alt="〇〇株式会社"）」というテキストを挿入します。写真の場合は、「～の写真」とテキストを入れることで、そこに写真があることを示すことができます。また、読み上げることを考慮して、あまり長くなりすぎない簡潔な表現が適しています。グラフ画像はalt属性として細かな情報をテキストにするよりも、「〇〇のグラフ」と入れ、画像の下に表を記載したほうが親切な構造になります。あまりにも沢山の情報を入れすぎて逆に不明瞭になる、同じテキストが何回も登場してスパム判定されてしまうケースもあるので注意が必要です。

すべての画像に説明テキストを入れる必要はなく、意味を持たない画像には空文字を入れることもできます。装飾目的で入れている画像については、「alt=””」のようにすることで、スクリーンリーダーが不要な情報を読み上げずに済みます。