この記事でわかること

  • キーボードだけで操作できるかについて、W3CのWCAGが決めている5つの基準
  • フォーカス(いま選んでいる場所)の表示を消さずに、見やすくするCSSの書き方
  • 抜け出せない部品や、進む順番がおかしい所の見つけ方
  • 作ったページをTabキーで確かめる手順

マウスを使わずに、キーボードでWebサイトを操作する人がいます。目が見えない人や、手が震えてマウスを使いにくい人、音声で入力する人などです。こうした人は、Tabキーで部品を順に選び、Enterキーなどで動かします。この記事では、作ったページをキーボードだけで操作できるかを、W3Cのアクセシビリティの基準であるWCAGをもとに確かめる方法を紹介します。

この記事の説明は、2026年10月24日にW3CのWCAG 2.2と、その解説(Understanding)、技法のページを読んで確かめたものです。ツールやスクールのおすすめと、法律上の決まりの説明は扱いません。

先に結論: Tabキーで全部を動かし、選んでいる所を見せる

先に結論を書くと、ページでできることをすべてキーボードだけで行えるようにし、いまどこを選んでいるかが常に見えるようにします。フォーカスの枠は、代わりの表示を用意せずに消しません。 見る所は、次の5つです。

見る所 よい状態
全部の機能 キーで使える
抜け出せるか Escなどで出る
進む順番 内容の順
選んでいる所 常に見える
固定の帯 隠さない

キーボードの操作に関わるWCAGの5つの基準

WCAG 2.2には、キーボードでの操作について、次の達成基準があります。

  • 達成基準2.1.1(Keyboard、レベルA): すべての機能を、キーボードで操作できるようにする
  • 達成基準2.1.2(No Keyboard Trap、レベルA): キーボードで部品に入れたら、キーボードだけで外へ出られるようにする
  • 達成基準2.4.3(Focus Order、レベルA): Tabキーなどで順に進むとき、意味と操作が崩れない順番で部品を選べるようにする
  • 達成基準2.4.7(Focus Visible、レベルAA): キーボードで選んでいる場所の表示が見える状態にする
  • 達成基準2.4.11(Focus Not Obscured (Minimum)、レベルAA): 選んだ部品が、作る人の置いた内容ですべて隠れないようにする

WCAGでいうキーボードの操作は、ソフトウェアがキーの入力を受け取る仕組み(キーボードインターフェース)を通した操作です。W3Cの技法G202では、使っている機器に物理的なキーボードが無くても、この仕組みでキーの入力を送れるとしています。

すべての機能をキーボードで使えるか

達成基準2.1.1の解説では、キーボードで操作できれば、目が見えない人や、キーボードの代わりになる入力の機器を使う人も操作できるとしています。代わりになる機器には、音声で入力するソフトや画面に出すキーボードなどが含まれます。

ただし、筆で描く線のように、手の動かし方そのものが結果を決める操作は例外です。W3Cの解説では、水彩画を描くプログラムを例外の例にしています。一方で、ドラッグで物を動かす操作は、その道筋が意味を持たなければ例外になりません。W3Cの技法G202の例では、ドラッグで並べ替えられる一覧に、上や下へ動かす操作の部品も用意しています。

部品から抜け出せるか

達成基準2.1.2の解説では、ページの一部にフォーカスが閉じ込められないようにすることが目的だとしています。埋め込んだ部品や、自分で作った部品で起きやすい問題です。

ダイアログを開いている間に、フォーカスをその中にとどめることは、利用者が抜け方を知っていれば問題になりません。物理的なキーボードでは、Escキーがよく使われる抜け方です。矢印キーやTabキーなどの普通の方法で抜けられない場合は、抜け方を利用者に知らせます。

進む順番が内容に合っているか

達成基準2.4.3の解説では、tabindexの属性やスクリプトを使わなければ、Tabキーで進む順番はHTMLに部品が書かれた順になるとしています。見た目の並びと全く同じである必要はなく、内容の意味と操作が崩れなければよいとしています。

