Webサイトの画像に代替テキストを付ける基本

1. 画像が何の役割かを決める

情報を伝える

作品のプレイ画面など、その画像で伝えたい特徴を短く説明。

リンクやボタン

画像だけが操作の入口なら、移動先や実行される操作が分かる名前を付ける。

装飾・重複

意味のない飾りや周囲の文字と同じ内容なら、空のaltが適切な場合がある。

複雑な図

画像だけでなく、本文や表でも必要な情報を説明する。

同じ画像でも使う場所によって必要な説明が変わります。すべての画像へ長い説明を機械的に入れるのではなく、ページ上の役割で決めます。

2. ファイル名を意味のある説明へ変える

修正前：game-shot-01.png
作品画像の例：夜の神社で、提灯の妖怪が仲間と敵を囲むプレイ画面。
画像だけのリンクの例：作品Aの紹介・遊び方を開く。

これは書き方の例で、画像に写っていない情報を足すものではありません。雰囲気を伝える写真か、操作方法を説明する画像かで、残す内容を変えます。

隣の文章と同じ説明が何度も読まれないかも見ます。空のaltを使うことと、alt属性自体を省くことは別です。図表の数値や比較結果は短いaltだけに詰め込まず、本文にも残します。

3. 周囲の文章と読み上げで確認する

画像がなくても、作品やリンク先を理解できるかを確認します。スクリーンリーダーでも、画像名やリンク名が不自然に重複しないか、操作の目的が分かるかを試します。

自動検査でaltの有無が分かっても、その文章が画像の意味に合っているかは内容の確認が必要です。公開後に画像を差し替えたら、説明も見直します。

2026年10月19日確認。役割による判断はW3C WAI：altの判断手順を参照しています。この記事だけでサイト全体のアクセシビリティ適合を保証するものではありません。