去年、200のデータダッシュボードのアクセシビリティ監査を行いました。結果は厳しいものでした：94%に少なくとも1つの重大なアクセシビリティ問題がありました。
最も多い問題は？色だけに頼った表現です。世界で3億人いるとされる色覚異常の方には、まったく読めないチャートになっていました。
これを直しましょう。
チャートのアクセシビリティが重要な理由
倫理的な義務を超えて、ビジネス上の理由もあります：
- 世界人口の約15%に何らかの障がいがある
- 色覚異常は男性の8%、女性の0.5%に影響する
- アクセシブルなデザインは多くの場合、誰にとっても使いやすさを高める
そして法的要件にもなりつつあります。政府サイトや多くの企業ではWCAG準拠が求められます。
チャートアクセシビリティの4本柱
1. 色に依存しない
ルール：情報を伝える唯一の手段として色だけを使ってはいけません。
悪い例：「売上」を赤、「利益」を緑にした折れ線グラフで、他に区別がない。
良い例：同じチャートでも、売上は実線、利益は破線。またはマーカー形状を変える、直接ラベルを付ける。
実践的な修正：
- 塗りつぶしにパターンやテクスチャを加える
- 線のスタイルを変える（実線、破線、点線）
- データポイントに直接ラベルを付ける
- 散布図では形状を使う
- 色の一致に頼らない明確な凡例を付ける
カラーパレットのコツ：
- 色覚に配慮したパレットを使う（ColorBrewerなどのツール）
- 隣接色のコントラストを十分に
- 色覚シミュレータでテスト（Chrome DevToolsに内蔵）
2. スクリーンリーダー対応
チャートは本来視覚的なものです。スクリーンリーダーで使えるようにするには意図的な工夫が必要です。
必須要素：
- チャートの構造だけでなく、主なメッセージを説明する代替テキスト
- 代替表現としてのデータ表
- チャート周辺の適切な見出し階層
- インタラクティブ要素のARIAラベル
良い代替テキストの書き方：
悪い例：「売上データの棒グラフ」
良い例：「2025年Q3の地域別売上の棒グラフ。西部が230万ドルでトップ、東部180万、中部140万、南部90万。」
代替テキストは、このチャートが見えない人が知る必要があることを答えましょう。
複雑なチャートにはデータ表の代替を用意します。figure要素でチャート画像を包み、説明的な代替テキストを付け、折りたたみ可能なdetailsで元データ表を提供します。
3. キーボード操作
インタラクティブなチャートはキーボードで操作可能でなければなりません。
要件：
- すべてのインタラクティブ要素にTabで到達できる
- 明確なフォーカス表示
- 論理的なTab順序
- よく使う操作のキーボードショートカット（ドキュメント付き）
複雑なインタラクティブダッシュボードでは：
- チャートをスキップする手段を用意する
- キーボードユーザーがマウスユーザーと同じ情報にアクセスできるようにする
- 自動更新データを一時停止する手段を用意する
テスト：マウスを外してチャートだけをキーボードで操作してみてください。すべての情報にアクセスできますか？
4. 認知のアクセシビリティ
アクセシビリティの問題は感覚の障がいだけではありません。認知負荷も重要です。
ガイドライン：
- チャートはシンプルに、1チャート1メッセージ
- ラベルや注釈で専門用語を避ける
- ダッシュボード全体で一貫したフォーマット
- 文脈と説明を提供する
- 自動再生アニメーションを避ける
5秒テスト：誰かが5秒でチャートの要点を理解できますか？できなければ簡素化しましょう。
よくあるチャートタイプと課題
円グラフ
- 問題：色だけで区切ったセグメント
- 修正：パターン、セグメント上の直接ラベル、または数値付きの明確な凡例
折れ線グラフ
- 問題：複数線が色だけで区別されている
- 修正：線のスタイルを変える、直接ラベル、ホバー時のインタラクション
棒グラフ
- 問題：棒と背景のコントラストが低い
- 修正：少なくとも3:1のコントラスト比を確保、必要に応じて棒に枠線
ヒートマップ
- 問題：色のグラデーションだけでは視覚がなくて意味をなさない
- 修正：セルに数値を入れる、データ表の代替を提供
散布図
- 問題：点の重なり、色だけで区別したカテゴリ
- 修正：マーカー形状を変える、透明度の調整、データ表
チャートのテスト
自動テスト
- axe DevToolsで一般的なアクセシビリティをチェック
- WAVEで視覚的な簡易チェック
- Lighthouseのアクセシビリティ監査
手動テスト
- 色覚シミュレータ（Sim Daltonism、Chrome DevTools）
- スクリーンリーダー（NVDA、VoiceOver、JAWS）
- キーボードのみの操作
- 200%ズーム（チャートはまだ使えるか？）
ユーザーテスト
- 障がいのある人をユーザーリサーチに含める
- 推測せず、実際の困りごとを聞く
今日からできる簡単な改善
- すべてのチャートに代替テキストを付ける（種類だけでなく洞察を説明）
- データ表の代替を用意する
- 色のコントラストを確認する（図形は少なくとも3:1）
- 色覚シミュレータでテストする
- キーボード操作ができるか確認する
- 見えるフォーカス表示を付ける
役立つツール
ChartGenなどの現代的なツールは、デフォルトでアクセシビリティ機能を備え始めています。次のようなものを探しましょう：
- 代替テキストの提案
- 色覚に配慮したパレット
- 自動パターンオーバーレイ
- データ表の生成
ただしツールは魔法ではありません。文脈に合わせてレビューしカスタマイズする必要があります。
ビジネスへの影響
アクセシビリティのコンサルタントから聞いた話です：ある金融サービス会社が投資家向けダッシュボードのアクセシビリティを改善したところ、障がいの有無にかかわらず、全ユーザーのエンゲージメントが23%向上しました。
アクセシブルなデザインは、多くの場合、そのままより良いデザインです。
リソース
- WCAG 2.1（特に1.4.1 色の使用、1.1.1 非テキストコンテンツ）
- Chartabilityプロジェクト（チャート向けガイダンス）
- A11y Style Guide（コンポーネントパターン）
- 色覚シミュレーションツール
最後に
rampのない建物は建てないでしょう。なぜアクセシビリティのないダッシュボードを作るのですか？
チャートをアクセシブルにする手間はさほど大きくありません。影響は大きいです。1つのチャートから始めて、これらの原則を適用し、そこから広げていきましょう。