代替テキスト(alt)の正しい書き方と実例

代替テキスト(alt)とは — 誰のためのものか

代替テキスト(alt)とは、画像の内容や役割をテキストで伝えるためのimg要素の属性です。スクリーンリーダーはこのテキストを音声で読み上げ、画像を表示できない環境(通信障害・画像ブロックなど)ではこのテキストが代わりに表示されます。WCAG 2.1では達成基準1.1.1「非テキストコンテンツ」(レベルA)として定められている、アクセシビリティの最も基本的な要件です。

altの恩恵を受けるのは視覚障害のある利用者だけではありません。検索エンジンやAIは画像そのものを完全には理解できないため、altは画像SEO・AI検索対策としても機能します。「スクリーンリーダーの利用者に伝わるalt」は、そのまま「機械に伝わるalt」でもあるのです。

書き方の4原則

altの書き方は、次の4原則を押さえればほとんどのケースに対応できます。

原則1: 画像が伝えている「内容」を書く

情報を伝えている画像には、その内容が伝わるテキストを書きます。ポイントは「画像を見た人が受け取る情報」を、見られない人にも同じように届けることです。「画像」「写真」「イメージ」といった言葉は、スクリーンリーダーが画像であることを伝えてくれるため原則不要です。

原則2: 装飾目的の画像は空のalt=""にする

背景の飾り、区切り線、雰囲気づくりのための写真など、情報を持たない装飾画像には空の代替テキスト(alt="")を指定します。こうするとスクリーンリーダーはその画像を読み飛ばし、利用者は本来の情報に集中できます。「何か書かなければ」と装飾画像にまで説明を付けると、かえってノイズになります。

原則3: 文字が入った画像は、同じ文言を書く

バナーやロゴなど文字を含む画像には、画像内の文字と同じ文言をaltに書きます。画像内に「初回限定30%OFF」とあるなら、altも「初回限定30%OFF」です。要約や言い換えをすると、見える人と見えない人で受け取る情報がずれてしまいます。

原則4: リンクになっている画像は「行き先」を書く

画像がリンクとして機能している場合、altには画像の見た目ではなくリンクの行き先・目的を書きます。スクリーンリーダーの利用者はリンクを一覧で聞き取りながらページを移動するため、「ロゴ」ではなく「トップページへ」のように、押した結果どこに行くのかが分かる文言にします。

NG例・OK例で見る実践パターン

よくあるケースを、NG例とOK例の対比で確認しましょう。

自社サイトのaltを確認する方法

altの欠落は、機械的なチェックで確実に検出できる代表的な項目です。ブラウザの開発者ツールで1ページずつ確認することもできますが、サイト全体では現実的ではありません。診断ツールを使えば、alt属性がない画像・ファイル名がそのまま入っている疑いのある画像を一括で洗い出せます。

30項目チェックリスト(PDF)では、altを含むWCAG 2.1 AA観点の代表的な点検項目を確認できます。まずは現状を把握し、本記事の4原則に沿って優先度の高い画像から整備していきましょう。対応全体の進め方はアクセシビリティ対応の進め方5ステップで解説しています。