グラフをコードで描く：統計の棒グラフをSVGで出す

グラフをコードで描くとは、棒グラフや折れ線グラフを、画像ファイルではなくSVG（座標で形を書く画像の形式）⁠とHTMLで出すことです。統計の数字を載せるページなら、軸と数字を文字のまま持てるSVGで描きます。

やることは3つです。グラフをSVGで描く。svgに名前と説明を付け、横に元の数字の表を置く。系列を色だけで分けない。画像に付ける代替テキストの基本はalt属性とは⁠に書いたので、ここではグラフに絞ります。

画像のグラフと、SVGのグラフ

表計算ソフトで作ったグラフをPNGに書き出して貼る作り方と、SVGで描く作り方を比べると、次のように違います。

いちばん効くのは4行目です。公開データを取り直すたびにグラフを作り直す作業は、PNGだと人の手が要ります。SVGなら、ページを組み立てるときにデータから描けば、表とグラフが同じ数字になります。

文字が絵になると、困ること

PNGのグラフでは、目盛りの「1,200」⁠も県名も、ただの点の集まりです。スマホで拡大すると文字がぼやけ、数字を選んで写すこともできません。ブラウザの翻訳も効きません。

SVGでは、text要素で書いた文字は文字のまま残ります。表を画像にしない理由は比較表をHTMLで作るにも書きましたが、グラフの文字も同じ考え方です。

棒グラフを、短いSVGで描く

3つ⁠の県の事業所の数を、架空の値で描くと次のようになります。

<figure>
  <svg role="img" viewBox="0 0 320 130"
       aria-labelledby="g1-title g1-desc">
    <title id="g1-title">県別の事業所数（架空の例）</title>
    <desc id="g1-desc">A県1,200、B県800、C県400。A県がC県の3倍。</desc>
    <rect x="70" y="10" width="240" height="24" fill="#1f5f8b"/>
    <text x="60" y="27" text-anchor="end">A県</text>
    <text x="300" y="27" text-anchor="end" fill="#fff">1,200</text>
    <rect x="70" y="50" width="160" height="24" fill="#1f5f8b"/>
    <text x="60" y="67" text-anchor="end">B県</text>
    <text x="220" y="67" text-anchor="end" fill="#fff">800</text>
    <rect x="70" y="90" width="80" height="24" fill="#1f5f8b"/>
    <text x="60" y="107" text-anchor="end">C県</text>
    <text x="140" y="107" text-anchor="end" fill="#fff">400</text>
  </svg>
  <figcaption>出典と時点をここに書く</figcaption>
</figure>

棒の長さは値に比例させています（1,200⁠を240にしたので、1件あたり0.2⁠）⁠。棒の端に数字を書いているので、目盛りが無くても値が読めます。

title・desc・roleは、何をしている？

MDNのtitle要素の説明は、titleをSVGの要素のアクセシブルな短いテキストの説明としています。グラフの一部として描かれることはなく、ブラウザは通常ツールチップとして表示します。SVG 1.1との互換のため、親の最初の子要素にするよう書かれています。

desc要素の説明は、descを長文の説明を提供するものとしています。上の例では、titleにグラフの名前、descに読み取ってほしい中身を書きました。

外側のsvgに付けたrole="img"について、MDNのimg ロールの説明⁠は次のように書いています。

スクリーンリーダーは子ノードをすべて読み上げようとするのではなく、それを単一の要素として扱い、ラベルを使用して記述します。

同じ説明は、img ロールの子孫の要素には、ブラウザが自動でpresentationのロールを当てるとしています。グラフの中の「A県」「1,200」⁠は⁠、読み上げでは1つずつ読まれなくなるということです。だから、数字そのものは次の節の表で渡します。

グラフの横に、元の数字の表を置く

W3Cの複雑な画像の説明は、グラフや図表を複雑な画像の例に挙げ、2つ⁠に分けた代替テキストが要るとしています。1つ⁠は画像が何かを示す短い説明、もう1つ⁠は画像が伝える要の情報を文字で表したものです。同じページの例では、figureの中に見出し・文・表で長い説明を入れる形が示されています。

ページでは、グラフのすぐ下に同じ数字の表を置きます。表は比較表をHTMLで作る⁠と同じく、captionとthで組みます。

• グラフは、大小の差や傾きをひと目で見せる
• 表は、値を正確に読み、写し、出典と照らし合わせるのに使う

グラフと表を同じデータから組み立てれば、片方だけ古い数字が残ることもありません。

色だけで区別しない

男女や年度など、系列が2つ以上ある棒グラフでは、色で分けたくなります。WCAGの達成基準1.4.1は、色を、情報を伝える唯一の視覚的な手段にしないよう求めています。

色以外で見分けられるようにする方法は、いくつかあります。

• 棒の端か近くに、系列の名前を文字で書く
• 系列ごとに模様（斜線や点）⁠を付ける
• 凡例の並び順と、棒の並び順をそろえる

棒と背景のコントラストも見る

達成基準1.4.11は、内容の理解に要る図の部分に、隣り合う色と3:1以上のコントラストを求めています。同じ説明は、図の中のラベルと値が同じ情報を伝えているなら、図の部分はこの比を満たさなくてもよいとしています。添えたデータの表があれば、図を見て理解する必要がなくなる場合がある、とも書かれています。

上の例で棒の端に数字を書き、下に表を置いたのは、この両方を満たすためです。ただし、グラフの中の文字は、文字のコントラストの基準（1.4.3）⁠を満たす必要があります。白い数字を棒の上に載せるなら、棒の色を濃くします。

検索では、どう扱われる？

Googleの画像のSEOの説明は、img要素のsrcで参照された画像について、BMP、GIF、JPEG、PNG、WebP、SVG、AVIFに対応しているとしています。CSSの画像はインデックスに登録しない、とも書いています。ページに直接書いたSVGを画像検索でどう扱うかは、この説明には書かれていません。

グラフを画像検索に出すことを目的にするなら、SVGをファイルにしてimg要素で読み込み、alt属性を付けます。統計のページで読ませたいのは数字なので、私たちは表のほうを本文として扱います。数字の元になる統計の取り出し方はe-Statの使い方に、読み上げを含めた使いやすさの点検はユーザビリティとは⁠に書きました。データで作るサイトの全体はデータベース型サイトから読めます。

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