LEARN BY EXAMPLE
2.1.3 キーボード (例外なし) レベル AAA
すべての機能を、キーを押す速さに頼らず使えるようにする。
概要
コンテンツのすべての機能を、個々のキー操作に特定のタイミングを求めず、キーボードインタフェースから使えるようにします。Aの2.1.1にある、入力の軌跡そのものが必要な機能を除外する例外は、このAAAの基準にはありません。
同じ構図候補をキーボードでも選ぶ
PCやスマートフォンで講座サイトの練習を使う場面です。丸は被写体の位置を表し、三つの候補から一つを選びます。
利用者が困る例 クリックやタップでしか選べない
練習の説明を読めても、候補を選べない。
候補を指定する機能が、キーボードから使えません。
改善した例 同じ三つからラジオボタンで選ぶ
Tabキーで選択肢へ移り、矢印キーで候補を変えられます。マウスやタッチでも選べます。
同じ候補を自分の速さで選び直せる。
選ぶ機能と候補を保ち、操作の方法を増やしています。
達成できないと起こる問題の例
手を動かしにくい人が、PCやスマートフォンで講座サイトの構図の練習を開き、キーボードを使っています。被写体を中央・左・右に置いた三つの候補から、構図を一つ選ぶ課題です。
候補はクリックやタップでしか選べず、キー操作で選ぶ方法がありません。利用者は説明を読めても、自分が選びたい構図を指定して練習を続けられません。
達成するための改善例
同じ三つの構図候補から、HTMLのラジオボタンで一つを選べるようにします。Tabキーで選択肢へ移り、矢印キーなど、ブラウザーが提供する操作で候補を選びます。マウスやタッチでも選べます。
利用者は同じ選択結果をキーボードから得られます。急いで連続入力する必要はなく、自分の速さで選び直せます。図の改善側では、ラジオボタンを選んで、選択状態とフォーカスの枠を確認できます。
確認のポイント
- 選択、開閉、送信など、利用者が使うすべての機能を確認しましたか。
- マウスやタッチを使わずに、同じ又は同等の操作と結果を得られますか。
- 個々のキーを押すタイミングや、短時間の連続入力を必須にしていませんか。
- 別の操作方法を用意する場合、利用者が見つけて使えますか。
- 軌跡に依存する機能を、AAAでも例外として除外していませんか。
条件と補足
2.1.1の軌跡に関する例外との違い
Aの2.1.1「キーボード」には、本来の機能が入力の始点と終点だけでなく、その間の軌跡に依存する場合の例外があります。自由な線を描く機能などが例です。
2.1.3には、この例外がありません。公式解説は、本来の機能が軌跡依存の入力を必要とするコンテンツは、このAAA基準に適合できないと説明しています。その機能を残したまま、評価の対象から除外してAAAに適合したとは判断しません。
今回の図は、三つの候補から一つを選ぶ機能です。自由描画を別の候補選択に置き換えて、同じ機能を提供したとみなす例ではありません。単にポインターで操作する実装を選んだことと、本来の機能に軌跡が必要なことを区別します。
キーボードインタフェースの意味
物理的なキーボードに加え、キー入力をソフトへ伝える仕組みを含みます。音声入力やスイッチなど、キー入力を送る支援技術も、この仕組みを使えます。スマートフォン向けのページも、キーボードインタフェースからの操作を確認します。
一方、マウスキーのように、キーでポインターの動きを再現する機能を利用者に使わせるだけでは、この基準のキーボードインタフェースによる操作とは扱いません。
同じ機能を使う方法
すべての見える部品を、必ず同じ方法でキーボード操作できるようにする要件ではありません。別の操作方法でも、同じ又は同等の操作と結果を得られれば対応できます。方法を分ける場合も、機能を省略しないようにします。
標準的な操作に合わせることは、利用者が覚え直す負担を減らす工夫です。例えば、HTMLのボタンやラジオボタンでは、ブラウザーが提供するキー操作を利用できます。特定のHTML部品や、全サイト共通のキーの組み合わせ自体が、この基準の要件ではありません。
2.1.2「キーボードトラップなし」では操作箇所から抜け出せるか、2.4.7「フォーカスの可視化」では操作位置が分かるかも確認します。図は構図候補を選ぶ機能についての例であり、サイト全体のAAA適合を示すものではありません。
参照資料
- WCAG 2.2 本体:2.1.3 Keyboard (No Exception)(要件)
- WAIC:2.1.3 キーボード (例外なし)の解説
- W3C:Understanding Keyboard (No Exception)(英語公開版)
- W3C:G202 すべての機能をキーボードから使えるようにする方法
- W3C:H91 HTMLのフォーム部品とリンクを使う方法
テクニックは達成する方法の例です。出典の最終確認: 2026-11-09。構図の練習は、この教材のために作った架空の例です。