ネイティブのセマンティクスを優先
各コンポーネントは、適切なロールとキーボード操作を備えたプラットフォームのコントロールを土台にします。<button>、<dialog>、<details>、チェックボックスとラジオ入力、Popover APIがその例です。ARIAはフォールバックとして使います。
キーボードナビゲーション
- 実行 — EnterとSpaceでボタンやトグルを実行し、Spaceでチェックボックスやスイッチを切り替えます。
- 複合ウィジェット — 矢印キーでメニュー、タブ、ラジオグループ、ツールバー内のフォーカスを移動し、HomeとEndで最初と最後の項目に移動します。
- オーバーレイ — Escapeでダイアログ、ポップオーバー、メニューを閉じ、トリガーにフォーカスを戻します。
- Tabでの移動順序 — 順番にフォーカスを移せるのは操作可能な要素だけで、無効なコントロールはスキップされます。
各コンポーネントのページにキーボード操作を記載しています。
フォーカス管理
モーダルは開いている間フォーカスを内部にとどめ、閉じると元の位置に戻します。ポップオーバーとメニューの項目はロービングtabindexを使います。フォーカスの可視化は、アプリのCSSでdata-stateと:focus-visibleを使って指定します。
検証方法
このページの各記述はリリース判定の条件です。Chromium、Firefox、WebKitでaxe違反がゼロであることと、Tier 0コンポーネントがJavaScript無効のテストスイートをすべて通過することを確認します。検証の根拠を見る