キーボードだけで使えるWebの設計

マウスを使わないユーザーがいるという前提

私たちはふだん、マウスやタップ操作でWebを利用しています。
でも実際には、キーボードだけで操作している人も少なくありません。

たとえば、

• 視覚に障害があり、スクリーンリーダーとキーボードで操作している方
• 手の動きに制限があり、マウスを使うのが難しい方
• 一時的にマウスが使えない状況にある方（片手がふさがっている、マウスが故障したなど）

こうしたユーザーにとって、マウスなしで使えることは、選択肢ではなく前提です。
そしてこの視点は、アクセシビリティにおいてとても大切な基礎になります。

見えないフォーカス伝わらない操作

私が最初に戸惑ったのは、「今どこを操作しているのかがわからない」ということでした。

たとえば、Tabキーでフォームの入力欄やボタンを移動しても、見た目に変化がなく、どこにフォーカスがあるのかがわからない。
リンクにフォーカスしても、色も下線も変わらず、操作できているという実感が得られない。

つまり、操作できる以前に、操作できていると感じられることが欠けていたのです。
この安心感の欠如が、キーボード操作の離脱につながる大きな要因のひとつだと感じました。

キーボードで使えるとはどういうことか

キーボード操作に対応するというのは、Tabキーで移動できるだけではありません。
Shift＋Tabで戻ったり、Enterキーやスペースキーでボタンを押したりと、一通りの操作が直感的に行えることが求められます。

さらに、次のような配慮も重要です。

• フォーカスが当たったときに視覚的な変化（枠線・背景色など）をつける
• フォーカスの移動順が、見た目の流れや読み上げ順と一致している
• hover操作だけで機能するUI（ドロップダウンメニューなど）を、キーボードでも使えるように工夫する
• モーダルやポップアップなど、一時的な要素にもフォーカス移動や閉じる手段を設ける

つまり、見た目どおりに使えることと、読み上げられた順に操作できることが一致している状態こそが、本当の意味で使えるWebなのです。

設計を確かめる視点としてのキーボード操作

以前は、「これは一部のユーザーのための対応」だと思っていたこともありました。
でも今では、キーボード操作で試してみること自体が、設計の検証になると感じています。

キーボードで操作してみることで、たとえばフォーカスが意図しない順番で移動してしまったり、飛ばしたくない要素を素通りしてしまったり、リンクやボタンにたどり着けなかったりと、設計上のほころびに気づくことがあります。

だからこそ、これは「誰かのための配慮」というより、「本当に使える設計になっているかを、自分で確かめる方法」でもあるのだと思います。

やってみよう。マウスを置いてTabキーを押してみる

まだ試したことがない方は、一度ご自身のサイトをキーボードだけで操作してみてください。

• Tabキーで、リンクやボタンに移動できるか
• Shift＋Tabで逆方向に戻れるか
• Enterキーやスペースキーで、ボタンやリンクが反応するか
• メニューやモーダルが、開閉・移動・終了できるか

これだけのことで、設計がユーザーに届いているかどうかの手がかりが得られます。
きっと、これまで見えていなかった発見があるはずです。