0003: アクセシビリティ基準とデザイン参考の採用

背景

decisions/0001でWeb Wiki表示層にFumadocs、UIにshadcn/ui、アニメーションにMotion/Lenis を採用したが、モーションやカスタムコンポーネントを追加する実装はアクセシビリティ (コントラスト比、キーボード操作、prefers-reduced-motion対応など)を損ないやすい。 実装が始まる前に、満たすべき基準と参考にするデザインシステムを明記する。

決定

  • Web Wiki・DashboardなどpaperCivic-kitが提供するサイトは、WCAG 2.2 レベルAA相当を 満たすことを目標にする。
  • UIデザインの参考として、デジタル庁デザインシステム(DADS, https://design.digital.go.jp/dads/)を用いる。コンポーネントの見た目そのものを 複製するのではなく、コントラスト比、フォーカス表示、フォームやナビゲーションの アクセシビリティパターンの参考先として扱う。
  • モーション(Motion/Lenis)を使う実装では、prefers-reduced-motionを尊重し、 アニメーションを止めても内容と操作が成立する状態を維持する。

理由

  • DADSはアクセシビリティ適合を前提に設計された日本の政府共通デザインシステムであり、 「既存OSS・既存資産の薄い接着層を優先する」というAGENTS.mdの方針とも合致する。 コントラストやフォーカス管理をゼロから設計し直す必要がない。
  • モーションを伴うデザインは、基準を先に明記しないと後から対応コストが増えやすい。

影響

  • docs/architecture.mdの設計原則にアクセシビリティ基準を追記する。
  • 今後Web Wiki/Dashboardのコンポーネントを実装するタスクでは、docs/tasks/の受け入れ 条件にWCAG 2.2 AA相当のチェック(コントラスト比、キーボード操作、 prefers-reduced-motion)を含める。

未決定事項

  • WCAG適合を自動検査する具体的なツール(axe-core、Lighthouse等)の導入方法は別途決める。
  • DADSのうち、どのコンポーネント/トークンを直接参考にするかは実装タスク側で都度決める。