代替テキスト（alt属性）

解説

代替テキストは、画像の代わりに読み上げられたり表示されたりする文字情報です。Webページでは、HTMLのimg要素のalt属性に書きます。スクリーンリーダーの利用者は代替テキストの読み上げで画像の内容を知り、画像が読み込めない環境では代替テキストが画像の位置に表示されます。WCAG 2.2の達成基準1.1.1（非テキストコンテンツ、レベルA）は、画像などに同等の目的を果たすテキストを用意するよう求めています。

判断基準

代替テキストの書き方は、画像がページの中で果たす役割によって変わります。

• 情報を伝える画像：画像が伝えている内容を短い文で書きます。
• リンクやボタンの画像：画像の見た目ではなく、リンク先や押したときの動作を書きます。
• 文字を含む画像：画像の中の文字を、ページのほかの場所に書いていなければ、代替テキストに書きます。
• 複雑な図やグラフ：代替テキストには要点だけを書き、詳しい内容は本文に書きます。
• 装飾の画像：alt=""と空にして、読み上げの対象から外します。

実務での使われ方

FAQやヘルプ記事のスクリーンショットでは、「設定画面のスクリーンショット」のような画像の種類ではなく、読み手が画像から読み取るべき内容を書きます。たとえば、「画面右上の歯車のアイコンを押すと、設定メニューが開きます。」のように書きます。さらに、Googleは代替テキストを画像の主題の理解に使っているため、内容に合った代替テキストは画像検索にも役立ちます。

注意点

alt属性を省略すると、スクリーンリーダーが画像のファイル名を読み上げる場合があります。そのため、装飾の画像でもalt属性自体は省略せず、空の値を指定します。また、検索順位を目的にキーワードを並べる書き方は、読み上げを聞く利用者の妨げになるうえ、Googleもスパムとみなされる可能性があるとしています。