数字がグラフの中にしかないとき、altテキスト1文では足りない

3店舗の四半期最初の3か月の売上を、棒グラフにまとめ終えたところだとします。それをチャットボットに貼りつけて「altテキストを書いて」と頼みます（altテキストとは画像の代替テキストのことで、画像が見えない人のためにスクリーンリーダーが読み上げます）。返ってきた案は「3店舗の月別売上を示す棒グラフ。」でした。この文は間違いではありません。でもグラフが見えない人は、これを聞いても、どの店が伸びていてどの店が落ちているのかが分かりません。

商品写真やイラストなら、短い1文で足りることが多いでしょう。グラフは数字が絵の中にある種類の画像なので、短い1文で言えるのは「どんなグラフか」だけです。残りは別の場所に置く必要があり、その場所はグラフを使うページによって変わります。

以下の例は、判断の仕方を示すために編集部が作ったものです。数字は仮のもので、チャットボットや実在する店の結果ではありません。

元の数表

月別の売上、単位は百万ドンです。

	1月	2月	3月
店舗A	120	110	95
店舗B	80	80	81
店舗C	50	70	90

この表から描いた棒グラフを、2か所で使います。

1か所目：結果をすでに文章で書いてある報告書

四半期の報告書では、グラフのすぐ下に段落があります。「店舗Aは120百万ドンから95百万ドンに減り、店舗Bは80前後で横ばい、店舗Cは50から90に増えた。」スクリーンリーダーで読む人も、この段落をほかの人と同じように聞きます。

ここでは、グラフは段落がすでに述べていることを図にしたものです。altは短い1文で足ります。ただし、段落を指すようにしてください。「3店舗の売上の棒グラフ、1月から3月。数値は下の段落に記載。」数表をまるごとaltに写すと、聞く人が同じ情報を2回聞くことになるだけです。

2か所目：タイトルとグラフだけのスライド

全社に送るスライドで、タイトルは「店舗別売上」、その下にはグラフだけがあります。グラフを取ると、読む人には何も残りません。これは、W3C WAIの分類でいう複雑な画像で、グラフ、図、地図が含まれるグループです。W3Cは、2つの部分からなる代替テキストを使うよう勧めています。ひとつはどんな画像かを言う短い部分、もうひとつは重要な情報を文章で示す長い部分で、傾向がグラフの見せたいことであれば傾向も含めます。

このスライドには両方が必要です。短いalt：「3店舗の売上の棒グラフ、1月から3月。詳しい説明はグラフの下。」長い説明はaltの欄に押し込まず、グラフの下のページ上にそのまま置いて、誰でも読めるようにします。W3Cは、長い説明を全員に見える形にし、その場所を示す一行の文章で画像と結びつけるよう勧めています。

長い説明にAIを使う

グラフの画像をAIに渡して、棒の数字を読み取らせるのはやめましょう。上の元の数表をそのまま渡します。すでに手元にあるはずです。そして説明の役割を伝えます。「スライドに置く棒グラフの長い説明です。店舗ごとの値と主な傾向を書いてください。表の数字だけを使い、原因の説明はしないでください。」

AIが返した案を確かめる

案を読み、数字を1つずつ表と照らします。そのあとグラフを隠して考えます。文章しかない人は、Aは減り、Bは横ばい、Cは増えた、と言い直せるでしょうか。ひとつでも足りなければ書き足します。「店舗Cが販促をしたため」のような文が案に付いていたら、削ってください。表にはそんなことは書いてありません。

使っているスライド作成ツールにaltの欄が1つしかなく、画像の下に文字を足せない場合は、グラフのすぐ隣に数表を置きます。小さな表も長い説明の役を果たし、スクリーンリーダーの利用者にも数字が届きます。

この記事が代わりにならないもの

これは、コンテンツを作る人のための簡単な点検であり、アクセシビリティ（利用のしやすさ）の本格的な検査ではありません。系列が多いグラフや構造が複雑なグラフは、W3C WAIの複雑な画像についての案内と、製品が満たすべき基準を確認してください。

参考資料

• W3C WAI — Complex Images — グラフ、図、地図のための2部構成の代替テキストと、長い説明をページ上に置く方法を説明しています。
• W3C WAI — An alt Decision Tree — 画像が文字を含むか、機能を持つか、情報を伝えるか、装飾だけかによって、代替テキストを選ぶ手順を案内しています。
• W3C WAI — Images Tutorial — 代替テキストは画像の目的、文脈、内容によって変わることを説明しています。

Nguồn tham khảo

1. W3C
2. W3C
3. W3C