i-Willink
Design SystemDocs
ドキュメントメニュー

アクセシビリティ

willink DS は WCAG 2.1 AA 準拠をコミットメントとして掲げ、その遵守を ドキュメントではなく CI とテストで担保します。対象は React 25 コンポーネント + Flutter 9 コンポーネント + Sonner Toast で、各基準ごとの監査結果は a11y matrix （docs/a11y/matrix.md、 v1.7.0）に集約されています。

監査している WCAG 2.1 AA 基準

matrix で各コンポーネントについて以下の達成基準を確認しています。

  • 1.3.1 Info & Relationships — 構造とラベルの関連付け
  • 1.4.3 Contrast — 通常テキスト ≥ 4.5:1 / 大きい文字 ≥ 3:1
  • 1.4.11 Non-text Contrast — UI コンポーネント ≥ 3:1
  • 2.1.1 Keyboard — 全操作にキーボードで到達可能
  • 2.3.3 Animation from Interactions — prefers-reduced-motion への追従
  • 2.4.7 Focus Visible — フォーカスリングを常時表示
  • 2.5.5 Target Size — タップ領域（sm variant は ⚠ として記録）
  • 3.2.4 Consistent Identification — 一貫した識別
  • 4.1.2 Name / Role / Value — 名前・役割・値の公開
bash
# a11y matrix（抜粋）— docs/a11y/matrix.md (v1.7.0)
# React 25 + Flutter 9 component + Sonner Toast を WCAG 2.1 AA で監査
| 基準                          | 内容                              |
| ----------------------------- | --------------------------------- |
| 1.4.3 Contrast                | 通常 >= 4.5:1 / 大きい文字 >= 3:1 |
| 1.4.11 Non-text Contrast      | UI コンポーネント >= 3:1          |
| 2.1.1 Keyboard                | 全操作をキーボードで到達可能      |
| 2.4.7 Focus Visible           | focus-visible ring を常時表示     |

enforcement の仕組み

AA 準拠は次のメカニズムでビルド時・テスト時に検証されます。

  • jest-axe — 全 React コンポーネントの自動 a11y アサーション。
  • キーボード操作とロール — Radix primitives に委譲し、ナビゲーションとrole を担保。
  • focus-visible リング — --color-ring（= brand）で描画され、テーマの 単一ノブ に追従します。
  • reduced motion — 2 層契約（ADR-0008）。詳細は モーション を参照。
  • contrast CI gate — scripts/check-contrast.mjs と packages/tokens の contrast test がコントラストを強制します。
  • FormField — aria-describedby / aria-invalid / id を自動配線（ADR-0015）。
  • Popover — Radix の role=dialog がアクセシブルな名前を要求するため、consumer 側で aria-label / aria-labelledby の指定が必須です。
tsx
// CI gate: scripts/check-contrast.mjs + packages/tokens contrast test
// fg / bg は AAA（>= 7:1）、fg-secondary は AA（>= 4.5:1）を強制
const minRatio = {
  'fg': 7,            // AAA
  'fg-strong': 7,    // AAA
  'fg-emphasis': 7,  // AAA
  'fg-secondary': 4.5, // AA
};

contrast gate は前景／背景（fg / bg）を AAA（≥ 7:1）、fg-secondary を AA（≥ 4.5:1） として閾値化しています。

テキスト強調ラダー

本文・補助テキストの色は強調ラダーから選びます（ADR-0016）。

  • fg / fg-strong / fg-emphasis — AAA。本文・見出しに使用。
  • fg-secondary — AA。補助テキストに使用可。
  • fg-subtle / fg-faint — 4.5 未満が documented な baseline。キャプションや disabled 専用で、本文には 使用しないでください。

次は モーション で reduced-motion 契約を確認する、または a11y matrix でコンポーネント別の監査結果を見る。