HTMLのalt属性の意味｜書かない場合と空にした場合の違い

「altは画像の説明を書く欄で、空にしても書かなくても同じだろう」。ブラウザに画像が表示されている間は、altの中身が画面に出ないので、どちらにしても見た目は変わりません。ところが、HTMLの仕様では、alt属性を書かない画像と「alt=""」と空にした画像は、逆の意味を持ちます。空は読み飛ばしてよい画像、書かないのは代わりの文が無い大事な画像です。

本記事では、altの意味から、書かない場合と空にした場合の違い、画像の役割ごとの書き分けまで、SEO対策を手がける会社の視点で、imgタグの記述例を使って順を追ってお伝えします。

altの意味とimgタグでの役割

altは、HTMLのimg要素に書く属性で、画像を見られない人や画像が表示されない環境のために、画像の代わりになる文を指定します。altは英語のalternative（代わり）の略で、「オルト」と読みます。

<img src="penguin.jpg" alt="海岸に立っているイワトビペンギン">

画像の代わりにaltの文が使われるのは、読み上げソフトでページを聞いているときや、通信を節約するために画像を非表示にしているとき、画像のファイルが壊れているときなどです。

altに何を書くかについて、HTMLの仕様は、すべての画像をaltの文に置き換えても、ページの意味が変わらないことを最も一般的な決まりとしています。画像を入れられなかったら何と書いたかを考えればよい、とも仕様は書いています。

MDNは、画像の直前に「旅行中、小さくてかわいい動物を見つけました」という文がある例を挙げています。altが「画像」だと、読み上げソフトは前の文に続けて「画像」と読むだけで、意味が通りません。altが「海岸に立っているイワトビペンギン」なら、前の文とつながって、画像と同じ内容が伝わります。

※ 出典：HTML Standard「Requirements for providing text to act as an alternative for images」

※ 出典：MDN「<img>: 画像埋め込み要素」

alt属性を書かない場合と空にした場合の違い

alt属性を書かない画像と「alt=""」と空にした画像は、画面に画像が出ている間は見た目が同じですが、HTMLの仕様では逆の意味を持ちます。altに文を書いた場合も含めると、3つの書き方の違いは次のとおりです。

altを空にした場合

「alt=""」は、画像が装飾か、近くの本文と同じ内容を補うだけで、飛ばしても読者が失う情報が無いことを示します。Webアクセシビリティの指針であるWCAGの達成方法H67も、title属性を付けずにaltを空にした画像は、無視してよい画像だと読み上げソフトなどに伝わると説明しています。

<a href="/help/"><img src="help.png" alt=""> ヘルプ</a>

アイコンの隣に「ヘルプ」という文字があるリンクでは、アイコンのaltを空にします。altにも「ヘルプ」と書くと、読み上げソフトが同じ言葉を2回読むことになるためです。

alt属性を書かない場合

alt属性を書かないimgタグは、HTMLの仕様では「内容の大事な部分かもしれないが、代わりの文が用意されていない画像」を表します。MDNによると、読み上げソフトの中には、altの代わりに画像のファイル名を読み上げるものがあります。

<img src="IMG_0123.jpg">

ファイル名だけの画像は「IMG_0123.jpg」と読まれることがあり、読者には何の画像かが伝わりません。Googleも画像SEOのページで、alt属性の無いimgタグを悪い例に挙げています。Googleは代替テキストを、画像についての情報を伝える最も重要な属性と位置づけています。

Web担当者

CMSの代替テキストの欄を空のまま公開した画像は、「alt=""」になっているんでしょうか。それとも、alt属性そのものが無いんでしょうか。

Writers-hub
編集部

どちらで出力されるかはCMSやテーマの作りで決まるので、公開後のページのソースで確かめてください。imgタグに「alt=""」と出ていれば空、altという文字が無ければ属性なしです。どちらでも、情報を伝える画像なら文を書き足します。

※ 出典：HTML Standard「The img element」

※ 出典：WAIC「H67: 支援技術が無視すべき画像に対して、img 要素の alt テキストを空にして、title 属性を付与しない」

※ 出典：Google 検索セントラル「Google 画像検索 SEO ベスト プラクティス」

画像の役割ごとのaltの書き分け

altに文を書くか空にするかは、画像に何が写っているかではなく、ページの中で画像が果たしている役割で決まります。HTMLの仕様は、同じ紋章の画像でも、置き方によって適切なaltが変わる例を挙げています。

<p>出身地：<img src="carouge.svg" alt="カルージュ"></p>
<p><img src="carouge.svg" alt=""> カルージュに住んでいました。</p>

