画像のaltは何を書く？同じ写真でも説明が変わる理由。

01 / 05

写真を見せる目的から、必要な説明を選ぶ

代替テキストは、画像が伝える意味や機能を文字で表すものです。W3C WAIの判断フローは、情報を伝える画像、リンクやボタンとして機能する画像、装飾的な画像などを分けて考えています。見えている物の一覧を、機械的に書けばよいわけではありません。 ^[1]

たとえば店の入口の写真を、来店前の案内に使うとします。必要なのは「建物、ドア、植木鉢」という一覧ではなく、入口の場所や、確認できる段差などの情報かもしれません。ただし、写真だけでは判断できない寸法や、施設の利用条件まで推測して書かないようにします。

02 / 05

同じ入口の写真を、三つの場所で使うとしたら

どれも写真の内容が変わったわけではありません。変わったのは、そのページに置く目的です。「何が写っているか」に加え、「この画像がなかったら何が伝わらないか」を考えると、書く内容を絞れます。

03 / 05

「altを空にする」と「altを付けない」は違う

装飾として扱う画像は、HTMLでは alt="" のように空の値を指定する方法があります。属性そのものを省略することとは異なります。編集画面で空欄にした場合に、実際のHTMLがどうなるかは、使用するテーマや部品によって確認が必要です。

本文にも画像にも同じ情報を繰り返すと、読み上げる際に冗長になることがあります。一方、空にしてはいけない情報まで消すと、画像を見られない人に内容が届きません。空欄かどうかだけで正誤を決めず、周囲の文章と合わせて判断します。

04 / 05

図解の内容を、短いaltに全部詰め込まない

料金の比較図、複雑な手順、グラフなどは、一行の説明では内容を伝えきれないことがあります。短い説明で図の概要を示したうえで、数値や手順を本文や表でも読めるようにする方法があります。W3C WAIも、複雑な画像には内容を説明する補足を用意する考え方を示しています。 ^[2]

Webページに案内チラシの画像だけを貼る場合も、開催日、場所、申し込み方法を本文へ書くと、画像を拡大しなくても必要な情報を読めます。画像を美しく見せることと、情報を文字で読めるようにすることは、両立できます。

05 / 05

AIに任せるなら、掲載する文脈も渡す

この画像を、Webサイトのアクセス案内に使います。
周囲の本文：［実際の文章を入れる］
目的：初めて来る人が入口の位置を理解できること。

画像から確認でき、本文にない情報を選んで、短い代替テキスト案を作成してください。
寸法、住所、利用できる設備など、画像だけで判断できないことは補わないでください。
説明が不要な装飾画像と考える場合は、その理由を本文との関係から説明してください。

これは依頼の例です。AIが作った案も、画像と本文に照らして確認します。画像だけを渡して「altを書いて」と頼むより、使う目的を添えた方が、必要な情報を検討しやすくなります。