【ウェブアクセシビリティ】複雑な図表やチャート画像のalt属性の設定の仕方

2024年 8月19日　Posted　遠藤(フロントエンドエンジニア)

画像にalt属性を設定することは当たり前になっていますが、例えば以下のような複雑な図表やチャート画像など、alt属性をどのように設定していますでしょうか。

ちゃんと説明しようとすると超長文になってしまいますし、かといって一言で簡素に表すのも難しいですし、どのようにalt属性に設定していいものか悩む方もいらっしゃるのではないでしょうか。
そこで今回は複雑な図表やチャート画像のalt属性の設定方法について説明します。

まず結論

複雑な図表やチャート画像においては

（の組み合わせ）がベストと考えます。

追って説明していきます。

alt属性について

まず前提として、alt属性のには簡素な短いテキストを設定することが適切とされています。

ウェブアクセシビリティ観点から考える

ウェブアクセシビリティのガイドライン Web Content Accessibility Guidelines (WCAG) 2.1においては「達成基準 1.1.1 非テキストコンテンツ」の項目に該当します。

達成基準 1.1.1 非テキストコンテンツ

* 非テキストコンテンツとはテキストではないコンテンツということで画像も該当します。

その中でも状況によって分かれていますが、今回のものはチャートまたは図表にあたるので「状況 B」に該当します。

状況 B：短い説明が非テキストコンテンツと同じ目的を果たせず、かつ同じ情報を提示できない場合 (例：チャートまたは図表）： 1. 次に挙げる状況 B における短いテキストによる代替の達成方法のいずれかかつ、状況 B における長いテキストによる代替の達成方法のいずれかを用いて、G95：非テキストコンテンツの簡単な説明を提供する、短いテキストによる代替を提供する:

簡単に言い換えますと

状況 B：チャートや図表のような画像で短いテキストでは代替できない場合は、次に挙げる短いテキストによる代替方法どれか一つと、長いテキストによる代替方法どれか一つを組み合わせて画像と同じ情報を提供する。

短いテキストによる代替と長いテキストによる代替の方法は以下のように示されています。

短いテキストによる代替の達成方法:

  • ARIA6：オブジェクトのラベルを提供するために aria-label を使用する
  • ARIA10：非テキストコンテンツに対してテキストによる代替を提供するために aria-labelledby を使用する
  • G196：画像のグループにある一つの画像に、そのグループの全ての画像を説明するテキストによる代替を提供する
  • H2：同じリソースに対して隣接する画像とテキストリンクを結合する
  • H35：applet 要素にテキストによる代替を提供する
  • H37：img 要素の alt 属性を使用する
  • H53：object 要素のボディーを使用する
  • H86：ASCII アート、顔文字、およびリート語にテキストによる代替を提供する
  • PDF1：PDF 文書の Alt エントリーによって画像にテキストによる代替を適用する

長いテキストによる代替の達成方法:

  • ARIA15：画像の説明を提供するために aria-describedby を使用する
  • G73：非テキストコンテンツのすぐ隣に別の場所へのリンクを置き、その別の場所で長い説明を提供する
  • G74：短い説明の中で長い説明のある場所を示して、非テキストコンテンツの近くにあるテキストで長い説明を提供する
  • G92：非テキストコンテンツに対して、それと同じ目的を果たし、かつ同じ情報を示す長い説明を提供する
  • H45：longdesc 属性を用いる
  • H53：object 要素のボディーを使用する

短いテキストによる代替の達成方法と、長いテキストによる代替の達成方法からそれぞれ一つずつ方法を選んで対応すれば、達成できることになります。

長いテキストによる代替の達成方法として現実的に実装しやすいもの・既に実装できていることが多いものを考えますと、
G92：非テキストコンテンツに対して、それと同じ目的を果たし、かつ同じ情報を示す長い説明を提供する
の項目になるかと思います。

よって短いテキストに代替として簡素なalt属性を設定することを取り入れて

の二つの組み合わせによって、ウェブアクセシビリティ的にも基準を達成できることになります。

運用的にも

チャートまたは図表の説明となる長いテキストを考えて設定することは難しいと思いますが、図表のタイトルにあたる簡素な文言を設定するだけであれば運用的にもしやすいと考えます。

短いalt属性や長いalt属性だけではダメなのか

短いalt属性だけの場合

例えば、こちらの画像に"キッティングサービスの流れ"と短いalt属性だけ設定し、コンテンツに同内容のテキストがなかった場合、画像の内容を伝えているとは言えません。画像が表示されなかった場合や、スクリーンリーダーの利用者には画像の内容が分からないことになり、不適切と言えるでしょう。

長いalt属性だけの場合

同じ画像を例に、画像の内容をalt属性だけで説明しようとしますと、"お客様から出荷指示いただいた機器を弊社入庫後……（説明テキスト）"と長文になってしまいます。

スクリーンリーダーによってはalt属性は一気に読み上げられてしまい、alt属性が長過ぎますと逆に内容を理解しづらくなってしまいますので、長いalt属性だけを設定することも不適切と言えるでしょう。

まとめ

複雑な図表やチャート画像においては