We are ACORN!

プログラムやサーバーの設定など、技術的な記事を載せております。

HTMLコーディング プログラミング

実際的なimgタグのalt属性の付け方

投稿日:2025-07-22 更新日:

HTMLでコーディングするときにimgタグのalt属性をいい加減に付けてしまいがちです。
多くの方はalt属性を「画像が読み込まれなかった時に表示するテキスト」という認識を持っています。
しかしこのalt属性は目の見えない方には大変重要な役割があります。
その点を考えつつ、どのように付けるのか考えてみましょう。

WHATWG HTML Living Standardのalt属性のところには次のように書かれています。

the intent is that replacing every image with the text of its alt attribute does not change the meaning of the page.

日本語にすると

すべての画像をその`alt`属性のテキストに置き換えても、ページの意味は変わらないという意図です

となっています。
つまり「画像がコケても目の不自由な方がスクリーンリーダーで読んでも全く同じに伝わる」ということですね。

MDNでも同様に

alt属性は画像のテキストによる説明で、必須ではありませんがアクセシビリティのために非常に有用です。スクリーンリーダーがこの説明を読み上げることで、画像が何を表すかをユーザーが知ることができます。

と書かれています。

 

ではどのようにalt属性を付ければいいのでしょうか?
W3CのWeb Accessibility Initiativeにいい指針がありました。
An alt Decision Tree(alt決定ツリー)という記事になります。

上から下に向かって質問にはい・いいえで選択していく表になっています。
ざっと日本語にすると・・・

・その画像は文字を含んでいるか?
  ・その画像のそばに画像内と同じ「本当の」テキストもあるか?
    ・alt属性は “” を使う
  ・画像は純粋に装飾目的か?
    ・alt属性は “” を使う
  ・画像には固有の機能があるか?(例:アイコン)
    ・alt属性はその機能を伝える文字を入れる
  ・画像内の文字は他のどこにもない
    ・alt属性は画像内の文字をそのまま使う
・その画像はリンクまたはボタンで、その画像がないとリンク/ボタンを押すのが困難か?
  ・alt属性はリンク先の情報か、ボタンを押すアクションを伝える文字を入れる
・その画像はそのページや、書いてある文脈に意味を与えているか?
  ・アイキャッチ目的の画像やイメージ写真
    ・alt属性は意味が伝わるような画像の簡単な説明を使う
  ・グラフや複雑な情報を表している
    ・ページ内の別の個所に情報を含めましょう
    (alt属性は何の情報かの簡単な説明でよい)
  ・その画像と重複するテキストが近く書いてあるか?
    ・alt属性は “” を使う
・その画像はユーザーに何かを指示したりしておらず、純粋に装飾だけが目的ですか?
  ・alt属性は “” を使う
・上記以外はhttps://www.w3.org/WAI/tutorials/imagesを見よう

となっています。
それぞれのシーンでどうすべきかが分かります。

(チャートにしてみました。クリックすると別ページで表示します)
alt決定ツリーチャート図

ここで問題になるのは、画像の意味や役割などをaltに入れる必要があるときです。
クライアントから「適当に付けて」と言われているなら、自分が考えうる最良のものを付ければ良いと思います。
そうでない場合は、クライアントに確認すべきでしょう。

 

できるだけalt属性は分かりやすく付けて、目の見えない方にも優しいページを作りたいものですね。

-HTMLコーディング, プログラミング


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

【PHP】WSL vs. Docker vs. Win32 環境別速度

PHPが複数環境で実行できるようになったので、速度を測定してみました。 マシンスペックは マシン Lenovo Thinkpad E460 プロセッサ Core i5-6200U @ 2.40GHz …

CSS3

Perfect Pixel で調整してみよう!

皆さんはPerfect PixelというChromeの拡張機能をご存じでしょうか? デザインカンプを半透明にしてWebページに重ね、要素のズレなどを確認できるものです。 そんなに厳密にWebページを作 …

HTMLの見出しタグの使い方

HTMLでコーディングしていると見出しタグ(h1とかh2とか)をどのように付けようか迷うことがありませんか? そんなときには文書構造を考えるようにしましょう。

【WSL】PHPから送信するメールをテキストに保存する

テスト環境で使っていると、PHPのメール送信をテストしたい時があります。 かといって、実際に送信されてしまうと面倒です。 xamppにはmailtodiskというのがあり、メールをディスクに保存してく …

PHPからsyslogを書く

忘備録です。 PHPでシステム回りを作っているんですが、syslogに出力出来たらなー、と思っていました。 調べたら簡単♪ function logger($mes) { exec("/bi …