画像
Web ページでは多くの画像が使われます。画像のようにテキストではない情報を使用する際は、スクリーンリーダーのような非ビジュアル環境を使用しているユーザーを考慮する必要があります。
画像の代替テキスト
スクリーンリーダーではテキスト情報しか読み取ることができません。そのため、HTML の <img> 要素には、 代替テキスト を提供するための alt 属性があります。
- ページの文脈にあわせて、画像の内容を説明する簡潔なテキストを代替テキストとして指定してください
- 画像が装飾目的で配置され、ページの内容を理解するのに不必要な場合は、空の
alt属性（alt=""）を指定してください- 単なるアイキャッチとしてイラストやアイコンが置かれている場合などが該当します
- いかなる場合も、
img要素にはalt属性の指定が必要ということになります
<svg>要素など、<img>要素以外で画像を扱う場合にはaria-label属性やaria-labelledby属性を使用します- 代替テキストは、
alt属性から、「 altテキスト 」と呼ばれることがあります
良い例: 画像に代替テキストが指定されている
悪い例: 代替テキストの指定がない
悪い例: 代替テキストが間違っている
関連するチェック
情報や機能性を持たない画像
アイキャッチとして使用されるアイコンのように、情報や機能性をもたず単なる装飾として配置される画像には、代替テキストを指定するべきではありません。
<img> 要素では alt="" （alt 属性を空にする）、<svg> 要素では aria-hidden="true" をつけるなどして、スクリーンリーダーを使う人からは無視されるようにする必要があります。
良い例: 意味を持たないアイコンがスクリーンリーダーから無視されるようになっている
毎日のルーティンを見直して新しい自分を発見しましょう！
悪い例: 意味をもたないアイコンに代替テキストが付与されている
毎日のルーティンを見直して新しい自分を発見しましょう！
関連するチェック
画像化されたテキスト
特定の書体を使いたかったり、装飾をしたかったりする関係で、画像化されたテキストが使われる場合があります。
そもそも、テキストの画像化はされるべきではありません。画面を拡大して使うユーザーにとって、画像となっている部分の文字は拡大するとギザギザになってしまうと読みづらいからです。 ロゴやバナー、図や写真のなかの文字を除いて画像化されたテキストを使うべきではありません。
どうしても画像化されたテキストを使う必要がある場合には、ほかの画像と同じく代替テキストを正しく指定するようにしてください。
良い例: 画像化されたテキストを使用していない
NVDA でアクセシビリティ チェック
良い例: 画像化されたテキストに書かれた文字が、代替テキストにも指定されている
悪い例: 画像化されたテキストに代替テキストがない
悪い例: 画像化されたテキストの代替テキストが間違っている