charts-graphs

Name: charts-graphs
Author: mgifford

github.com/mgiffordデザイン・UI57150 回インストール6 週間前に更新

リポジトリ

charts-graphs について

チャートやグラフを作成・レビューする開発者向けのアクセシビリティスキルです。要約や構造化データを含む段階的な情報提示、キーボード操作、動的更新の通知を扱います。

主な機能

01チャート情報の段階的な提示
02要約と構造化データの提供
03色と視覚表現の指針
04キーボード操作の指針
05動的更新と状態通知

活用シーン

01複雑なチャートにテキスト説明を追加
02正確な値を表形式で提供
03インタラクティブなチャートのキーボード対応を確認
04色の表現とフィルター通知を点検

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mgifford/accessibility-skills --skill charts-graphs

インストール後、Claude Code で/charts-graphsを入力して読み込まれたか確認します。

同梱ファイルSYNC.md

詳細

グラフとチャートのアクセシビリティスキル

正本：mgifford/ACCESSIBILITY.md の examples/CHARTS_GRAPHS_ACCESSIBILITY_BEST_PRACTICES.md このスキルはそのファイルを基にしています。判断に迷った場合は、例を優先してください。

データの可視化を作成またはレビューする際は、これらのルールを適用してください。 このスキルを読み込むのは、プロジェクトにチャートまたはグラフが含まれている場合のみです。

基本方針

チャートは、特定の色を認識したり、視覚的な位置を調べたり、ポインターを使ったり、説明のない図を理解したりしなくても、情報を伝え、想定されたタスクを支援できなければなりません。アクセシビリティは、長い alt ラベルをひとつ付ければよいというものではありません。理解しやすいビジュアル、簡潔な要約、必要に応じた構造化データ、インタラクションのためのアクセシブルなコントロールを組み合わせた、階層的な提示を使用してください。適切な詳細さは目的によって異なります。単一値のスパークラインと探索型ダッシュボードに、同じ量の説明は必要ありません。

チャートの種類を選ぶ前に、まずユーザーの疑問を明確にしてください。チャートは何に答えるべきでしょうか。どの比較、傾向、分布が重要でしょうか。ユーザーが必要としているのは結論、正確な値、あるいは探索でしょうか。アクセシブルな要約では、ビジュアルと同じ疑問に答えてください。結論を省いて、ビジュアルの性質だけをすべて説明しないでください。

重大度スケール（このスキル）

レベル	意味
Critical	チャートが重要なデータを伝えているにもかかわらず、アクセシブルな代替手段がまったくない
Serious	代替手段はあるものの、不完全または大幅に誤解を招く
Moderate	代替手段はあるが、色に依存しない表示やコントラストに問題があり、利用しにくい
Minor	ベストプラクティスからの逸脱で、アクセスへの影響はわずか

階層的な情報モデル

必要な情報レイヤーを提供し、すべてをひとつの長いアクセシブル名に重複して詰め込まないでください。

タイトル — 対象を示します
コンテキスト — 範囲、日付、単位、対象集団、フィルター
要約 — 主な傾向、比較、または知見
構造化された詳細 — 必要に応じた正確な値、カテゴリ、関係
出典と方法論 — 情報を評価し、再利用できるようにします
インタラクションのフィードバック — 有効なフィルター、選択、読み込み、エラー

すべてのレイヤーを画像の alt、SVG の <title>、またはひとつの aria-label に含めないでください。長いアクセシブル名は、確認や移動が困難です。

表現方法の選び方：

ニーズ	適切な出発点
少数の値からひとつの結論を導く	可視テキスト。必要に応じてシンプルな静的チャート
行や列をまたぐ正確な比較	HTML データテーブル
拡大縮小できる静的チャート	SVG、または `<img>` としてエクスポートした SVG
多数のマークを使った密度の高い描画	Canvas ＋可視の HTML 要約とデータへのアクセス手段
ユーザーによる探索やフィルター操作	チャート＋ネイティブ HTML コントロール＋構造化された結果
空間的な関係	地図／図解＋テキストで示す同等の位置／関係

