テキストによる画像の説明

画像は、全盲やロービジョンのユーザーなどが適切に利用できない可能性があります。

まず全盲のユーザーの場合、当然ですが画像を見ることができません。また、一部のスクリーン・リーダーに搭載されている画像の認識・推測を行う機能も完璧とはほど遠いのが現状で、こういった機能の使用を前提とすることはできません。

一方ロービジョンなどの要因で見ることに困難があるユーザーの場合、画像のサイズや用いられている色の組み合わせなどによって見づらいという場合が考えられます。

このような問題を回避するためには、その画像が提供しているのと同等の情報をテキストでも提供することが必要です。より具体的には、画像の説明をテキストで提供します。この際重要なことは、過不足なく情報を提供するということです。情報が不足しているのはもちろん良くないのですが、過剰なのも良くありません。

提供すべき説明の分量や詳しさは、その画像の内容によっても、その画像が使われている文脈によっても異なります。

例1: 何らかの機能を実行するためのアイコンについて、そのアイコンがどのような機能を実行するためのものなのか広く一般に認知されている場合、その機能を示すテキストを提供するのが妥当でしょう。一方、そのアイコンの意味がほとんどの人にとって分からない場合は、そのアイコンの形状など視覚的特徴を説明する必要があるかもしれません。（これは製作者の意図次第です。）

例2: グラフを示す画像があるとき、その画像の前後のテキストを読めばそのグラフの内容が充分理解でき、画像には理解を補助する意味合いしかないような場合には、それがグラフであることが分かるテキストを提供すれば良いでしょう。一方、その画像を見なければ意味のある情報を得られない場合は、グラフの傾向の説明や、グラフ上の数値などをテキストで提供する必要があるでしょう。

文脈や内容に応じて説明を検討する必要がありますが、可能な限り一貫性がある説明にすべきです。どのような説明にすべきか検討する際に活用できる事例集を、今後整備する予定です。

画像の説明を提供する方法としては、短い説明の場合はimg要素のalt属性や、場合によってはaria-label属性やaria-labelledby属性を用いると良いでしょう。長い説明の場合は、aria-describedby属性やlongdesc属性を用いる方法に加えて、詳細な説明を掲載したページへのリンクを画像の周囲に配置する方法なども考えられます。

以上は、画像に何らかの意味がある情報が含まれている場合です。画像が純粋に装飾目的で、意味のある情報を含んでいない場合は、スクリーン・リーダーなどの支援技術がその画像の存在を無視するような記述をする必要があります。

具体的には、img要素に空のalt属性を付ける（<img src="image.png" alt="">）、role="presentation"を付与するなどの方法が考えられます。

なお、上記例2のような場合において、グラフの画像は情報を提供していますので、適切な説明を付与する必要があります。画像の説明がなくてもコンテンツの意味が伝わるのだから説明は不要だと考えるかもしれませんが、テキストの説明を活用するのは決して全盲のユーザーだけではありません。普段は主にスクリーン・リーダーを使っているロービジョンのユーザーの場合、そこにグラフがあることが分かればグラフは拡大表示して見てみようと考えることもあるでしょう。また、全盲のユーザーでも、そこにグラフがあることが分かれば、晴眼者とのコミュニケーションが容易になります。

関連ガイドライン項目

関連FAQ