データ表・グラフのアクセシビリティ完全ガイド：テーブル設計、レスポンシブ手法、SVG/Canvasの実装、色覚多様性、代替表現まで

概要サマリー（先に要点）

• テーブルは“構造がすべて”。見出しセル（th）・scope・headers/id・caption/summary（説明テキスト）で関係性を明示し、読み上げとキーボード移動を最短にします。
• レスポンシブ表は“機能の保持”が最優先。横スクロール／列の優先度表示／**カード化（ヘッダー再掲）**の3パターンを、用途で使い分けます。
• グラフはテキストと対に。要点の本文化＋表データの併置＋**色に頼らない符号化（形・線種・パターン）**で、誰でも同じ理解に到達できる導線を作ります。
• SVG優先・Canvasは代替テキストとデータ露出。SVGはセマンティクス（role/タイトル/説明）を、CanvasはDOMのテーブルやARIAライブで情報を外へ出すのがコツです。
• 実装スニペット（HTML/ARIA/CSS/JS/SVG）とデザイン・検証チェックリスト、5分スモークテスト、組織導入テンプレまで一冊化しました。

対象読者（具体）：
データアナリスト、フロントエンドエンジニア、UI/UXデザイナー、テクニカルライター、BI/ダッシュボード構築担当、教育・研究機関の資料作成者、自治体・公共機関の統計担当、プロダクトマネージャー

アクセシビリティレベル：WCAG 2.1 AA 準拠を基準（必要に応じて WCAG 2.2 のターゲットサイズ・ドラッグ代替も推奨）

1. はじめに：数字は“見える化”だけでは届かない

数字は、文脈・関係・比較があって初めて理解されます。表は関係性を正確に伝える器、グラフは傾向や差分を一望させるレンズ。ところが、色のみに依存した線、結合セルだらけの表、画像化された数値は、スクリーンリーダーや拡大表示、色覚多様性のある方にとって情報の壁になってしまいますの。
このガイドでは、テーブルとグラフを**“誰でも同じ理解に着地できる”形へ整えるための設計・実装・運用**を、実務でそのまま使える詳細とともにお届けしますね。

2. テーブルの基本原則：見出し・関係・説明

2.1 セマンティクスの骨格

• <caption>：表のタイトル。何の表かを一行で。
• 見出しセル（<th>）：列・行の見出しをセルレベルで宣言。
• scope：col（列見出し）／row（行見出し）／colgroup／rowgroup。
• 複雑表は headers/id でセルと見出しの関連を明示。
• 注記・出典：<figcaption> 相当の近接テキストで単位・定義・前提を補足。

最小サンプル

<table>
  <caption>2025年 四半期別売上（単位：百万円）</caption>
  <thead>
    <tr>
      <th scope="col">製品</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
      <th scope="col">Q3</th>
      <th scope="col">Q4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">A</th>
      <td>120</td><td>140</td><td>160</td><td>180</td>
    </tr>
    <tr>
      <th scope="row">B</th>
      <td>80</td><td>95</td><td>110</td><td>130</td>
    </tr>
  </tbody>
</table>
<p class="note">注：税抜。前年比は別表参照。</p>

2.2 複雑表（多段見出し・結合）を“正しく読ませる”

結合セルは視覚的には便利ですが、読み上げで迷路になります。

• 多段見出しは scope="colgroup"／scope="rowgroup" を検討。
• それでも足りなければ headers を使用し、**見出しセルにid**を振って対応。

複雑表の骨格

<table>
  <caption>在庫と入荷予定（店舗別・カテゴリ別）</caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2" id="h-store">店舗</th>
      <th scope="colgroup" colspan="2" id="h-now">現在の在庫</th>
      <th scope="colgroup" colspan="2" id="h-in">入荷予定</th>
    </tr>
    <tr>
      <th scope="col" id="h-food">食品</th>
      <th scope="col" id="h-life">日用品</th>
      <th scope="col" id="h-food-in">食品</th>
      <th scope="col" id="h-life-in">日用品</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="s-tokyo">東京</th>
      <td headers="s-tokyo h-now h-food">120</td>
      <td headers="s-tokyo h-now h-life">80</td>
      <td headers="s-tokyo h-in h-food-in">60</td>
      <td headers="s-tokyo h-in h-life-in">50</td>
    </tr>
  </tbody>