SVG は自動的にアクセシブルになるわけではなく、canvas も自動的にアクセシブルでなくなるわけではありません。どの描画技術を使用する場合でも、実装によって同等の情報を提供する必要があります。チャートよりもテーブルや短い段落の方が明確に疑問へ答えられる場合は、よりシンプルな表現を使用してください。

重要：すべてのグラフにテキストによる代替情報を用意してください

テキストによる代替情報のないグラフは重大です。視覚障害のあるユーザーや画像を無効にしているユーザーには、データがまったく伝わりません。

シンプルなグラフ — 明確な要点を伝える簡潔なalt：

<figure>
  <img src="/assets/charts/quarterly-sales.svg"
       alt="Sales increased each quarter, from $1.4 million in Q1 to $2.3 million in Q4."
       width="800" height="450">
  <figcaption>Quarterly sales for 2025. Values are in Canadian dollars.</figcaption>
</figure>

視覚的な要素を列挙するのではなく、文脈におけるグラフの目的に合わせて代替情報を記述してください。「グラフ」「売上グラフ」、ファイル名、軸の目盛りをすべて列挙したもの、データが裏付けていない解釈は避けてください。周囲の記事ですでに同じ結果を説明している場合は、同じ内容を無理に繰り返さず、altを簡潔にしてください。

複雑なグラフ — 短い識別情報と、表示される詳細な説明：

<figure>
  <img src="/assets/charts/visitors-by-sector.svg"
       alt="Line chart of accessibility adoption from 2019 to 2024, described below."
       width="900" height="520">
  <figcaption>
    <h2>Accessibility adoption by sector, 2019 to 2024</h2>
    <p>Adoption increased in all three sectors. Government remained highest,
    rising from 42% to 78%. Corporate adoption rose from 28% to 61%, with its
    largest increase in 2021. Non-profit adoption rose from 19% to 47%.</p>
    <details><summary>View annual values</summary></details>
    <p>Source: Annual organizational survey. Percentages are rounded.</p>
  </figcaption>
</figure>

詳細な説明は見える形で表示してください。これはスクリーンリーダーのユーザーだけでなく、拡大表示を使うユーザー、音声読み上げを使うユーザー、対象分野に詳しくないユーザーにも役立ちます。aria-describedbyを使うと画像とプレーンテキストの説明を関連付けられますが、ATは通常、参照先のコンテンツを1つの文字列にまとめるため、見出し、リスト、表のナビゲーション可能な構造が失われます。構造化された詳細説明への唯一の手段としてaria-describedbyを使わないでください。

重大：ユーザーが値を必要とする場合は構造化データを提供してください

<details>
  <summary>View data for monthly website visitors</summary>
  <table>
    <caption>Monthly website visitors, January to March 2025</caption>
    <thead>
      <tr><th scope="col">Month</th><th scope="col">Visitors</th><th scope="col">Change</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">January</th><td>12,400</td><td>Not applicable</td></tr>
      <tr><th scope="row">February</th><td>15,800</td><td>27.4%</td></tr>
    </tbody>
  </table>
</details>

特定の系列数やデータ点数を超えた場合に表を必須とする、標準に基づくしきい値はありません。正確な値や個別の比較がタスクの一部である場合は、構造化データを提供してください。非常に大きなデータセットでは、利用可能なフィルター付きの表に加えて、ダウンロード可能なオープン形式（CSV）を用意してください。ダウンロードを用意しても、ページ上の概要の代わりにはなりません。欠損値、非公開の値、推定値、丸めた値をどのように表しているかを明記してください。

重大：SVG グラフ

アトミックなSVG画像 — グラフを1つの画像として公開する場合：

