LEARN BY EXAMPLE
2.1.1 キーボード レベル A
キーボードでも、同じ機能を使える。
概要
マウスやタッチでできることを、キーボードでもできるようにします。 メニューを開く、項目を選ぶ、送信するといった機能を、急いでキーを連打するなどの操作に頼らず使えるようにします。入力の軌跡そのものが必要な機能には例外があります。
同じ案内を、キーボードで開ける？
利用者が困る例 ポインタを重ねたときだけ開く
まちのデザイン展
会場と日時をご確認ください。
キーボードでは開けないため、
会場と日時を表示できない。
Tabこの項目に移動できない
会場と日時を確認できない。
文字を読めても、情報を開く操作ができません。
改善した例 キーボードでも開閉できる
まちのデザイン展
会場と日時をご確認ください。
イベント情報
- 会場
- まちのギャラリー
- 日時
- 11月15日 10:00〜17:00
TabEnter または Space
Tabキーで「イベント情報」に移動し、EnterキーかSpaceキーで開閉できます。クリックやタップでも試せます。
開いて、会場と日時を読める。
「改善した例」の「イベント情報」は実際に操作できます。
達成できないと起こる問題の例
イベントの案内ページで、ポインタを「イベント情報」に重ねたときだけ、会場と日時が表示されます。キーボードではその項目に移動できず、開く方法もありません。
手の動かしづらさからマウスを使わずに操作する利用者は、会場と日時を確認できません。ページを読めても、必要な情報を表示する操作ができない状態です。
達成するための改善例
同じ「イベント情報」を、キーボードでも開閉できるようにします。Tabキーで項目に移動し、EnterキーやSpaceキーで開くと、会場と日時を読めます。マウスやタッチでも開閉できます。
Tabキーで移動したときに、キー操作の対象になることを「フォーカスが当たる」と呼びます。図の「改善した例」ではその対象を枠線でも示しています。
確認のポイント
- マウスを使わず、メニューを開く・選択する・送信するなど、一連の操作を終えられますか。
- ポインタを重ねたときだけ使える機能にも、キーボードで使う方法がありますか。
- 短時間での連打や、長時間キーを押し続ける操作を求めていませんか。
- 代わりの操作方法がある場合、その方法を利用者が見つけられますか。
条件と補足
キーボードインタフェースとは
物理的なキーボードに加え、キー入力として操作を伝える仕組みも含みます。この仕組みを通じて、音声入力やスイッチなどの支援技術を使う人も操作できます。
例外は、軌跡そのものが必要な機能
自由な線を描くなど、どこを通ったかが結果を決める機能は例外です。一方、項目を別の場所へ移す機能は、移動中の軌跡が結果に関係しなければ、キーボードでも使えるようにします。
手書きで文字を入力する場合も、目的は「文字の入力」です。入力手段に手書きを採用したという理由だけでは例外になりません。
操作の方法は一つに限定されない
この基準で確認するのは、同じ機能をキーボードで使えることです。例えば、ドラッグで並べ替える機能に「上へ」「下へ」ボタンを用意する方法もあります。マウスで使う部品のすべてに、同一の操作方法を追加することまでは求めていません。
この図では一般的なキー操作で使える開閉部品を選んでいます。ボタンなどにHTMLの標準的な部品を使うと、ブラウザーが提供するキーボード操作を利用できます。特定のHTML部品を使うこと自体が、この達成基準の要件ではありません。
操作できることと、位置がわかること
2.1.1ではキーボードで機能を使えるかを確認します。操作箇所からキーボードで抜け出せるかは、2.1.2「キーボードトラップなし」でも確認します。フォーカスの位置が見てわかるかは、2.4.7「フォーカスの可視化」でも確認します。
この改善例で扱うのは、イベント情報を開閉する機能です。ページやサイト全体のWCAG適合を示すものではありません。
参照資料
- WCAG 2.2 本体：2.1.1 Keyboard（要件）
- WAIC：2.1.1 キーボードの解説（日本語訳）
- W3C：Understanding 2.1.1（英語公開版）
- W3C：G202 すべての機能をキーボードで操作できるようにする方法（実装例）
- W3C：H91 HTMLのフォーム部品とリンクを使う方法（実装例）
テクニックは達成する方法の例です。特定のテクニックを採用することだけが必須ではありません。
出典の最終確認: 2026-11-08。画面と説明文は、この教材のために作った例です。