Interface Craft and Accessibility(インターフェース設計とアクセシビリティ)
概要
標準はアクセシブルで、ミニマルで、美しいこと——それは後付けの「磨き」ではなく、「設計段階からの条件」です。味覚はルール化できないため、制約、先例、エスカレーションに変換されます。エージェントは味覚を発明するのではなく、制約を尊重し、残りをエスカレーションするよう求められます。
アクセシビリティ——後処理ではなく必須要件
チェック可能なルール:
- すべてのインタラクティブ要素はキーボードで到達可能であり、可視のフォーカス状態を持つこと。
- すべてのコントロールにはアクセシブルネームが、すべてのフォームフィールドには関連するラベルと明確なエラーメッセージが存在すること。
- セマンティックHTMLとランドマークを使用し、
divの羅列を避けること。 - カラーコントラストはWCAG AAを満たし、意味を色だけで伝えてはならない。
- 動きの縮減(reduced-motion) 設定を尊重すること。
美しくミニマル——「雰囲気」ではなく「制約」として
- 制約による一貫性。 デザインシステムのトークン(スペーシング、タイプスケール、カラースケール)を使用すること。独自のマジックナンバーは禁止。一貫性こそが美観です。
- 既存画面がスタイルガイド。 新しいものを発明する前に、確立されたビジュアル言語に合わせること。
- 抑制(UI-YAGNI)。 すべての要素は設置の価値を証明する必要があります。削除しても壊れないものは削除してください。密度や装飾よりも、階層構造とホワイトスペースを優先します。
- カスタムUIを構築する前に、コンポーネントライブラリのパターンを優先すること。
- 類似した2つのUI要素 → 1つのパラメータ化コンポーネント。 差異はプロパティやバリアントで表現し、コピーペーストは禁止。3つ目のコピーは欠陥とみなします(DRY原則をインターフェースに適用)。
エスカレーションルール
味覚に関する決定はエスカレーションされ、独断で行われてはなりません。 選択が純粋に美的であり、トークンや先例によって決定されていない場合、黙って推測してはいけません:
- 最も近い既存の先例に従うか、
- 選択肢(モックアップ、比較表など)を提示し、人間の判断を仰ぐ。
クイックリファレンス
| 状況 | やるべきこと |
|---|---|
| 新しいコンポーネントが既存のものに似ている | 既存のものをパラメータ化する。コピーしない |
| スペーシングやカラー値がトークンにない | 最も近いトークンを使用する。マジックナンバーを発明しない |
| 本当に新しいビジュアル判断が必要 | 選択肢とともにエスカレーションする。独断で決めない |
| インタラクティブ要素を追加する | 最初からキーボード操作+フォーカス+アクセシブルネームを実装する |
強制: チェック可能なルールについてはCIでa11yリンティング/テスト(例: eslint-plugin-jsx-a11y、axe)を実施。美的抑制は、エスカレーションルールによるレビューアーの判断に委ねます。
詳細な根拠: 憲法第7条、engineering-constitution/references/engineering-constitution.md にバンドルされています。