material-uiテーブルのキーボードナビゲーションを有効にする方法
Aug 18 2020
Material-UIで作成されたreactアプリケーションがあります。ユーザーは、Webサイト全体でキーボードナビゲーションを有効にするように要求しました。このウェブサイトでキーボードを使用してテーブルをナビゲートできません。私のテーブルは次のようになりますhttps://material-ui.com/components/tables/#fixed-header。キーボードの「上矢印」と「下矢印」を押して、行を上下に移動したい。どうすればこれを有効にできますか？
回答
1 FED Sep 10 2020 at 18:42
キーボードナビゲーションとは、一般に、キーボードコントロールのみを使用して、リンク、ボタン、日付ピッカー、モーダルなどのインタラクティブな要素に焦点を合わせてトリガーできることを指します。テーブルはインタラクティブな要素ではないため、キーボードでフォーカスできません。
ユーザーの要求は、WebサイトがWebコンテンツアクセシビリティガイドラインを満たしていることを確認することを目的としている場合があります。マテリアルUIテーブルは、テーブルヘッダー行を持つテーブルとしてセマンティックにマークアップされるため、この基準を満たすための基本があります。
スクリーンリーダー（MacのVoiceOverやWindowsのNVDAなど）をアクティブにすると、矢印キーでテーブルをナビゲートできるようになり、各セルがスクリーンリーダーによってアナウンスされます。
- https://webaim.org/techniques/tables/data