「出身地：」に続く紋章は町の名前の代わりになっているので、altに町の名前を書きます。「カルージュに住んでいました。」の直前の紋章は、すぐ後に町の名前があるので、altを空にします。

altを空にする画像

HTMLの仕様がaltを空にするよう求める画像は、次の5つです。どれか1つに当てはまれば、空にします。

• 隣に同じ意味の文字があるアイコンやロゴ
• 近くの本文と同じ内容を図や絵で示した画像
• 本文では触れていない装飾の画像
• 1枚の絵を分割した画像のうち、代わりの文を書いた1枚以外
• 計測用など、利用者に見せるためではない画像

利用者に見せるためではない画像には、ページビューの計測に使うimgタグが当たります。HTMLの仕様は、計測用のimgタグには空のaltに加えて、幅と高さを0にするよう書いています。

<img src="counter.gif" alt="" width="0" height="0">

altに文を書く画像

altに文を書くのは、画像を消すと読者が情報や操作の手がかりを失う画像で、書く中身は画像の役割で変わります。

中身が画像だけのリンクは、とりわけ見落とされがちです。HTMLの仕様は、文字が無く画像だけが入ったリンクやボタンでは、リンクやボタンの目的が伝わる文をaltに書かなければならないとしています。altを空にすると、行き先を伝える文がリンクのどこにも無くなるため、中身が画像だけのリンクは、altを空にしません。

写真や図解のaltに何をどこまで書くかは、alt属性とは何か｜代替テキストの書き方と、空にしてよい画像の見分け方で画像の種類ごとに扱っています。

※ 出典：HTML Standard「Requirements for providing text to act as an alternative for images」、HTML Standard「The img element」

※ 出典：WAIC「H30: a 要素のリンクの目的を説明するリンクテキストを提供する」

alt属性を書かなくてよい場合

alt属性を書かずに済ませてよいのは、代わりの文を用意できず、これからも用意できない画像だけです。HTMLの仕様は、ライブカメラの画像や、代わりの文の無いまま利用者が投稿した写真のように、ページを作る側が代わりの文を手に入れられない場合を挙げています。

代わりの文が無い画像でaltを省くときも、次の2つのどちらかを満たす必要があります。

• figure要素の中に画像だけを置き、figcaption要素でキャプションを付ける
• title属性に、空でない文を入れる

ただし仕様は、マウスを重ねないとtitle属性を表示しないブラウザが多いため、title属性に頼ることを勧めていません。書き手が少しでも代わりの文を用意できるなら、altを省くことは認められず、手間を理由に省くこともできないとしています。自社のサイトや記事の画像は、置いた人が画像の役割を知っているので、altを省いてよい例外に当たりません。

altのよくある質問

altを書くときに出てきやすい疑問は、title属性、CSSの背景画像、SVGの扱いの3つです。

titleにもaltと同じ文を入れる？

title属性に、altと同じ文を入れる必要はありません。MDNは、altの文をtitle属性に複製すると、読み上げソフトが同じ説明を2回読む場合があるため、避けるよう書いています。画像にキャプションを付けたいときは、figure要素とfigcaption要素を使います。

CSSの背景画像にaltは要る？

CSSの背景に指定した画像には、altを書く場所がありません。HTMLの仕様は、サイト全体のデザインに使う装飾の画像はCSSで指定するよう書いており、GoogleはCSSの画像をインデックスに登録しません。情報を伝える画像や画像検索に出したい画像は、img要素で置いてaltを書きます。

インラインのSVGにはどう書く？

HTMLの中に直接書いたsvg要素にはalt属性が無いため、Googleはsvg要素の中にtitle要素を書く方法を挙げています。img要素でSVGのファイルを読み込む場合は、ほかの画像と同じくaltを書きます。

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">エプロンを着けてパンケーキを焼くロボット</title>
</svg>

まとめ｜altは画像の役割に合わせて書くか空にするか決める

altは、画像を表示できないときに画像と入れ替わる文です。altには、画像の説明ではなく、画像を消したときに欠ける内容を書きます。「alt=""」は読み飛ばしてよい画像、alt属性なしは代わりの文が無い大事な画像を表すので、見た目が同じでも、空にするのと書かないのとでは逆の意味になります。

装飾の画像と、近くの本文と同じ内容の画像は空にします。中身が画像だけのリンクにはリンク先を、文字入りの画像には同じ文字を書き、公開後はNu Html Checkerでalt属性の抜けたimgタグが残っていないかを確かめてください。

私たち合同会社Writers-hubは、滋賀のSEO対策で、サイトの現状の分析と設計から、毎月の報告と見直しまでを受け持っています。