画像のalt属性とは？書き方・空にする画像の使い分けを実例で解説

alt属性は「画像の代わりになる言葉」

altは「alternative text（代替テキスト）」のための属性です。画像を見られない、画像が読み込まれない、音声読み上げを使っているといった場合に、画像が担っている情報や役割を文字で受け取れるようにします。

WCAG 2.2では、画像などの非テキストコンテンツに、原則として同じ目的を果たすテキストによる代替を用意することが求められています。HTML Standardでも、ページ内の画像をaltの文字へ置き換えたときに、ページの意味が変わらないことが基本的な考え方として示されています。

ここで大事なのが、「写真に何が写っているか」だけを書けばよいわけではないことです。院長の写真でも、スタッフ紹介なら名前や役割が重要かもしれません。院内の雰囲気を伝えるページなら、表情や服装より「相談しやすい雰囲気」が伝えたい情報かもしれません。

altは画像の実況中継ではなく、その画像がページで果たしている意味の代役です。

迷ったら、3つの質問で判断する

W3Cのalt決定木を、日常の更新作業で使いやすい形にすると、次の順番で考えられます。

この順番にすると、「画像があるから、とりあえず何か書く」から抜け出しやすくなります。altを書くかどうかは画像の種類ではなく、そのページでの役割で決まります。

意味のある画像は、必要な情報を短く書く

意味のある画像とは、その画像がなくなると、ページで伝わる情報が減ってしまう画像です。商品写真、院内設備、スタッフ、地図、手順図などが当てはまります。ただし、写っているものを端から端まで説明する必要はありません。

「きれいな待合室」「おいしそうな料理」のように、見る人の感想だけで終わると、情報としては少しふわっとします。ページで伝えたい特徴を選び、簡潔に書く方が役立ちます。

一方、グラフ、料金比較、アクセス図など、情報量が多い画像をaltだけで全部説明しようとすると、とても長くなります。複雑な画像は、要点をaltに書き、詳細は画像の近くに通常の文章や表として用意します。altだけが突然、小論文になるのは避けたいところです。

装飾画像はaltを空にする。省略とは別です

区切りの波線、背景の葉っぱ、見出し横の小さなイラストなど、なくなっても情報や操作に影響しない画像は装飾画像です。この場合は、alt=""と空にします。

<img src="wave-line.svg" alt="">

空のaltを指定すると、スクリーンリーダーなどの支援技術は、その画像を基本的に読み飛ばせます。飾りのたびに「青い波線」「小さな葉のイラスト」と読み上げられると、本文に着く前にちょっとした音声行列ができます。

注意したいのは、alt=""と、alt属性そのものを書かないことは同じではない点です。altを省略すると、環境によってファイル名やURLが読み上げられることがあります。

装飾画像は「説明が思いつかないから空」ではなく、「伝える情報がないので意図して空」にします。

リンク画像・ボタン画像は「見た目」より行き先や動作を書く

画像だけで作られたリンクやボタンは、画像の説明ではなく、その操作で何が起きるかをaltに書きます。虫眼鏡の画像なら「虫眼鏡」ではなく「サイト内検索」、電話の画像なら「受話器」ではなく「電話をかける」といった考え方です。

<a href="/reservation/">
  <img src="button-reserve.webp" alt="Web予約へ">
</a>

ロゴ画像だけがトップページへのリンクになっている場合も、単に「ロゴ」ではなく、サイト名と行き先が分かるようにします。

<a href="/">
  <img src="logo.svg" alt="KU NEL WEBLE トップページ">
</a>

反対に、リンク内に「Web予約」という文字がすでにあるなら、隣のアイコンはalt=""にできます。リンク全体を画像なしで読んでも、行き先や操作が分かる状態を目指します。

画像内に文字があるなら、同じ情報を文字でも届ける

バナー、休診案内、キャンペーン画像など、画像の中だけに文字を入れると、画像を見られない人には内容が届きません。基本は、見出しや案内文をHTMLの文字で作り、CSSで見た目を整える方法です。文字サイズを変更しやすく、検索やコピーもしやすくなります。

ロゴや、デザイン上どうしても画像として使う必要があるものを除き、文字を画像化しなくても表現できるなら、通常の文字を選ぶ方が扱いやすくなります。

画像内文字を使う場合は、画像に書かれた重要な文言をaltに含めます。ただし、日時・料金・注意事項が多い場合は、altへ詰め込まず、画像の近くに同じ内容を通常の文章で掲載します。

よくある間違い。altはSEOキーワード置き場ではありません

Googleは、altとページ本文などを使って画像の内容を理解すると説明しています。ただし、検索キーワードを不自然に並べる方法は、利用者にとって読みにくく、スパムと判断される可能性もあります。アクセシビリティとSEOのどちらから見ても、画像の文脈に合った自然な説明が基本です。

WordPressで画像を追加するときの確認手順

WordPressのメディア画面に代替テキスト欄があっても、機械的に埋めれば終わりではありません。同じ画像を別ページで使うと、必要なaltが変わることもあります。更新時は次の順番で確認すると迷いにくくなります。

1. この画像がなくなると、情報や操作が欠けるか
2. 近くの見出し・本文・キャプションですでに説明されていないか
3. リンクやボタンなら、行き先・動作が文字で分かるか
4. 長い説明が必要なら、本文や表にも情報を出せないか
5. 画像を非表示にした状態でも、ページの意味が通るか

うぇぶわんこ

つまり、代替テキスト欄を全部埋める大会ではないんですね。空欄にも、ちゃんと理由があるワン。

さとけん

その通りです。書くことより、判断することが大切です。画像・文章・リンクをまとめて設計すると、更新する人も迷いにくくなります。

KU NEL WEBLEでは、公開時にaltを入れるだけでなく、更新担当者が「どの画像は説明し、どの画像は空にするか」を判断しやすい構成も意識しています。毎回専門用語とにらめっこしなくても運用できることは、長く使うサイトでは地味に効いてきます。

参考情報

この記事では、W3CのImages Tutorial・alt決定木・WCAG 2.2、HTML Standard、Google Search Centralの公開情報をもとに、Web担当者や初級制作者向けに要点を整理しました。

• W3C WAI「Images Tutorial」
• W3C WAI「An alt Decision Tree」
• W3C WAI「Decorative Images」
• W3C WAI「Functional Images」
• W3C WAI「Understanding Success Criterion 1.1.1: Non-text Content」
• W3C WAI「Understanding Success Criterion 1.4.5: Images of Text」
• WHATWG「HTML Standard: Images」
• Google Search Central「Image SEO Best Practices」