taste-accessibility

taste-accessibility

AI が生成する UI は、デフォルトではアクセシブルではありません。このスキルにより、アクセシビリティがデフォルトになります。以下のルールはすべて、生成中に適用されます。後から修正するための工程ではありません。

1. セマンティックな構造（コードの骨組み）

• ページごとに <h1> は 1 つだけにします。見出しレベルを飛ばしてはいけません（h1 → h3 のように h2 を飛ばすと不合格です）。見出しでページのアウトラインを表現します。見出しだけを読んで確認してください。
• ランドマーク：<header>、<nav>、<main>、<footer> に加え、意味がある場合はアクセシブルな名前を持つ <aside>／<section> を使用します。
• リストにはリスト（ナビゲーションや機能には <ul>）を使います。<table> は表形式のデータにのみ使用し、ヘッダーには <th scope> を指定します。
• ボタンには <button>、リンクには <a href> を使い、どちらにも表示テキストを付けます。アイコンのみのコントロールには、表示されるツールチップと一致する aria-label を付けます。
• 装飾画像：alt=""（空）にします。情報を伝える画像：見た目ではなく意味を説明する alt テキストを付けます（「グラフ：5 月にコンバージョン率が 18％ から 9％ に低下」。「青い折れ線グラフ」は不可）。
• 装飾用の SVG／要素には aria-hidden="true" と tabindex="-1" を指定します。フォーカス可能な要素に aria-hidden を指定してはいけません。

2. キーボードで完結（マウスやタッチが必須となる操作をなくす）

• すべての要素に到達できるようにします。Tab キーの順序は視覚的な順序に従います。インタラクティブでない要素をフォーカス可能にしてはいけません（tabindex="0" は意図的な場合にのみ使用）。
• すべての場所でフォーカスを可視化します。2px のリングを使い、隣接する要素とのコントラスト比を 3:1 にし、outline-offset は 2px 以上にします。置き換えを用意せずに outline: none を指定してはいけません。
• 標準的な操作：Enter でボタン／リンクを作動させます。Space で切り替えます。Esc でダイアログやメニューを閉じます。
• ダイアログ／ポップオーバー：開いたときにフォーカスをダイアログ内へ移動し、その中に留めます（またはプラットフォーム標準のパターンを使います）。閉じたときはトリガーにフォーカスを戻します。オーバーレイには role="dialog"、aria-modal="true"、ラベルを設定します。
• スキップリンク：すべてのマーケティングページで最初にフォーカス可能な要素にし（「コンテンツへスキップ」）、フォーカス時に表示します。
• カスタムコンポーネント（メニュー、タブ、コンボボックス、スライダー）：ARIA パターンを正しく実装する（例：aria-selected と矢印キーによるナビゲーションを備えた role="tablist"）か、代わりにプラットフォームの要素を使います。壊れたカスタム要素より、ネイティブの <select> が優れています。

3. コントラストとターゲット（正確な数値、WCAG 2.2）

ルール	要件
通常のテキスト	≥ 4.5:1
大きなテキスト（≥24px ／ ≥18.66px 太字）	≥ 3:1
UI コンポーネントとフォーカス	隣接する要素とのコントラスト比 ≥ 3:1
ポインターのターゲットサイズ	≥ 24×24px（AA 2.2）、≥ 44×44px を推奨し、タッチ操作では必須
間隔の例外	ターゲットが 24px で、隣接するターゲットとの間隔が 24px 以上なら合格

• プレースホルダーだけのラベルは不合格です（4.1.2）。すべての入力に、プログラムで関連付けられたラベル（<label for> または aria-labelledby）が必要です。
• エラー状態：色だけで示してはいけません。テキストメッセージとアイコンを使います。エラーは aria-live="assertive" 領域で通知します。エラーメッセージではフィールドを特定し、「無効です」ではなく修正方法を示します。
• 暗い背景と明るい背景の両方でフォーカスインジケーターを確認します。ページの背景ではなく、フォーカス対象の背景とのコントラストを確認してください。

4. フォーム（生成時のチェックリスト）

• 入力ごとに適切な type（email、tel、password、number、search）と、正しい autocomplete トークン（email、name、credit-card-number など）を指定します。
• required と aria-required を指定します。検証には :user-invalid のスタイルを使います（:invalid だけでは、送信前に不当にエラー扱いしてしまいます）。メッセージは表示します。
• 4 フィールド以上の場合は 1 列のレイアウトにします。ラベルは入力欄の上に配置し、ヒントテキストは切り離さず aria-describedby で関連付けます。
• 複数ステップのウィザード：進行状況を通知し、エラーを上部に要約し、戻る／次へをキーボードで操作できるようにします。

5. モーションと認知

• prefers-reduced-motion に従います（taste-motion §7 を参照）。視差効果、カルーセルの自動再生、マーキーは使いません。
• 音声付きのメディアを自動再生しません。カルーセルはホバー時／フォーカス時に一時停止します。コンテンツは、目で読める速さを超えて動かしません。
• タイムアウト（セッション、自動切り替え）：20 秒以上の警告を出すか、ユーザーが操作できるようにします（WCAG 2.2.1）。
• 平易な言葉を使います。略語は初出時に展開します。絵文字だけで情報を伝えてはいけません。

6. テスト（完了前に以下を確認）

1. キーボードで操作する：ページ全体を Tab キーで移動し、すべての停止位置でフォーカスが見えること、順序が適切であること、操作不能な箇所に閉じ込められないことを確認します。
2. スクリーンリーダーで読み上げる（VoiceOver/NVDA）：ページタイトル、見出しのアウトライン、各コントロールのラベル、読み上げられる各領域を確認します。
3. コントラスト：使用されているすべてのテキストと背景の組み合わせを確認します（少なくとも、見出し、本文、ミュート表示、ボタンのテキスト、プレースホルダー、入力欄の境界線）。
4. サイズを変更する：ズーム率 200％（幅 1280px まで）で、横スクロールやテキストの切り取りがないことを確認します。
5. aria-labels が、表示テキストと不必要に重複していないことを確認します。空のボタンやリンクがないことも確認します。
6. ダークモードとライトモードの両方で合格することを確認します（どちらか一方で問題ないと決めつけないでください）。

7. チェックリスト（該当する場合はページを不合格とする）

• 見出しレベルが飛ばされている。
• 関連付けられたラベルのない入力欄がある。
• キーボードで操作できないインタラクティブ要素がある。
• フォーカスインジケーターが見えない、または代替手段なしで outline: none が使われている。
• 意図的かつ文書化された例外ではないのに、テキストの組み合わせのコントラスト比が 4.5:1 未満（大きなテキストでは 3:1 未満）である。
• 色だけでエラーを伝えている。
• prefers-reduced-motion への対応がない。
• タッチターゲットが 24px 未満で、間隔も 24px 未満である。

アクセシビリティは機能ではありません。インターフェースが適切に動作するためのものです。このチェックリストに合格しないものは、何もリリースしないでください。