WCAG 2.1.1: キーボードだけで必要な機能にアクセスできるか確認する
ページ内のリンク、ボタン、フォーム、メニュー、モーダル、スライダーなど、必要な機能をマウスなしでキーボードだけで操作できるか確認します。
意図的な失敗例: キーボードで操作できない
divクリックのみで、Tab移動やEnter/Space操作ができません。
確認観点
- TabキーとShift+Tabキーで、ページ上の操作対象へ移動できるか確認する
- 主要な操作部品をEnterキーまたはSpaceキーで操作できるか確認する
- マウスホバー、クリック、ドラッグだけでしか実行できない機能がないか確認する
- カスタムUIでは、標準HTMLを優先し、必要なroleやキーボード操作を実装する
- キーボード操作中にフォーカスインジケーターが常に見え、フォーカスや入力が意図せずキャンセルされないようにする
人の判断が必要な例
- キーボードだけで主要な導線、問い合わせ、検索、購入、送信などの目的を完了できるか確認する
- クリック可能に見えるdivやspanが、Tabキーで到達でき、Enter/Spaceで実行できるか確認する
- ドラッグ操作が必要なUIには、ボタン操作や入力欄などキーボードで使える代替手段があるか確認する
補助ツール候補
- keyboard-operability
- focus-visibility
- focus-order
- tabindex
- aria-hidden
- skip-link
生成メモ
- 支援技術を用いた実検証が必要