2.1.1 キーボード

要件

• マウスを使わずに、すべての機能をキーボードだけで操作できること。
• 一部の例外（描画やドラッグなど）は認められています。

内容

項目	説明
対象	すべてのインタラクティブ機能（リンク、ボタン、フォーム、メニュー、モーダル、タブなど）
操作方法	Tabキー、Enterキー、矢印キー、Spaceキー などで完結する必要あり
マウス依存NG	ホバーやクリック限定の操作に頼るUIは達成基準を満たさない
例外	描画アプリケーション（ペイントツールなど）は除外される

不適合の例

UI例	問題点
メニューがマウスホバーでしか開かない	キーボードでアクセスできない
クリックしないと表示されないポップアップ	キーボード操作が不可能
入力欄にラベルがなく、キーボードで迷う	操作対象の特定が困難

適合の例

• Tabキーで全ての要素に順にフォーカスが移動する
• Enterキーでリンクやボタンが実行できる
• ラジオボタンやチェックボックスが矢印キーやSpaceで操作可能
• モーダルがEscキーで閉じられる

実装ポイント

実装項目	推奨方法
フォーカス制御	tabindex を適切に設定する（-1 は手動フォーカス専用）
ラベルと役割の明示	aria-label や label for 属性を活用
JavaScript UI	カスタムUI要素にもキーボードイベントを割り当てる必要あり
スキップリンク	ページ先頭に「本文へスキップ」リンクを設置するのが有効

具体例（コード）

<!-- 適切なラベルとキーボード操作が可能なボタン -->
<button type="button">申し込む</button>

<!-- 不適切な例：divを使ってクリック処理を実装 -->
<div onclick="submitForm()">申し込む</div>
<!-- この場合、EnterキーやTabでのアクセスが困難 -->

利点

• 視覚障害・運動障害のあるユーザーに対応
• マウスなしの環境（支援技術、スクリーンリーダー）でも利用可
• モバイル端末での操作補助にもなる
• WCAG・JIS X 8341-3:2016 における基本要件

まとめ

• キーボードのみですべての操作が可能であることが基本要件
• アクセシビリティ対応の第一歩となる重要な基準
• 補助技術利用者や操作制限のあるユーザーにとって不可欠な配慮

一覧に戻る