intopia-web-accessibility

概要

UI コードを生成または変更する際は、常にこれらのアクセシビリティ原則を適用してください。目的は、回避策を使わずに、あらゆる能力の人が利用できるインターフェースを実現することです。

手順

1. 各 UI コンポーネントと、ユーザーの依頼が関連する横断的なトピック（フォーム、キーボード／フォーカス、画像／グラフ、ドラッグ＆ドロップ、ライブリージョン、レスポンシブレイアウト、構造／セマンティクス、色）を特定します。
2. INDEX.md を読みます。特定した各コンポーネントについて、リンク先の受け入れ基準ファイルを読み込みます（コード例ファイルがある場合は、それも読み込みます）。INDEX.md の Component Index で、コンポーネントの行の Load first 列にベースが記載されている場合は、まずそのベースを指定順に読み込みます（各ベースは一度だけ読み込みます。複数の依頼対象コンポーネントで同じベースを共有している場合も同様です）。その後、差分を確認するためにコンポーネント固有のファイルを読み込みます。該当する各トピックについて、Topic Index を参照して references/topic/ 内のファイルを読み込みます。これらは信頼できる情報源です。参照せずにコードを生成してはいけません。
3. 色の値が関係する場合は、references/colour-contrast/Colour Contrast Reference.md を参照します。
4. コンポーネントまたはトピックのリファレンスでカバーされていない点は、以下の Universal Rules を適用して補います。
5. コードを生成します。
6. コードを提示した後、適用した具体的なアクセシビリティ上の判断を、コンポーネントまたはパターンごとに1行で列挙します（例：「モーダル：開いたときにフォーカスを見出しへ移動し、開いている間はフォーカスを閉じ込め、閉じたときにトリガーへ戻す」）。

---

Universal Rules（常に適用）

これらのルールは、読み込むトピックにかかわらず、コード生成のすべてに適用します。それぞれの詳細については、INDEX.md の Topic Index を参照して関連するトピックファイルを読み込んでください。

• まずセマンティック HTML を使い、各要素を本来の目的に沿って使用します。references/topic/Topic - Structure and Semantics.md を参照してください。
• ARIA は必要最小限にし、ネイティブ要素にすでに備わっているロールを追加してはいけません。references/topic/Topic - Structure and Semantics.md を参照してください。
• すべてのインタラクティブ要素に、アクセシブルな名前、正しいロール、現在の状態を設定します。
• Tab の順序は視覚的な読み取り順に従わせます。0 より大きい tabindex は使用せず、フォーカスが失われたり、画面外に移動したりしないようにします。references/topic/Topic - Keyboard and Focus.md を参照してください。
• すべてのインタラクティブ要素に、コントラスト比が少なくとも 3:1 の視認可能なフォーカスインジケーターを設けます。
• 動的なコンテンツ（モーダル、メニュー、SPA のナビゲーション）では、フォーカスを管理します。references/topic/Topic - Keyboard and Focus.md を参照してください。
• テキストと UI のコントラスト比は、通常のテキストで 4.5:1、大きなテキストと UI コンポーネントで 3:1 を満たします。references/colour-contrast/Colour Contrast Reference.md を参照してください。
• 色だけで意味を伝えてはいけません。