Zenn
🖼️

imgタグのalt属性について

2024/04/25に公開
2件
HTML 5
アクセシビリティ
alt属性
tech

<img src="画像URL" alt="画像の説明">

alt属性について調べる機会があり、自分なりにまとめてみました。
間違い・ご指摘などあればご教示いただければと思います。

alt属性に結局何入れればいいのか問題

alt属性は入れるべきというのは聞いたことあるけど、実際どのように入れればいいのかわからないという方は多いと思います。明確な決まりがなく、適切ではない文言を入れたとしても目に見えてエラーが出るわけでもないため、曖昧な理解になりがちだと思います。

W3C WAIというWEBのアクセシビリティに関してのガイドラインの作成などをしている組織が「画像チュートリアル」というものを公開しています。「画像チュートリアル」ではalt属性の指定の仕方、具体的な事例や考え方が記載されています。このガイドを基準にしてalt属性を決めると、無駄に悩むことが減り、なぜこのような指定にしているかという根拠や参照元としての説得力もあるので、非常に有用だと思います。
世の中のサイトがどのようにalt属性を指定しているか見てみるとサイトによって違いがあり、一概にガイドライン通りに指定されているわけではないようでしたが、alt属性についての解説記事（思ったより見つからない）や、信頼できるWEB制作会社のサイトを見ると大体このガイドラインに沿った考え方をしているようでした。

なぜalt属性を設定するのか

  • 目が見えない方などが読み上げ機能で情報を得るため
  • SEOのため
  • 画像が表示されない場合に代替テキストを表示するため

alt属性に入れた情報は読み上げ機能や画像が表示されなかった時の代替情報として使用されるため、アクセシビリティにおいて非常に重要です。また、SEOの観点でも影響があるとされています。
alt属性を設定することはデジタル庁のアクセシビリティのガイドブックでも必須項目とされています。

7つのカテゴリ

「画像チュートリアル」では画像を目的別に７つのカテゴリに分けています。その画像を使用する目的を考えることで、alt属性に何を入れるべきか判断することができます。
①Informative images 情報的な画像
②Decorative images 装飾的な画像
③Functional images 機能的な画像
④Images of text テキストの画像
⑤Complex images 複雑な画像
⑥Groups of images 画像のグループ
⑦Image maps イメージマップ

①Informative images 情報的な画像

概念や情報をグラフィカルに表す画像。通常は絵、写真、イラストなど。画像が表す短い説明を入れる。

例：「TEL:」を表す電話番号のアイコン

<img alt="TEL:">

②Decorative images 装飾的な画像

装飾目的の画像。隣接するテキストですでに説明されている場合や、Webサイトをより視覚的に魅力的にするためのデザイン的な画像の場合など。その場合altは空にする。

例：装飾目的の画像

<img alt="">

視覚的な写真でも、印象や感情を表す画像として①情報的な画像とする場合もあります。例えば、企業の採用サイトで、フレンドリーな雰囲気で笑顔で歓迎する採用担当の写真があった場合、単に装飾的な写真というよりは、会社の雰囲気を伝える歓迎する様子は、応募者（ユーザー）にとって有益な情報で、あるかないかで印象が変わると思います。このような場合、①情報的な画像の「印象や感情を表す画像」が画像の目的として良さそうです。このような意図によって目的の分類が変わるような画像は制作者が決めて良いとされています。

③Functional images 機能的な画像

情報を伝えるためではなく、アクションを開始するための画像。ボタン、リンク、その他のインタラクティブな要素で使用される。代替テキストには、画像の説明ではなく開始されるアクション(画像の目的)のテキストを入れる。

例：検索ボタンの虫眼鏡アイコン

<img alt="検索">

④Images of text テキストの画像

読むことを目的としたテキストの画像。代替テキストには画像に表示されているテキストと同じテキストが含まれる。

例：リンクではないロゴ画像

<img alt="THE BAKERY">

⑤Complex images 複雑な画像

短い文章では表せないグラフなど複雑な画像。

例：複雑なグラフ(グラフの説明をしている別ページへのリンクの記載)

<figure>
    <img
        src="chart.png"
        alt="サイトA、Bの2024年の月間訪問者数の遷移を示すグラフ">
    <figcaption>
        <a href="pv-data.html">sample.com サイト訪問者数の推移グラフのテキスト説明</a>
    </figcaption>
</figure>