<figure>
  <svg role="img" aria-labelledby="sales-title" aria-describedby="sales-summary" viewBox="0 0 640 360">
    <title id="sales-title">Quarterly sales for 2025</title>
    
  </svg>
  <figcaption id="sales-summary">
    Sales increased in every quarter, from $1.4 million in Q1 to $2.3 million
    in Q4. Values are in Canadian dollars.
  </figcaption>
</figure>

ルートにrole="img"が指定されたSVGの子孫要素にrole="list"／role="listitem"を指定しても、ナビゲーション可能な状態が保たれるとは考えないでください。画像ロールはグラフィック全体を1つの単位として扱い、その子要素はプレゼンテーション用になるためです。これは単にサポートに一貫性がないという問題ではなく、role="img"のセマンティクスに反します。

構造化またはインタラクティブなSVG — 個々の部分を閲覧または操作する必要がある場合は、グラフィック全体をrole="img"で平坦化しないでください。ARIA Graphics Moduleでは構造化されたグラフィックのロールが定義されていますが、実際のプロジェクトで使用するATの組み合わせでサポートをテストする必要があります。構造化されたSVGのアクセシビリティツリーが機能する場合でも、HTMLで表示される概要とデータ提示を必ず用意してください。結論を把握するために、ユーザーにすべての棒、点、グリッド線をたどらせないでください。装飾グループの除外、一意のID、DOMの順序については、skills/svg/SKILL.mdを参照してください。

重大：Canvasベースのグラフにはアクセシブルな代替情報が必要です

<canvas>はピクセルを描画します。ビットマップからは、視覚的なオブジェクト、ラベル、関連性がATに伝わりません。代替情報のないcanvas描画のグラフは最低でも重大であり、データを提示する唯一の方法である場合は深刻です。

<figure>
  <canvas id="regional-sales-chart" width="800" height="450"
          role="img" aria-label="Q2 sales by region"
          aria-describedby="regional-sales-summary">
    Q2 sales by region. A summary and data table follow.
  </canvas>
  <figcaption id="regional-sales-summary">
    The West had the highest Q2 sales at $510,000. The East had the lowest at
    $280,000. A complete data table follows.
  </figcaption>
</figure>

視覚的なcanvasは、隣接する概要や表と常に同期させてください。これは主要かつ最も信頼性の高いアクセス手段であり、canvasのARIAだけに頼るより確実です。インタラクティブな領域に対応するフォーカス可能な子孫要素を含むcanvasの代替コンテンツでは、状態、フォーカス、ヒット領域、キーボード操作を1対1で同期させる必要があります。代替サブツリーを使うための検証済みの理由がない限り、canvasの外に見えるHTMLコントロールを配置してください。重要な詳細をcanvasの描画コマンドやライブラリの設定にしか含めないでください。

ライブラリ固有の注意事項： Chart.jsはアクセシビリティ用のフックを提供していますが、組み込みの表は出発点であり、完全な解決策ではありません。隣接する概要で補ってください。D3は既定でcanvasではなくSVGを描画するため、上記のSVGのパターンを使用してください。Highcharts、Vega-Lite、Observable Plotには、それぞれ独自のアクセシビリティモジュールがあります。最新のドキュメントを確認し、ライブラリの説明にかかわらず、必ず隣接するデータ表で補ってください。生成されたARIAはチームが所有するコードとして扱ってください。ブラウザーのアクセシビリティツリーを調べ、宣伝文句に頼らないでください。

重大：色と視覚的な符号化

系列、状態、しきい値、領域の識別に色だけを使わないでください。男性の約8％、女性の0.5％に色覚異常があります。色に加えて、直接的なテキストラベル、異なる線種、点の形状、塗りつぶしパターン、記号、境界、または説明付きの位置を組み合わせてください。

<svg width="0" height="0" aria-hidden="true" style="position:absolute">
  <defs>
    <pattern id="pattern-dots" patternUnits="userSpaceOnUse" width="6" height="6">
      <circle cx="2" cy="2" r="1.5" fill="currentColor"/>
    </pattern>
  </defs>