よくある失敗は、tabindexの属性に1や2などの数を付けて順番を決めることです。W3Cの技法F44では、数の付け方が内容の順と違うと、Tabキーの順番が内容の順に沿わなくなるとしています。後から部品を足したときに、数を直し忘れて順番が崩れることもあります。

選んでいる所が見えるか

達成基準2.4.7の解説では、どの部品をキーボードで選んでいるかを分かるようにすることが目的だとしています。フォーカスの表示は、一度出たら消えずに見え続ける必要があり、時間がたつと消える表示にはしません。

見た目を整えるために、CSSで :focus { outline: none } と書いて枠を消すことがあります。W3Cの技法F78では、作る人が代わりの表示を用意せずにこう書くと、達成基準2.4.7を満たさないとしています。W3Cの技法F55では、選ばれた部品のフォーカスをスクリプトで外すことも、満たさない例にしています。

固定の帯で隠していないか

達成基準2.4.11の解説では、画面の上や下に固定した帯、閉じずに残る小さな画面などが、選んだ部品に重なることがあるとしています。Cookieの同意を求める帯が、選んだ部品をすべて隠すと、この基準を満たしません。W3Cの解説では、帯に重ならないようにスクロールの余白(scroll padding)をとる方法や、帯を閉じるまでほかを操作できない形にする方法が挙げられています。

手順: Tabキーで1つずつ確かめる

確かめるときは、マウスを使わずに、次の順で進めます。

  1. できることを書き出す: リンク、メニュー、ボタン、入力欄、並べ替えなど、ページで行えることを書き出します。W3Cの技法G202も、最初にページの機能を書き出すとしています
  2. Tabキーで順に選ぶ: Tabキーで次へ、Shiftキーを押しながらTabキーで前へ進み、選んだ部品に枠などの表示が見えるかを確かめます
  3. 選んだ部品を動かす: Enterキーやスペースキーで、ボタンを押す、メニューを開くなどの操作ができるかを確かめます
  4. 抜けられるかを見る: ダイアログやメニューを開いたら、Escキーなどで閉じて元の場所に戻れるかを確かめます
  5. 順番と隠れを見る: 選ぶ順番が内容の順に合っているか、固定の帯で選んだ部品が隠れていないかを確かめます

フォーカスの表示を目立たせたいときは、W3Cの技法C45のように、CSSの :focus-visible を使って表示を決める方法があります。次のCSSは、その書き方の見本です。自分のサイトの見た目に合わせて色と太さを決めるための例で、実行するコマンドではありません。サイトのCSSを書き換えるときは、元のファイルの写しを残してから直し、もう一度Tabキーで確かめます。

/* 見本: キーボードで選んだ部品に、はっきりした枠を付ける(色と太さはサイトに合わせる) */
:focus-visible {
  outline: 3px solid #1a5fb4;   /* 枠の線 */
  outline-offset: 2px;          /* 部品との間を少し空ける */
}

自分で直すか、相談するかの判断

迷ったときは、「HTMLの部品の種類とCSSを直すだけで済むか」で決めます。消していたフォーカスの枠を戻す、tabindexの数を外す、固定の帯に重ならないよう余白をとる、といった直し方なら、自分で直して、もう一度同じ手順で確かめます。

自分で作ったメニューや、ドラッグで動かす部品のように、スクリプトで動きを作っている場合は、キーボードでの動かし方を設計し直すことになります。確かめた結果の一覧を持って、そのページを作った人や、Webデザインを教えている人に相談します。

つまずきやすいところ

まとめ

  • WCAG 2.2の達成基準2.1.1では、すべての機能をキーボードで操作できるようにします
  • 部品に入ったら、Escキーなどでキーボードだけで抜けられるようにします
  • Tabキーで進む順番は内容の順に合わせ、tabindexに数を付けて順番を決めることは避けます
  • フォーカスの枠は代わりの表示なしに消さず、固定の帯で隠れないようにします