⑥Groups of images 画像のグループ

評価を表す星アイコンなど、1つの情報を表すための画像のグループ。
複数の画像を<figure>タグで１つのグループにしている場合など。
画像チュートリアルの画像のグループを参照。

例：評価の星アイコン

評価：
<img src="star-full.jpg"  alt="5つ星のうち3.0">
<img src="star-full.jpg"  alt="">
<img src="star-full.jpg"  alt="">
<img src="star-empty.jpg" alt="">
<img src="star-empty.jpg" alt="">

⑦Image maps イメージマップ

画像にクリックできる領域を複数設定している画像（areaタグやmapタグを使用）
イメージマップが示す情報やリンク先の情報を指定する。どのようなイメージマップかによって変わるので、画像チュートリアルのイメージマップを参照。

例：リンクを設定した組織図、地図など
チュートリアルの例を参照
https://www.w3.org/WAI/tutorials/images/

Alt Decision Tree

いざどのカテゴリなのか考えてみると判断に迷うことがあります。「画像チュートリアル」ではDecision Tree（決定木）が用意されているので、迷ったら使ってみると良いでしょう。
https://www.w3.org/WAI/tutorials/images/decision-tree/

↓は上記のページをもとに作成したDecision Treeです。

altを書く時の注意点

  • 適切な選択をするコツ

    • Webページを理解する必要がある人に電話でWebページを読み上げていることを想像してみる。それらに「情報」やリンク、ボタンなどの「機能」がない場合は装飾的なものとして扱うと良い。

  • 代替テキストの長さ
    altは、画像の目的を可能な限り簡潔に説明する必要がある。文章の説明が必要な場合は、「複雑な画像」で説明されている長い説明方法を参照。

  • 適切な句読点を入れる

    • 読み上げ機能を想像するとわかるように、適切な句読点を入れるようにする。alt画像と隣接テキストの間にスペースがないような場合は、スペースを追加する。句読点やスペースがないと連続した単語で認識される可能性がある。
    • 装飾目的でalt=""にする場合は、引用符の間にスペースを入れない。引用符の間にスペースが入っていると、一部のスクリーンリーダーでは、画像があると認識される可能性がある。

  • 「〇〇の画像」、「〇〇の写真」などは基本的には不要
    基本的に、代替テキストに「画像」、「アイコン」、「写真」などの単語を含める必要はない。目が見える人は画像とわかるはずで、スクリーンリーダーの場合でも画像ということを知らせるため不要。ただし絵画、写真、イラスト、グラフなどを区別することが必要な場合は意図的に書いてもOK。

  • altに空を設定することついて
    alt属性に空を設定すると (alt="")、この画像がコンテンツにおいて重要な箇所ではないことを示し、視覚ブラウザーではない場合はレンダリングを省略することがある。視覚ブラウザーでは、 alt属性が空欄で、画像の表示に失敗した場合は、壊れた画像のアイコンの表示が省略される場合がある。

  • 装飾的な画像の場合、基本的にはbackground-imageを使用する
    画像が純粋な装飾目的の場合、基本的にはimgタグではなくbackground-imageを使用する。

  • SVGでもalt属性を設定できる

<svg aria-labelledby="svgtitle1"> <title id="svgtitle1">画像の説明</title> [other svg code] </svg>

aria-labelledby属性でtitleタグのidと紐づける。titleタグの間に画像の説明を入れる。

altがチェックできる拡張機能

Alt & Meta Viewer

参考サイト

-Images Tutorial | W3C WAI
https://www.w3.org/WAI/tutorials/images/

まとめ

alt属性については、決まったルールの通りに指定するというものではなく、画像の目的、文脈などを考えて、制作者が決める必要があります。
デザインや構成を考える時点で、画像とテキストどちらで表示するべきかという点も検討する必要があるため、コーダー（実装者）だけでなく、デザイナー、ディレクターなどWEBに関わる方は知っておくと良い知識だと思いました。

Discussion

beijaflorbeijaflor

Alt Decision Tree がとても役に立ちそうです
「アイコンなどの特定の機能がある」がふたつ上下に並んでしまっているのですが、下の方は「画像内のテキストが他の箇所に存在しない（ the text in the image is not present otherwise. ）」が正しそうです

yukiyamayukiyama

コメントありがとうございます！
誤りでしたので修正いたしました。大変助かります。
また何かあればコメントいただければ幸いです。