superior-accessibility

優れたアクセシビリティ

変更したインターフェースをユーザーが知覚し、理解し、操作し、利用できる状態を維持します。ARIA を多用したパッチよりも、ネイティブのセマンティクスと観察可能な動作を優先します。

修正を選ぶ前に、影響を受ける一連の操作、インタラクションモデル、対応プラットフォーム、利用可能な検証ツールを確認します。アクセシブルでないインタラクションの契約を変更する必要がある場合を除き、製品の動作を維持します。

構造と名前

• コントロールの動作に合ったネイティブ要素を使用します。
• コントロールには、表示ラベルと一致する、または表示ラベルを含むアクセシブルな名前を設定します。
• 見出しの順序、ランドマーク、リスト、表、フォームの関連付けに意味を持たせます。
• 情報を伝える画像には代替テキストを設定し、装飾画像はアクセシビリティツリーに含めないようにします。
• ネイティブ HTML で必要な関係や状態を表現できない場合に限り ARIA を追加し、常に同期させます。

キーボードとフォーカス

• 必須の操作をすべて、ポインターなしで実行できるようにします。
• 読み上げや操作の順序に沿った、論理的なフォーカス順序を維持します。
• フォーカスが移動するすべての背景で、視認できるフォーカスインジケーターを表示します。
• モーダルを開くときなど、実際にコンテキストが変わる場合に限りフォーカスを移動し、そのコンテキストが閉じたら元に戻します。
• オーバーレイが必要に応じてフォーカスを閉じ込め、予測可能な方法で閉じられ、背後のコンテンツを操作できないようにします。

コントラストと色以外の手掛かり

Python が利用可能な場合は、既知の単色 sRGB カラーに対して scripts/contrast_check.py を使用します。

python scripts/contrast_check.py "#1f2937" "#ffffff"

このスクリプトは、この SKILL.md を基準にして解決します。グラデーション、画像、不透明度、フィルター、合成の場合は、実際にレンダリングされた結果を確認します。ソースの 2 つの 16 進カラー値が、最終的なコントラストを表しているとは限りません。

• WCAG 2.x に基づき、通常のテキストは 4.5:1 以上、大きなテキストは 3:1 以上を目標とします。
• 意味のあるコンポーネントの境界とフォーカスインジケーターについて、隣接する色とのコントラストを確認します。
• ステータスや入力検証には、色とテキスト、アイコン、形状など別の手掛かりを組み合わせます。
• 補助的なテキストだからといって、コントラストの要件が適用されないと考えてはいけません。

動的な状態

• 入力検証エラーは該当するフィールドの近くに表示し、フォームに必要な場合はエラーの概要も表示します。
• 重要な非同期結果を通知しつつ、ユーザーへの割り込みを繰り返さないようにします。
• 読み込み、展開、選択、押下、チェック、現在、無効といった状態が、プログラムから正確に認識できるようにします。
• ほかでは明らかでない場合は、前提条件を説明せずに操作を無効にしないでください。

タスクにダイアログ、複合ウィジェット、カスタムコントロール、ドラッグ＆ドロップ、ライブ更新、ルート変更、仮想化コンテンツ、またはスクリーンリーダー固有の動作が含まれる場合は、references/interaction-and-assistive-technology.md を読んでください。

ズーム、モーション、タッチ

• 対応しているズーム倍率でリフローしても、情報や操作手段が失われないようにします。
• 仮想キーボードや固定 UI に隠れないよう、フォーカス中の入力欄を表示します。
• タッチターゲットと間隔に十分な余裕を持たせます。
• 動きを減らす設定を尊重し、結果を理解するために必要なモーションを避けます。

動作を検証する

変更した一連の操作を、キーボードのみで操作して確認します。利用可能なプラットフォームツールでアクセシブルな名前と状態を調べ、関連するズーム倍率や狭いレイアウトをテストし、レンダリング後の色でコントラストを確認します。自動チェックは検証範囲を広げるのに役立ちますが、使いやすさの証明にはなりません。自動テストと手動テストの両方の結果を報告してください。

ブラウザー、支援技術、プラットフォーム、実際に試した一連の操作を明示せずに、スクリーンリーダーとの互換性を主張しないでください。その環境を利用できない場合は、可能な範囲でセマンティクスとアクセシビリティツリーの出力を検証し、未テストの組み合わせを明記してください。

アクセシビリティがより広範な変更セットレビューにおけるリスク領域の一つにすぎない場合は superior-code-review を、スペースに応じた再構成には superior-responsive を、アクセシビリティの契約外にある視覚的またはインタラクションの実装には superior-ui を使用してください。