RSS DEV コミュニティ
フォロー
確認ダイアログにアクセシビリティを損なわずに矢印キーショートカットを追加する
このテキストでは、確認ダイアログにキーボードショートカットを追加すること、特にキャンセルボタンと確認ボタン間の矢印キーナビゲーションについて論じています。これは、基本的なアクセシビリティ機能の代替ではなく、強化機能であることを強調しています。アラートスタイルの確認に必要なアクセシビリティ要件として、アクセシブルな名前、フォーカス管理、キーボード制約、エスケープによる解除、フォーカスの可視化、フォーカス返却が挙げられています。WAI-ARIA Authoring Practices Alert Dialog Patternが、モーダルセマンティクスとキーボードインタラクションの基盤として引用されています。提案されている解決策は、新しい矢印キーマッピングを純粋な関数と、特定の矢印キーの押下のみをインターセプトするイベントハンドラに分離し、Tab、Shift+Tab、Escapeなどの他のキーボードインタラクションはそのままにします。ネイティブHTMLセマンティクスを使用した最小限のダイアログ例が提供されており、デフォルトでキャンセルにフォーカスが当たることが示されています。次に、純粋なマッピングテストの実行と、キーボードおよびスクリーンリーダーを使用したダイアログの手動テストを含むテスト手順が概説されています。コアとなる設計原則は、未処理のキーが期待どおりに機能し続けることを保証しながら、セマンティックコントロールの周りにショートカットを強化機能として追加することです。著者はMonkeyCodeプロジェクトへの貢献に言及し、説明されている動作が公開されている問題とコードに基づいていることを開示しています。