</svg>
<rect fill="url(#pattern-dots)" x="50" y="50" width="60" height="100"/>

色覚異常に配慮したパレット：

Okabe-Ito — 量的データに推奨されるデフォルト：#E69F00、#56B4E9、#009E73、#F0E442、#0072B2、#D55E00、#CC79A7、#000000
ColorBrewer — 連続（順序のあるデータ）、発散（意味のある中心を持つデータ）、または定性（カテゴリ）のパレットを、色覚異常に配慮したフィルター付きで提供します。

パレットが単に「色覚異常に安全」と説明されていることだけに頼らないでください。線の太さ、点のサイズ、重なり合うマーク、選択状態、サポートするすべてのテーマを含め、チャート全体をテストしてください。シミュレーションはレビューの補助であり、規格に基づくテストの代わりにはなりません。避けるべきもの：唯一の識別手段としての赤と緑（最も一般的なCVDの組み合わせ）、彩度の高い虹色／ジェットのパレット（知覚上の順序が適切でなく、多くのCVDユーザーには色の違いが均一に見えます）。

**コントラスト：**テキストラベルは4.5:1以上（大きなテキストは3:1以上）、必要な非テキストのグラフィカル情報は隣接する色に対して3:1以上にしてください。チャートに表示されているというだけで、装飾的なグリッド線に3:1の基準が適用されるわけではありません。チャートの理解や操作に実際に必要な視覚情報だけをテストしてください。

重大：データの閲覧と操作を分ける

ほとんどのチャート値は、インタラクティブにする必要はありません。閲覧には要約やテーブルを用意し、ボタン、リンク、チェックボックスは実際の操作（フィルタリング、選択、詳細表示）にのみ使用してください。凡例やフィルターには、ネイティブのHTMLコントロールを使ってください。

<fieldset class="series-controls">
  <legend>Data series shown</legend>
  <label><input type="checkbox" name="series" value="2024" checked> 2024 sales</label>
  <label><input type="checkbox" name="series" value="2025" checked> 2025 sales</label>
</fieldset>

すべてのデータポイントをページのTab移動順に追加しないでください — フォーカス停止箇所が数百もあるチャートは、到達可能でも実用的には操作できません。

重大：キーボード操作

ポインターやタッチで利用できるすべての機能を、キーボードでも使えるようにしてください。ネイティブのHTMLコントロール間を通常のTab移動で移動する方法を優先してください。チャートに複合的なナビゲーションモデルが本当に必要な場合は、複合要素への移動にTab停止箇所を1つ設ける、比較可能な項目間を矢印キーで移動する、必要に応じてHome／Endを使用する、チャートの更新後も位置を維持する、チャートの前またはチャート上に操作方法を記載する、現在の項目の名前／値／状態を示す、チャートから直接抜けられる方法を用意する、といった対応をしてください。包括的に見せるためだけにキーボード操作を作り出さないでください。キーの動作は、ウィジェットの実際の意味と実装に合致している必要があります。フォーカスインジケーターは、チャートのすべての色の上で見える状態を保ち、SVGのviewBoxやoverflowコンテナーで切り取られないようにしてください。

キーボードで操作できないインタラクティブなチャートは、静的な代替手段があれば重大、それが唯一の提示方法であれば致命的です。

重大：ツールチップとデータの詳細

値を知る唯一の方法として、ホバーに頼らないでください。直接ラベル、アクセシブルなテーブル、フォーカス可能なコントロール、またはユーザーが操作できる詳細パネルを使用してください。詳細な情報には、一時的なツールチップよりも開閉式の表示を優先してください。

<button type="button" aria-expanded="false" aria-controls="march-details">
  March: 19,200 visitors
</button>
<div id="march-details" hidden>
  <p>March increased by 21.5% from February.</p>
</div>