</table>

2.3 数字の読みやすさ

• 単位の明示（列見出しまたはキャプション近くに）。
• 桁区切り・マイナス記号の統一・**日付書式（YYYY-MM-DD）**の明記。
• 比較列（増減・前年比）は矢印/記号＋色ではなく、テキスト＋記号＋色の重複伝達。

3. レスポンシブテーブル戦略：3つの型を使い分け

3.1 型A：横スクロール（構造保持・最小変更）

• 利点：構造を壊さずにすむ／読み上げ整合性が保てる。
• 注意：スクロールの存在を見える化（グラデーション、スクロールヒント）。

.table-wrap { overflow-x:auto; }
.table-wrap table { min-width: 48rem; border-collapse: collapse; }
.table-wrap:after {
  content: "↔ スクロール"; position: sticky; right: .5rem; bottom:.5rem;
  background: #111; color:#fff; padding:.2rem .4rem; border-radius:.3rem; font-size:.75rem;
}

3.2 型B：列の優先度表示（重要列は残し、補助列は折畳み）

• 列に優先度クラスを付け、狭幅では補助列を折り畳み→詳細行で展開。

<table class="responsive">
  <thead>
    <tr>
      <th>商品</th>
      <th class="opt">型番</th>
      <th>価格</th>
      <th class="opt">在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>ノートPC A</th>
      <td class="opt" data-label="型番">ABC-123</td>
      <td>120,000</td>
      <td class="opt" data-label="在庫">在庫わずか</td>
    </tr>
  </tbody>
</table>

@media (max-width: 40rem){
  .responsive .opt { display:none; }
}

補足：隠した列情報は明示的に別導線（詳細・行展開）で提供。情報欠落を防ぎます。

3.3 型C：カード化（見出し再掲）

• 各セルに data-label で見出し名を再掲。リフローしてカード見せ。

