keyboard-accessibility

キーボードアクセシビリティ

すべてのインタラクティブな要素と機能に、以下のルールを適用してください。例は React を優先しています。Vanilla JavaScript は、意味のある違いがある場合にのみ示しています。詳細なルールとコード例は ./reference/ にまとめられています。ルールを適用したり引用したりする前に、該当するファイルを読んでください。

基本原則

すべてのインタラクティブな機能は、軌跡に沿った移動に真に依存する機能（フリーハンド描画など）を除き、マウスやタッチを使わず、キーボードだけで完全に利用できなければなりません。キーボードで操作できることは、「Tab キーでフォーカスできる」ことと同じではありません。ネイティブウィジェットと複合ウィジェットではキー操作の慣習が異なり、ユーザーがすべてのコンポーネントに到達し、操作し、そこから離れられる必要があります。

確認

レビューのみの場合は、作業を中断せずに指摘事項を報告してください。既存ファイルを編集する前に、まず変更内容を確認し、適切な判断に必要な情報があれば推測せずに尋ねてください。

重大度の基準

レベル	意味
Critical	キーボードおよび支援技術（AT）のユーザーがタスクを完了できなくなる
Serious	キーボード操作が大きく損なわれ、妥当な回避策がない
Moderate	操作に支障が生じるが、回避策がある
Minor	影響はわずかだが、ベストプラクティスに満たない

重大度はルール単独ではなく、タスクへの実際の影響に基づいて判断してください。ユーザーはコンポーネントに到達し、操作し、そこから離れられるか。必須のタスクが妨げられているか。フォーカスが失われたり、誤解を招く位置に置かれたりしていないかを確認します。

リファレンス一覧

ルールとコード例は ./reference/ にまとめられています。ルールを適用したり引用したりする前に、該当するファイルを読んでください。重大度は、ルールに違反した場合の影響を示します。

• Critical のルール：
  • reference/native-elements.md — ネイティブで、キーボードから到達できる要素を使用する
  • reference/keyboard-traps.md — キーボードトラップを作らない
  • reference/widget-keys.md — 想定されるキー操作
  • reference/dialogs.md — ダイアログのフォーカス管理
• Serious のルール：
  • reference/focus-visibility.md — フォーカスの可視性
  • reference/focus-not-obscured.md — フォーカスが隠されないこと
  • reference/focus-order.md — フォーカス順序
  • reference/composite-widgets.md — 複合ウィジェット（ロービング tabindex）
  • reference/visibility-mechanisms.md — aria-hidden と hidden と inert の違い
• Moderate のルール：
  • reference/skip-links.md — スキップリンクとランドマーク
  • reference/navigation-and-notifications.md — ナビゲーションと通知のフォーカス
  • reference/input-alternatives.md — 文字キーのショートカット、タッチ、ポインター
• テスト：
  • reference/checklist.md — テストチェックリストと自動ツールの限界

WCAG 2.2 の主な達成基準

• 2.1.1 キーボード（A）、違反した場合は Critical
• 2.1.2 キーボードトラップなし（A）、違反した場合は Critical
• 2.1.4 文字キーのショートカット（A）
• 2.4.1 ブロックスキップ（A）
• 2.4.3 フォーカス順序（A）
• 2.4.7 フォーカスの可視化（AA）
• 2.4.11 フォーカスが隠されないこと（最小）（AA）
• 2.4.13 フォーカスの外観（AAA）
• 2.5.1 ポインターのジェスチャー（A）
• 2.5.3 ラベルを含む名前（A）
• 2.5.8 ターゲットサイズ（最小）（AA）

参考資料

• WAI-ARIA オーサリング・プラクティス・ガイド（APG）
• APG：キーボードインターフェースの開発
• APG：ダイアログ（モーダル）パターン
• APG：コンボボックスパターン
• MDN：<dialog> 要素
• MDN：inert 属性
• MDN：:focus-visible
• focus-trap-react

標準の動向： これらのルールは WCAG 2.2 AA を対象としています。WCAG 3.0 は 開発中です。キーボードとフォーカスに関する要件は、引き続きおおむね 互換性が保たれる見込みです。https://www.w3.org/TR/wcag-3.0/ を確認してください。

アンチパターン

• 順序を強制するために正の tabindex 値を使うこと。代わりに DOM の順序を修正してください。
• button や a を使うべき場所で、クリック可能な div や span を使うこと。
• 想定されるキー入力を抑制する、一律の preventDefault()。
• 視認できる代替手段を用意せずにフォーカスアウトラインを削除すること。
• フォーカス可能な要素に aria-hidden="true" を設定し、フォーカスを取り残すこと。

---

執筆者：@planetabhi