ホバー／フォーカス時にカスタムコンテンツを表示する場合、WCAG 1.4.13では一般に、そのコンテンツを（ポインター／フォーカスを移動させずに）閉じられること、コンテンツ上にポインターを移動できること、表示が持続することが求められます。同じコンテンツをキーボードフォーカスからも表示できるようにしてください。タッチユーザーには、タップ操作または常時利用可能な代替手段が必要です。ツールチップにaria-describedbyを指定しながら、同時にaria-hidden="true"も設定しないでください — 非表示のコンテンツは、アクセシブルな説明として機能できません。

中程度：動的な更新とステータスメッセージ

フィルターが変更されたら、同じデータモデルから表示中のタイトル、概要、表、グラフを更新します。結果数／読み込み中／更新結果のステータスを、プログラムから判定できるようにします。

<p id="chart-status" role="status" aria-atomic="true"></p>

function reportChartUpdate({ period, regions, total }) {
  document.getElementById("chart-status").textContent =
    `Showing ${period}: ${regions} regions, total sales ${total}.`;
}

更新が発生する前にステータス領域を作成し、通知は簡潔にします。読み上げを繰り返させるためだけにライブ領域を消去して書き直したり、頻繁に更新されるグラフのすべてのポイントを通知したりしないでください。WCAG 4.1.3 は、変更のたびにステータスメッセージを表示することを求めているわけではなく、既存のメッセージをプログラムから判定できることを求めています。リアルタイムグラフでは、一時停止／更新コントロールを用意し、新しいデータが届いてもフォーカス／選択を維持してください。

中程度：アニメーション付きグラフは `prefers-reduced-motion` を尊重する必要があります

@media (prefers-reduced-motion: reduce) {
  .chart-mark, .chart-axis {
    animation: none;
    transition: none;
  }
}

const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Chart.js
options: { animation: prefersReduced ? false : { duration: 800 } }
// D3.js
selection.transition().duration(prefersReduced ? 0 : 750).attr('height', d => yScale(d.value));

SVG のすべての子孫に適用する一律のルールではなく、グラフのコンポーネントを対象にします。アニメーションがなくても既定の情報が理解できるようにし、フィルターの変更時にすべてのマークをアニメーションさせないでください。変化を示す唯一の手段として動きを使わないでください。WCAG 2.2.2 に従って一時停止／停止コントロールを用意し、動きの設定にかかわらず点滅するコンテンツは避けてください（WCAG 2.3.1）。ループするダッシュボードや自動更新されるダッシュボードには、見える一時停止コントロールを用意してください。

中程度：レスポンシブレイアウト、リフロー、ズーム

320 CSS ピクセル幅と 400％ズームでテストし、タイトル、概要、コントロール、説明、表のセルを、情報を失わずにリフローできるようにします。WCAG 1.4.10 では、2 次元のレイアウトが本当に必要なコンテンツ（一部の地図、図表、データ表）に例外が認められています。ラベルが読めなくなるまで、すべてのグラフを縮小することが求められているわけではありません。

<div class="chart-scroll" role="region" aria-label="Monthly sales chart, horizontally scrollable" tabindex="0">
  
</div>

.chart-scroll { max-inline-size: 100%; overflow: auto; }

2D スクロールが必要な場合は、ページ全体ではなくグラフ／表に限定し、見える名前と操作方法を用意して、キーボードで操作できるようにします。コントロール／フォーカスが見える状態を保ち、空間的な移動を必要としない概要を用意してください。インタラクティブなグラフのコントロールは、WCAG 2.5.8 のターゲットサイズの最小要件、または定義された例外を満たす必要があります。小さな視覚的ポイントでも、見た目のマークサイズを変えずに、より大きな透明のヒット領域を設定できます。

グラフの種類別ガイダンス

