グラフの代替テキスト：画像に表を添える

画像のグラフには、何を示すかを短い代替テキストで伝え、詳しい説明と値の表を本文に添えます。

グラフという一語のaltや、画像だけの掲載では、軸、凡例、数値の関係を確認できません。

最初に、画像で伝えている情報を書き出します。比較する項目、対象期間、単位、主要な傾向です。そのうち、画像を見なくても理解するために必要な情報を文章と表へ移します。

SVGで描くグラフ自体の作り方はSVGグラフの設計⁠にまとめています。ここでは、すでに画像として掲載したグラフを、読み取れる形へ直す作業を扱います。

何を伝える画像か決める

WCAG 2.2の非テキストコンテンツの解説は、利用者に示す非テキストの内容には、同等の目的を果たすテキストの代替を用意するよう求めています。グラフなら、色や線を言葉で列挙するだけでなく、そのグラフを読む目的に合う情報を伝えます。

たとえば、製造業の地域別事業所数を比べるページです。画像が担うのは、棒の色を見せることではなく、どの地域にどれだけあり、地域間でどう違うかを示すことです。

必要なのは、表題だけを繰り返すことでもありません。対象年がどこにもなければ、現在の数字か過去の数字か分かりません。単位が欠ければ、事業所数と従業者数を取り違えるおそれがあります。

この整理を先にすると、altだけを長くする修正を避けられます。画像の中にしかない情報を、用途に合った場所へ戻す作業です。

短いaltで案内する

短い識別と詳しい説明を組み合わせるW3Cの方法と、グラフのaltの文例はalt属性とは⁠に書きました。直すときに見るのは、altが何の比較かを示し、詳しい説明の場所を案内しているかです。赤い棒が左、青い棒が右、と位置だけを説明していても比較の内容は分かりません。

詳しい説明を別ページへ置く場合も、画像からその説明へたどれるようにします。ページ内に収まるなら、グラフの直後に説明と表を置く方が、比較中に移動する負担を減らせます。

傾向と数値を両方出す

本文には、グラフから読み取ってほしい関係を文章で書きます。増えているのか、特定の地域に集中しているのか、といった内容です。ただし、数値で確認できない原因は加えません。

設備投資が増えたから事業所数が伸びた、という説明は、事業所数のグラフだけでは裏付けられません。グラフの説明と原因の分析は分け、原因に触れるなら別の根拠が必要です。

正確な値はHTMLの表にします。列名、単位、対象期間を明示し、欠損をゼロへ置き換えないようにしてください。グラフで省略した項目があるなら、表の対象範囲との違いも説明します。

グラフ画像と数値表の範囲が異なる場合は、読者が一致しない理由を判断できるようにします。上位だけを描いたグラフの下に全地域の表を出すなら、画像が上位のみであることを表題付近に書きます。

表を別の画像にして添えても、数値を選択したり、見出しをたどって読んだりする用途は満たせません。元の画像から表を起こす際の注意は表を画像にしない⁠にまとめています。

表の構造を残す

詳しい説明を機械にも関連付けたいとき、aria-describedbyという属性が使われることがあります。ただし、大きな表を指定すればそれで済むわけではありません。

W3Cの複雑な画像の解説は、aria-describedbyで参照した要素の扱いを次のように書いています。

one continuous paragraph of text

参照先はひと続きの段落として扱われ、読み上げソフトなどは見出しや表の構造を使えず、構造をたどる操作もできない、という注意です。同じ解説は、この方法は構造の要らない文章だけの説明に向くとしています。数値をセル単位でたどる目的なら、表を通常の本文として読めることが必要です。

画像の近くに、説明と表があることを文章で案内します。その先では、見出し付きの表として操作できる状態を保ちます。表の要素や見出しの付け方は比較表をHTMLで作る⁠にまとめています。

読み上げの順番でも、画像、説明、表が離れすぎないようにします。画像を見ない状態で本文を読み、何の値か分からない数字だけが続かないかを確かめます。

SEOの説明と混同しない

Googleが画像の中の数字をどこまで読むかは、表の数字を画像にしない⁠で公式の説明を引いて書きました。ここでは、検索を意識した直し方で起きやすい失敗だけを挙げます。

altへ地域名や製品名を大量に追加する修正は避けます。Googleの画像SEOの説明も、alt属性にキーワードを羅列しないよう書いています。グラフが示していない項目を入れると、読む人に誤った説明を渡します。検索のために別の内容を作るのではなく、同じ情報を複数の読み方で確かめられる形にします。

私たちの暦の自社メディアでも、FAQを構造化データにだけ入れ、画面に出していない状態を直したことがあります（自社メディアの運営記録）⁠。内部に情報があることと、読者が利用できることは別です。画像の代替情報も、実際に見つけて読めるかまで確認します。

既存ページを直す順番

製造業の地域比較ページに、事業所数の棒グラフだけがある状態を想定します。最初は新しい画像を作るのではなく、グラフを作った元の表と出典を探します。画像から数値を目測して表を起こすと、元の値とのずれを持ち込むためです。

元データが確認できたら、地域名と数値、単位、対象時点を本文の表へ出します。元の値が分からない項目は、推測で補わず確認を保留します。画像がきれいに見えることと、数字の根拠が確認できることは別です。

次に、グラフが伝えている比較を文章にします。地域間の大小を述べるなら、同じ対象年と条件で比べた表かを確認してから書きます。異なる年の数値を並べたグラフであれば、代替テキストを加える前に比較条件を直す必要があります。

最後に、画像を読めない人をaltから本文へ案内します。表がページのかなり後ろにあるなら、位置を近づけるか、説明へ移れるリンクを付けます。説明が存在するだけでなく、画像のある場所から発見できるようにします。

狭い画面でも確かめる

本文に表を出した後は、列を増やしすぎないようにします。地域、数値、単位、対象時点をすべて列に入れる必要があるかを考えます。全行に共通する単位や時点なら、表の題や直前の説明へ出す方法もあります。

横に長い表を無理に縮小すると、画像と同じように文字が小さくなります。何を比較する表かを絞り、値と見出しを対応させて読める構成にします。

画像の色が見分けにくい状態でも、文章と表で比較できるかを確認します。表の中まで色だけで区分を伝えると、画像にあった問題を移しただけになります。区分の名前を文字でも示します。

更新でずれを作らない

元データを更新したら、画像だけでなく表、alt、傾向の文章も確認します。前回は増加だった項目が減少へ変わっても、説明が古いまま残ることがあります。

できれば、同じ整理済みのデータから画像と表を作ります。

別々に手入力するなら、全項目が一致するか照合する工程を置きます。

最後は画像を非表示にした状態と、狭い画面の両方で読みます。表があるだけでは、列名が分からない、単位が見つからないといった問題は残ります。画像なしでも同じ問いに答えられるかを確認してから公開します。

直す順番は、既存のグラフ一つに短いalt、傾向の説明、値の表をそろえてから、同じ構成を他のページへ広げる形です。データの更新と表示をまとめて設計するときはDB型のサイト設計⁠へ進んでください。

出典の確認日：2026年10月26日⁠。