マウスなしで使えるページへ。キーボード操作とフォーカスの基本

ボタンが見えていても、キーボードで選べなければ操作できない人がいます。ページをTabキーでたどるときに、どこを選んでいるか、目的の操作まで進めるか、元の場所へ戻れるかを確認する方法を紹介します。

フォーカスは、いま操作する場所を示す

キーボードの入力先となっている要素を、フォーカスがある要素と呼びます。リンクやボタンの周りに枠が出るのは、その場所を視覚的に知らせる方法の一つです。

W3CのFocus Visibleの解説は、キーボードで操作する人が、どの要素にフォーカスがあるか分かることを求めています。枠線を消して見た目を整える場合も、代わりとなる表示がなければ現在位置を見失います。

マウスの位置とフォーカスは同じとは限りません。確認するときはマウスを脇へ置き、キー操作だけで移動すると、意図せずマウスに頼っている箇所に気付きやすくなります。

W3CのKeyboardの解説では、移動経路そのものが本質的な入力などの例外を除き、機能をキーボードで操作できることが基準になっています。ボタンへ移動できるだけでは、その機能を使えると確認したことにはなりません。

通常のリンクやボタンはTabキーで移動し、ShiftとTabで逆にたどれます。リンクはEnter、標準のボタンはEnterやSpaceで実行するなど、要素に応じた操作があります。選択リストやタブの内部は矢印キーを使う場合もあり、すべてをTabだけで操作するわけではありません。

たとえば資料請求フォームなら、入口のリンク、入力欄、エラーの確認、送信、完了までを一つの流れとして試せます。これは確認経路の例で、実際の送信が必要な場合は検証用の環境やデータを使うとよいでしょう。

メニューやダイアログでは、開いたあとの移動先も重要です。背景の上に表示が重なったまま、フォーカスが見えない場所へ進むと、何を操作しているのか分からなくなります。

W3Cのモーダルダイアログのパターンは、ダイアログ内へのフォーカス移動、内部でのTab移動、Escapeで閉じる操作、閉じたあとの移動先を説明しています。これはモーダルという種類の部品の扱いであり、ページ内のすべての表示枠に当てはめるものではありません。

確認では、開くボタンから操作し、内容を選び、閉じたあとに作業を続けられるかまで見ます。閉じた瞬間にページの先頭へ戻されると、同じ場所を探し直す負担が生じます。

ページ全体を何となく触るよりも、「メニューから記事を開く」など一つの目的を決めると、問題を記録しやすくなります。

表が見切れる場合は横にスクロールできます

この確認だけでアクセシビリティ全体を評価できるわけではありませんが、利用者が操作を完了できない箇所を探す具体的な入口になります。

キーボード操作では、移動・実行・戻る操作がつながり、現在位置が見えることが基本です。よく使う短い経路を一つ選び、マウスに頼らず最後まで進めるか試してみてください。