棒グラフ／縦棒グラフ — 明確に説明された基準値を使う場合を除き、数量軸はゼロから始めます。カテゴリ／単位にラベルを付け、長さや位置を歪める 3D 効果は避けてください
折れ線グラフ — 色に加えてラベル／スタイル／形状で系列を区別します。観測されていない値を視覚的に結ばず、欠損を示します。対数／非線形スケールについて説明してください
円グラフ／ドーナツグラフ — 全体に対する割合を示すことが本来の目的である場合にのみ使用します。正確な比較や、スライスが多数または類似している場合には避けてください。スライスに直接ラベルを付け、中央の合計値をグラフィック内に埋め込んだテキストだけで示さないでください
散布図 — 両方の軸、単位、サンプルサイズ、ポイントのサイズ／形状の意味を説明します。因果関係を誇張せずに、クラスター／相関／外れ値を説明してください
積み上げグラフ — 基準線を共有するセグメントのみ、容易に比較できます。カテゴリをまたいだ正確な比較には表を用意し、合計と、値が絶対値かパーセンテージかを示してください
ヒートマップ — 色のグラデーションだけに頼らないでください。重要なセルにはラベル／記号／境界線／表を用意し、スケール、しきい値、欠損データの扱いを明示してください
地図 — 視覚的な位置／色／ポインターでの探索だけに頼らず、場所／値／ルートをテキストまたは構造化 HTML で提供してください（skills/maps/SKILL.md を参照）

軽微：ソニフィケーションとマルチモーダルな代替手段

ソニフィケーション（音高／持続時間／リズム／ステレオ位置）は、テキストや構造化データの代替ではなく、任意の探索モードとして役立ちます。各音の要素が何を表すかを説明し、開始／一時停止／再生／音量／ミュートのコントロールを用意してください。音声を自動再生せず、同等の値をテキストでも提供します。状態やエラーを示す唯一の手段として音を使わないでください。

テーマ、強制カラー、エクスポート

セマンティックトークン（サーフェス、テキスト、軸、系列、フォーカス、選択、ステータス）を使って、サポートするすべてのテーマを検証します。強制カラーモードでは、色が置き換わっても判別できるテキストラベル／パターン／形状を使用し、必須の線やフォーカスインジケーターにはシステムカラーを使用します。チャート全体に forced-color-adjust: none を適用しないでください。選択済み／非表示／強調表示された系列を引き続き区別できることを確認します。

@media (forced-colors: active) {
  .chart-series { fill: none; stroke: CanvasText; }
  .chart-series[data-selected="true"] { stroke: Highlight; stroke-width: 4; }
}

エクスポート： HTML／PDF／プレゼンテーション形式では、意味のあるタイトルと簡潔な代替情報を保持します。表示されている要約とソースを含め、形式が対応している場合は構造化テーブルタグを含めます。オープン形式で基礎データを提供し、単位／ロケール／日付範囲／フィルター／欠損値に関する注記を保持します。タスクで値が必要な場合、スクリーンショットだけをエクスポートしないでください。生成された PDF／スプレッドシートは個別にテストしてください。Web チャートのアクセシビリティがエクスポートにも自動的に引き継がれるわけではありません。

テスト

コンテンツレビュー： タイトル／範囲／単位／フィルター／ソースが正確であることを確認します。表示されている要約を最新データと照合し、結論が相関関係／精度／確実性を誇張していないことを検証します。欠損値／推定値／丸められた値を確認します
ビジュアル／インタラクション： すべての系列をグレースケールと CVD シミュレーションで確認します。すべてのテーマ／状態でテキストと必須の非テキスト要素のコントラストを測定します。200%／400% のズームと狭いビューポートをテストします。キーボードでの操作、フォーカス順序、スクロール領域をテストします。ポインター、キーボード、タッチでツールチップ／詳細を表示します。すべてのフィルターを変更し、要約／テーブル／チャートの同期を確認します。動きの低減、高コントラスト、強制カラーをテストします。リアルタイム更新を一時停止し、ユーザーが読み終えられることを確認します
支援技術のレビュー： 意図したロール／名前／説明を確認します。表示されている構造化された詳細が見出し／リスト／テーブルとして引き続き操作できることを確認します。装飾的な内部要素がノイズを生まないようにします。コントロールが名前／ロール／値／状態を通知することを確認します。更新メッセージが簡潔で、過度に繰り返されないことを確認します
自動テスト： 名前の欠落、無効な ARIA、テーブルマークアップの問題、コントラスト不足、重複 ID、フォーカスの問題を検出できますが、要約が正確か、テーブルが同等か、情報を実際に探しやすいかは判定できません。チャートをコンポーネントテスト、ページレベルのスキャン、ビジュアルリグレッション、データ同期テストに含めます。手動レビューも引き続き必要です

