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

2024-08-12T00:00:00+09:00 | 5分で読めます | 更新日時 2025-03-15T00:00:00+09:00

@ ShigeUe

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 を見よう

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

（チャートにしてみました。PC表示の場合、クリックすると拡大します）

  ---
title: An alt Decision Tree（alt決定ツリー）
config:
  theme: neutral
  fontFamily: "\"Noto Sans JP\", sans-serif"
---

graph LR;
  SS@{ shape: stadium, label: "START" };
  A1[その画像は文字を<br>含んでいるか？]
  B1[その画像は<br>リンク/ボタンで<br>その画像がないと<br>リンク/ボタンを<br>押すのが困難か？]
  C1[その画像はそのページや<br>書いてある文脈に<br>意味を与えているか？]
  D1[その画像は<br>ユーザーに何かを<br>指示したりしておらず<br>純粋に装飾だけが<br>目的か？]
  E1["上記以外は<br>こちらのページを見よ<br>(別ページ)"]

  A2[その画像のそばに<br>画像内と同じ「本当の」テキストもあるか？]
  A3[画像は純粋に装飾目的か？]
  A4[画像には固有の<br>機能があるか？<br>（例：アイコン）]
  A5[画像内の文字は<br>他のどこにもない]
  A90[alt属性は#quot;#quot;を使う]
  A91[alt属性は<br>その機能を伝える<br>文字を入れる]
  A92[alt属性は<br>画像内の文字を<br>そのまま使う]

  B90[alt属性はリンク先の情報かボタンを押すアクションを伝える文字を入れる]

  C2[アイキャッチ目的の<br>画像やイメージ写真か？]
  C3[グラフや複雑な<br>情報を表している]
  C4[その画像と<br>重複するテキストが<br>近く書いてあるか？]
  C90[alt属性は<br>意味が伝わるような<br>画像の簡単な説明を使う]
  C91[ページ内の別の個所に<br>情報を含めよ]
  C92[alt属性は#quot;#quot;を使う]

  D90[alt属性は#quot;#quot;を使う]

  style SS fill:#fdd;

  subgraph main[" "]
    SS --> A1;
    A1 -->|No | B1;
    B1 -->|No | C1;
    C1 -->|No | D1;
    D1 -->|Yes| D90;
    D1 -->|No| E1;

    click E1 "https://www.w3.org/WAI/tutorials/images"
  end

  subgraph sub_a[" "]
    A1-->|Yes| A2;
    A2-->|No | A3;
    A3-->|No | A4;
    A4-->|No | A5;
    A2-->|Yes| A90;
    A3-->|Yes| A90;
    A4-->|Yes| A91;
    A5-->|Yes| A92;
  end

  subgraph sub_b[" "]
    B1-->|Yes| B90;
  end

  subgraph sub_c[" "]
    C1-->|Yes| C2;
    C2-->|No | C3;
    C3-->|No | C4;

    C2-->|Yes| C90;
    C3-->|Yes| C91;
    C4-->|Yes| C92;
  end

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

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

※広告
このブログはさくらインターネットでホストされています。

Ryzen AI 9 HX370の割には安いです。

GMKtec EVO-X1 AI Mini PC AMD Ryzen AI 9 HX-370（最大5.1GHz 12コア/24スレッド）搭載 32GB LPDDR5X 7500MHz + 1TB PCIe 4.0 SSD Windows 11 Pro対応 3画面8K出力デュアル2.5Gbps LAN・WiFi 6・USB4・Oculinkポート静音設計・ビジネス＆ゲーミング向け

Amazon Link