ブラウザのキー操作について - arms inc. Engineers' Blog

こんにちは、ナカムラです。
前回、グローバルナビゲーションについての考えをまとめました。

tech.arms-soft.co.jp

今回は実際にキー操作に対応したグローバルナビゲーションを作る前に、キー操作の方法や対象などを確認していきたいと思います。

キー操作

まずキー操作の中でページ内の操作によく使うものをピックアップしました。

tabキー：操作可能な要素にフォーカスする
shift + tabキー：一つ前の要素をフォーカスする
enterキー：要素をフォーカスした状態で押すと実行する（リンクなら遷移、モーダルなどなら開閉します）
escキー：モーダルを閉じるなど
↑↓キー：上か下へスクロールする
command + ↑↓キー：一番上か一番下へスクロールする

調べたら他にも色々ありました。

実際に使うとしたらページの中間にいるときに「グローバルナビゲーションをフォーカスしたい」といった場合どうやって操作するのでしょう。
一番上に戻ってからフォーカスし直すくらいしか思いつかなかったのでチャットGPTに聞いてみたところ、特定のキー操作に対してjavaScriptでフォーカスを移動させる方法を教えてくれました。
「特定のキー操作」は「F6」が一般的だそうですが対応しているサイトは少し探しただけでは見つかりませんでした。本当に一般的なのでしょうか・・？？？

フォーカスする要素

キー操作でフォーカスされる要素

a要素
button要素
input・textarea・select要素
details要素

など
divなどはフォーカスされません。

では実際に下記のDEMOで操作してみてください。
tabキーを押していくとフォーカス対象の要素がフォーカスされていきます。
ラジオボタンの選択肢を選ぶにはラジオボタンにフォーカスした後、←→キーで操作します。
selectの選択肢を選ぶにはselectにフォーカスした後、↑↓キーで操作し、enterキーで確定します。

inputのhiddenやdisabled属性のある要素はフォーカスされません。
またtabindexを-1にした要素もフォーカスの対象外となります。
※本来フォーカスするものではない要素をtabindex属性を使ってフォーカス対象にすることは可能ですが推奨はされていません。

tabindex属性について：tabindex - HTML | MDN

See the Pen キー操作でフォーカスする要素 by Nakamura (@takayo-nakamura) on CodePen.

javaScriptで特定のキー入力時に実行する

先ほどのページの中間地点にいてもグローバルナビゲーションに戻れるように、「F6」を押したらグローバルナビゲーションの最初のa要素にフォーカスする処理を書きました。
下記のDEMOを別ウィンドウで開いて試してみてください。
DEMO：javaScriptで特定のキー入力時に実行する

See the Pen Untitled by Nakamura (@takayo-nakamura) on CodePen.

document.addEventListener("keydown", function(event) {
    if (event.key === "F6") { // F6キーでグローバルナビゲーションにフォーカス
        event.preventDefault();
        const globalNav = document.querySelector("#global-nav a"); // 最初のリンクにフォーカス
        if (globalNav) {
            globalNav.focus();
        }
    }
});

addEventListenerのkeydownでイベントを取得し、event.keyの内容がF6だったらグローバルナビゲーションのリンクを取得しフォーカスする、という処理になります。
HTMLだけでは実装が難しいUIもあると思いますので、javaScriptも活用していきたいと思います。

まとめ

キー操作を実際にやってみて便利だったので使いたいと思いました。
そして調べれば調べるほど実装する際はあらゆる操作パターンを想定しないとならず、どこまで実装するかなども含めて検討するのが難しそうだなと思いました。
よくあるUIなら一度作ってしまえばある程度は使い回しができると思うので検討してみたいと思います。