よくある失敗

失敗	修正方法
`alt="Chart"` は対象を特定していますが、その情報は伝えていません	目的または主な知見を記述します
視覚的な詳細をすべて、長いアクセシブルネームに詰め込んでいます	タイトル、要約、構造化データ、出典を分けます
`aria-describedby` が複雑な表を指しており、ナビゲーションが保持されると想定しています	表を構造化された HTML として、見える状態で提供します
SVG のルートに `role="img"` があり、子孫にリストやコントロールのロールが使われています	単一の画像、またはテスト済みの構造化グラフィックモデルのいずれかを選び、両方は使いません
Canvas の重要なデータが描画コマンドにしか存在しません	見える要約と、HTML からデータにアクセスする手段を提供します
装飾的なグリッド線を 3:1 にすることを強制しています	チャートの理解や操作に必要な視覚情報のみをテストします
系列の違いが色だけです	直接ラベル、線のスタイル、点の形状、またはパターンを追加します
すべてのデータポイントを Tab 順序に追加しています	データの閲覧には表を使い、実際の操作にのみコントロールを使います
ホバーのみのツールチップが、正確な値を示す唯一の手段です	直接ラベル、表、キーボードでのアクセス、または常時表示されるパネルを提供します
ツールチップが `aria-describedby` のコンテンツであると同時に `aria-hidden="true"` になっています	説明のコンテンツを公開したままにします
フィルターを変更するたびにライブリージョン経由で通知しています	意味のあるステータスメッセージのみを通知します
ラベルが読めなくなるまでチャートを 320px に圧縮しています	補足コンテンツをリフローし、必要に応じてラベル付きのスクロール領域内に収めます
ライブラリのアクセシビリティに関する主張を、出力をテストせずに受け入れています	インストール済みのバージョンをテストし、生成されたセマンティクスを自分で管理します
Web チャートは問題なくても、PDF／画像のエクスポートに代替手段がありません	すべての出力形式を個別にテストし、問題を修正します

完了条件チェックリスト

主要な WCAG 基準

1.1.1 非テキストコンテンツ（A）— テキストによる代替手段がない場合は重大
1.3.1 情報と関係性（A）
1.3.3 感覚的な特徴（A）— 指示を位置や形状だけに依存させてはいけません
1.4.1 色の使用（A）— 色だけで情報を表している場合は深刻
1.4.3 コントラスト（最低限）（AA）
1.4.10 リフロー（AA）
1.4.11 非テキストのコントラスト（AA）
1.4.13 ホバーまたはフォーカス時のコンテンツ（AA）
2.1.1 キーボード（A）
2.2.2 一時停止、停止、非表示（A）
2.3.1 3 回の閃光、または閾値以下（A）— 高速で点滅するチャートでは重大
2.5.8 ターゲットサイズ（最低限）（AA）
4.1.3 ステータスメッセージ（AA）

参考資料

今後の標準動向： データビジュアライゼーションのコントラスト要件は、 WCAG 3.0 の APCA モデルのもとで変更される可能性があります。現在の 3:1 の非テキストコントラスト比は引き続き適用されます。動向を確認してください：https://www.w3.org/TR/wcag-3.0/

Markdown 対応

ログインしてコメント

基本情報

作者: mgifford
リポジトリ: mgifford/accessibility-skills
カテゴリ: デザイン・UI
インストール数: 150
GitHub スター: 57

問題を報告