@media (max-width: 40rem){
  table.responsive, thead { display:block; }
  thead { position:absolute; left:-9999px; }
  table.responsive tbody tr { display:block; border:1px solid #ddd; margin:.75rem 0; padding:.5rem; }
  table.responsive td, table.responsive th[scope="row"] { display:grid; grid-template-columns:8rem 1fr; }
  table.responsive td::before { content: attr(data-label); font-weight:600; }
}

注意：カード化は視覚向けの再構成。読み上げ順（DOM）は表のままなので、ヘッダー非表示時にも**data-labelで視覚の補完**を行います。

4. グラフのアクセシビリティ：テキスト・表・色以外の符号化

4.1 3つの同時提供（できる限り）

1. 本文の要点：傾向・ピーク・差の大きさ・例外。
2. 表データ：数値の一覧（小さくても良いので同ページ内）。
3. グラフ：視覚要約（色以外の符号化を追加）。

本文例（要点の書き方）

「製品AはQ1→Q4で**+50%成長、特にQ2→Q3の伸びが+14%と最大。製品Bは緩やかに+62%だが、Q1とQ4の差は50**と依然大きい。」

4.2 色に頼らない識別（色覚多様性）

• 線種（実線・破線・点線）、マーカー形状（●▲◆）、パターン塗り（斜線・ドット）で重複伝達。
• 凡例は系列ラベルを線の真横へ（色の照合を不要に）。
• コントラスト：線／バー／ラベルの非テキスト3:1以上を目安に。

4.3 グラフ画像の代替テキスト

• altには要点の要約を。例：「折れ線グラフ。Aは120→180に上昇、Bは80→130に上昇。Aの伸びがQ2→Q3で最大」。
• 複雑な場合は本文にサマリー、画像altは短く。詳細は表データで補完。

5. SVGでつくる“読みやすい”グラフ

5.1 最小セマンティクス

<figure role="group" aria-labelledby="cap" aria-describedby="desc">
  <svg viewBox="0 0 400 220" role="img" aria-labelledby="title desc">
    <title id="title">四半期別売上の推移</title>
    <desc id="desc">A: 120→180、B: 80→130。AはQ2→Q3が最大伸び。</desc>
    <!-- 軸や線は後述 -->
  </svg>
  <figcaption id="cap">折れ線グラフ（単位：百万円）。表データは下段をご覧ください。</figcaption>
</figure>

• role="img"＋<title>/<desc> で**読み上げの“名前と説明”**を露出。
• グループ（role="group"）や aria-labelledby でキャプションとの関係を明確に。

5.2 ラインと凡例の“色以外”の符号化

<defs>
  <pattern id="dot" width="6" height="6" patternUnits="userSpaceOnUse">
    <circle cx="2" cy="2" r="1" fill="#666"/>
  </pattern>
</defs>

<!-- A系列（実線＋丸） -->
<polyline fill="none" stroke="#005BBB" stroke-width="3"
          points="40,160 140,140 240,120 340,100" />
<g fill="#005BBB">
  <circle cx="40" cy="160" r="4"/>
  <circle cx="140" cy="140" r="4"/>
  <circle cx="240" cy="120" r="4"/>
  <circle cx="340" cy="100" r="4"/>
</g>

<!-- B系列（破線＋三角） -->
<polyline fill="none" stroke="#222" stroke-width="3" stroke-dasharray="6 4"
          points="40,180 140,165 240,150 340,130" />
<g fill="url(#dot)">
  <path d="M40 184 l4 -8 l4 8 z"/>
  <path d="M140 169 l4 -8 l4 8 z"/>
  <path d="M240 154 l4 -8 l4 8 z"/>
  <path d="M340 134 l4 -8 l4 8 z"/>
</g>

<!-- テキスト凡例は線の近くへ -->
<text x="350" y="100" font-size="12">A</text>
<text x="350" y="130" font-size="12">B</text>

5.3 フォーカス／キーボードで値を読む（最小インタラクティブ）

<g role="list" aria-label="データ点">
  <a role="listitem" tabindex="0" aria-label="A, Q1, 120">
    <circle cx="40" cy="160" r="6" fill="transparent" stroke="transparent"/>
  </a>
  <!-- 同様に各点 -->
</g>

• 透明のフォーカス受けを置いて、Tabで系列→点を巡回可能に。
• フォーカス時にツールチップや**role="status"**へ値を出しても◎。

6. Canvas/Chartライブラリを使うときの“必須”外部化

Canvasはピクセル絵なので、そのままでは読めません。

• 近接に表データ（同ページ）を常設。
• aria-live領域にフォーカス点の値をテキストで吐き出す。
• 凡例や操作はHTMLボタンで実装（aria-pressed/aria-controls など）。

最小パターン

<canvas id="chart" width="640" height="360" aria-describedby="chart-desc"></canvas>
<p id="chart-desc" class="sr-only">四半期別売上。Aは120→180、Bは80→130。表は下段。</p>
<div id="live" role="status" aria-atomic="true" class="sr-only"></div>

<table aria-label="四半期別売上（データ）">…</table>

// ライブラリのhover時イベントで:
function onPointFocus(series, quarter, value) {
  document.getElementById('live').textContent = `${series}、${quarter}、${value}`;
}

7. 地図・ヒートマップ・ネットワーク図：強いビジュアライゼーションの配慮

• ヒートマップ：色段階＋数値ラベル、閾値は凡例に数値を。色覚配慮パレット（青橙など）を。
• 地図：境界線の太さ・ラベルのコントラスト、選択時は色＋縁取り＋ドット等で重複。表のサマリー（都道府県ランキング等）を併置。
• ネットワーク図：ノードの形・サイズ、リンクの線種で意味を重複。フォーカス移動で近傍ノードのリストをテキストで提示。

8. ダッシュボード設計：認知負荷を下げる“やさしい配置”

• 一画面に3～6コンポーネントが目安。カード毎に見出しを付け、要点の短文をカード上部に。
• 単位・時点・出典はカードの右上やフッターに一貫配置。
• 並び順は「全体→セグメント→例外」の論理順。
• 色の意味（成果/注意/警告）は全カードで統一。
• キーボード操作：カード群を**role="region"で区切り、aria-label**で名前付け。Tabで巡回、内部はArrowなど。

9. 代替表現の作法：本文サマリー／ダウンロード／印刷

• 本文サマリー：グラフの結論・傾向・例外を日本語で短く。
• CSV/Excelのダウンロードを提供（列名＝見出しを守る）。
• 印刷スタイル（@media print）で白黒でも識別可能に（線種・ラベルの強化）。

10. コード雛形：カード化テーブル＋横スクロールのハイブリッド

<div class="table-wrap">
  <table class="responsive">
    <caption>売上サマリー（単位：百万円）</caption>
    <thead>
      <tr>
        <th scope="col">製品</th>
        <th scope="col">Q1</th>
        <th scope="col">Q2</th>
        <th scope="col" class="opt">Q3</th>
        <th scope="col" class="opt">Q4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">A</th>
        <td data-label="Q1">120</td>
        <td data-label="Q2">140</td>
        <td class="opt" data-label="Q3">160</td>
        <td class="opt" data-label="Q4">180</td>
      </tr>
      <tr>
        <th scope="row">B</th>
        <td data-label="Q1">80</td>
        <td data-label="Q2">95</td>
        <td class="opt" data-label="Q3">110</td>
        <td class="opt" data-label="Q4">130</td>
      </tr>
    </tbody>
  </table>
</div>

.table-wrap{ overflow-x:auto; }
.responsive{ width:100%; border-collapse:collapse; }
.responsive th, .responsive td { border:1px solid #ddd; padding:.5rem; }
.responsive th[scope="row"]{ background:#fafafa; }

/* モバイルでカード化＋重要列のみ表示 */
@media (max-width: 42rem){
  .responsive thead{ position:absolute; left:-9999px; }
  .responsive tr{ display:block; margin:.75rem 0; border:1px solid #ddd; }
  .responsive th[scope="row"], .responsive td{ display:grid; grid-template-columns:8rem 1fr; }
  .responsive td::before, .responsive th[scope="row"]::before{
    content: attr(data-label); font-weight:600;
  }
  .responsive th[scope="row"]::before { content: "製品"; }
  .responsive .opt{ display:none; }
}

11. “やってはいけない”表・グラフの落とし穴

12. テスト（5分スモーク）：制作のたびに回す最小儀式

1. スクリーンリーダーでテーブル：tで表へ→矢印でセル移動→見出しが読まれるか。
2. グラフ画像のalt：短文で要点が伝わるか。本文に詳細サマリーがあるか。
3. 色をグレースケールにしても系列識別ができるか（線種・形・ラベル）。
4. モバイル320px：テーブルが読める（横スクロールorカード化）、列欠落に対案があるか。
5. キーボード：カード・ダッシュボード内をTabで巡回できるか、フォーカスが見えるか。
6. 拡大150–200%：リフローで横スクロール強要になっていないか（表を除く）。

13. 組織導入のコツ：デザインシステムとデータ契約

• デザインシステム
  • テーブル仕様：caption必須、scope/headersの使い方、レスポンシブの3パターン定義。
  • グラフ仕様：色パレットの意味、線種・形の割当、凡例の配置ルール。
  • アクセシブルネーム：<figure>/<svg>/<canvas> のタイトル・説明の書式。
• データ契約
  • 列名（キー）は見出しテキストと一致させる。
  • 単位・時点・定義をメタデータとして常に渡す。
  • 誤差・欠損・注記の扱いを統一（例：「—」は欠損、「0」は実測ゼロ）。
• 運用
  • PRテンプレに表/グラフのチェックリストを追加。
  • 当事者ヒアリング（色覚多様性・読み上げユーザー）を四半期に1回。

14. ケーススタディ：ダッシュボードの“色依存”を救う

Before

• 折れ線3系列が色だけで区別、凡例は左上に集合。
• Canvasのみ、表データ無し。
• モバイルで凡例が折り返し、系列が見分けにくい。

After

• 実線●／破線▲／点線◆で線種と形を割当。
• 各線の近くに系列ラベルを表示、凡例は補助へ。
• 近接テーブルを併置、Canvasのホバーは**role="status"**へ値を出力。
• モバイルでは最新点のみラベルを見せ情報密度を制御。
• 結果：見分けにくさの指摘が**−82%、検索→意思決定までの時間−19%**。

15. よくある質問（FAQ）

Q1：表がどうしても複雑（結合だらけ）になってしまいます。
A：表を分割し、見出し行を繰り返す方が読み上げ・拡大で堅牢です。どうしても結合が必要なら**headers/id**で関連を張り、キャプションと注記で関係性を説明します。

Q2：グラフだけで十分に見やすいのですが、表も必要？
A：はい。グラフは要約、表は根拠。検索・比較・読み上げの観点で表を併置してください。小さくても構いません。

Q3：色覚対応の推奨パレットは？
A：青–橙系、紫–緑系など明度差のある補色が扱いやすいです。線種・形を必ず併用し、コントラストも確認しましょう。

Q4：ライブラリ選定の基準は？
A：SVG出力ができるか、アクセシブルな凡例・ツールチップをHTMLでカスタムできるか、キーボードAPIやイベントフックがあるかを基準にしてください。

16. チェックリスト（貼り付け用）

• [ ] 表に**caption**があり、単位・時点が明記
• [ ] 見出しセルは**th、scope/headers**で関係性が露出
• [ ] レスポンシブは横スクロール／優先度／カード化のいずれかで情報欠落なし
• [ ] グラフの要点サマリーを本文に記述、表データを近接配置
• [ ] 系列識別は色＋線種＋形／パターンで重複伝達
• [ ] SVGは**title/descあり、Canvasは表併置＋ライブ出力**
• [ ] 軸・凡例・ラベルの非テキスト3:1、本文の4.5:1
• [ ] キーボードでカード・データ点に到達、フォーカス可視
• [ ] 320pxと200%拡大で破綻なし
• [ ] 5分スモークテスト（§12）を通過

17. 対象読者と導入メリット（具体）

• データアナリスト：表＝根拠、グラフ＝要約の二層提示で誤読が減少、意思決定の説得力が向上。
• フロントエンドエンジニア：SVG優先・Canvas補強の方針で実装が一貫、回帰に強い。
• UI/UXデザイナー：色以外の符号化・凡例の近接配置をガイドライン化し、視認性と理解の速度が向上。
• 公共機関・教育：検索可能・読み上げ可能な資料で説明責任を果たし、問い合わせ負担を軽減。
• PM／経営層：AA水準の可視化は訴訟リスクの低減とブランド信頼につながる。

18. まとめ：数値の“やさしい器”をつくる

1. テーブル＝関係の器を正しく：caption・th・scope・headersで意味を露出。
2. レスポンシブは情報欠落ゼロ：横スクロール／優先度／カード化を使い分け。
3. グラフはテキストと対：本文要点＋表データを併置、色以外の符号化で誰でも同じ理解へ。
4. SVG優先、Canvasは表／ライブで外へ。
5. 非テキスト3:1／本文4.5:1、フォーカス可視・キーボード巡回を守る。
6. チェックリストと5分テストを運用に組み込み、再現可能な品質へ。

数字は、見る人の状況に寄り添うとき、はじめて意思決定を後押しする力になります。
あなたの表とグラフが、誰にとっても迷わず・疲れず・同じ理解に届く“やさしい器”になりますよう、わたしも心を込めてお手伝いしますね。