ダウンロードした素材をサイトに置くとき、alt 属性に何を書くか迷う場面があります。素材ページの説明文をそのまま貼るのが最善とは限りません。同じ1枚の絵でも、置き方によって書くべきことが変わるからです。実際に1枚を3通りに置いて比べます。
alt には「その画像がその場所で伝えていること」を書く
alt テキストは、画像が表示されない環境や読み上げ環境で、画像の代わりに読まれる文です。書くべきは画像の見た目ではなく、その画像がその場所で伝えている内容です。W3C のアクセシビリティ解説（WAI）は、装飾のための画像には空の alt を使い、隣の文章がすでに内容を説明している画像にも空の alt を使えるとしています。
置き方1：記事の区切りに置いた飾り
「オンライン面接の準備」という記事の見出しの下に、雰囲気づくりとしてこの絵を置いた場合です。
<img src="interview.webp" alt="">属性ごと省略するのとは違います。省略すると、環境によってはファイル名が読み上げられます。空で書くことが「意図的に説明不要とした」という表明になります。
置き方2：手順を説明する図として置いた
「面接は自宅から受けていただけます」という案内の横に置き、絵そのものが「自宅から、パソコンで受ける」ことを伝えている場合です。
<img src="interview.webp" alt="自宅の机からノートパソコンで面接を受ける様子">置き方3：すぐ下にキャプションがある
図の下に「自宅の机からノートパソコンで面接を受ける様子」というキャプションを付けた場合です。同じことを alt にも書くと、読み上げ環境では同じ文が2度続きます。この場合は alt を空にします。
避けたい書き方
<img src="interview.webp" alt="オンライン面接のイラスト"><img src="interview.webp" alt="面接 イラスト 無料 オンライン面接 テレワーク 転職">長さの目安
1文で足りることがほとんどです。詳しい説明が必要な図表なら、本文中に書いて alt からはそちらを参照させます。alt に長文を入れると、途中で止められない読み上げ環境では負担になります。
Visual Hubの素材について
当サイトの素材には日本語・英語・中国語・韓国語の説明文を用意していますが、これは素材を探すためのものです。サイトに置くときは、上のように置いた文脈に合わせて書き直してください。
参考にした資料
- W3C WAI「Decorative Images」
※2026年9月、執筆時点の情報です。