画像の「代替テキスト」欄には、何を書けばいい？
代替テキスト・alt
alternative text
画像が伝える情報や、画像のボタンが行うことを、文字で伝えるための説明です。画像の見た目をすべて書くのではなく、そのページで何を伝える画像なのかを考えます。
画像を使う目的から、説明を考える
代替テキストの例
持ち手を畳んだ状態
画像の細部を並べるより、このページで必要な特徴を伝える。具体例
商品の持ち手を説明する写真なら「持ち手を畳んだ状態」など、本文だけでは分からない特徴を書きます。同じ写真でも、別の目的のページでは必要な説明が変わります。
確認する手順
- 画像を使う目的を確認します。情報を伝える写真、操作用のアイコン、飾りだけの画像を分けます。
- 情報を伝える画像なら、読者が知る必要のある内容を短く書きます。画像だけのボタンやリンクは、押すと何が起きるかを伝えます。
- 飾りだけの画像は、HTMLでは空のaltにします。CMSの「装飾画像」設定がある場合は、その扱いを確認します。
- グラフなど説明が長くなるものは、本文や表でも情報を伝えます。公開後は、画像と周囲の文章を合わせて内容が伝わるか確かめます。
間違えやすいこと
空のaltと、alt自体を設定しないことは同じではありません。説明がないと、読み上げソフトがファイル名を読む場合があります。検索語を詰め込む欄でもありません。
公式資料で確かめる
画面や条件は変更されることがあります。お手元の製品・資料や契約書など、ご自身の条件に合う最新情報を確認してください。