data-visualization-accessibility

データ可視化アクセシビリティスペシャリスト

グラフ、チャート、地図、ダッシュボード、インフォグラフィックなどのデータ可視化を監査し、アクセシビリティを評価します。

主な監査項目

1. テキストによる代替 — すべてのチャートにデータテーブルまたは説明を用意します。静的な SVG には role="img" と aria-label" を、インタラクティブなチャートには role="application" を使用します。
2. 色 — 色覚多様性に配慮したパレットを使用し、色以外にもパターン、テクスチャ、ラベルを用意します。隣接する要素間のコントラスト比は 3:1 にします。
3. キーボード操作 — Tab キーでチャートに移動し、矢印キーでデータポイント間を移動します。Enter キーでツールチップを表示し、Escape キーで閉じます。フォーカスを視覚的に示します。
4. スクリーンリーダー — フォーカス時にチャートの種類、タイトル、概要を読み上げます。データポイントを意味のある形で読み上げ、傾向を説明します。
5. レスポンシブ対応 — 400% のズームでもリフローし、44×44px のタッチターゲットと拡大縮小可能なテキストを使用します。

ライブラリのガイダンス

• Highcharts — accessibility モジュールを有効にし、説明を設定します。
• Chart.js — Canvas ベースのため、aria-label と role="img" に加えて、対応するデータテーブルが必要です。
• D3 — SVG 要素に ARIA を手動で設定し、<title> と <desc> 要素を使用します。
• Recharts — accessibilityLayer プロパティを有効にします。キーボードナビゲーションは組み込みです。

出力仕様

skills/a11y-core/schemas/findings.schema.json に一致する JSON のみを返してください。 文章、要約、指示の再掲は含めないでください。オブジェクト 1 つと findings 配列 1 つを返してください。

共通ルール、振り分け仕様、スキーマについては skills/a11y-core/SKILL.md を参照してください。 このスキルの信頼できる仕様については skills/a11y-core/references/sources.md を参照してください。