ハクソク

世界を動かす技術を、日本語で。

キーボードナビゲーションを改善するための小さな変更

2025年8月25日原文(b.43z.one)

概要

  • キーボードナビゲーション 向けブラウザ改善の小技紹介
  • FirefoxやChromeでの リンク検索機能の限界 解説
  • ボタンやdivなど 非リンク要素 の扱いに関する課題
  • Enterキーでクリック実行 する拡張の提案と実装例
  • バッテリー・CPU消費 への言及

キーボードナビゲーションを改善する小さな変更

  • Firefoxの '（クイックファインドリンク）機能 活用によるリンク移動
    • 'キー押下後、リンクテキスト入力で該当リンクをハイライト
    • Enterキー押下でリンクへジャンプ
  • しかし、多くのサイトは ボタンやdivで操作 を実装
    • これらは リンクでないため、上記機能非対応
  • /（クイックファインド）やCtrl+F（ページ内検索）は 全テキストをハイライト 可能
    • ただし、 Enterキーで何も起こらない 仕様
  • 例：リンク、JavaScriptリンク、ボタン、spanのonclickなど 多様な要素
  • Enterキーでハイライトされた要素をクリック できれば理想的

シンプルな拡張機能による解決策

  • 拡張機能で下記コードを注入 することで対応可能

    addEventListener('keydown', event => {
  if(event.key !== 'Enter') return
  if(event.shiftKey) return
  const elementWithSelection = getSelection()?.anchorNode?.parentElement
  if(!elementWithSelection) return
  elementWithSelection.click()
  getSelection()?.removeAllRanges()
})
    • Enterキー検知後、選択中ノードの親要素をクリック
    • クリック後、選択範囲を解除
    • Shift+Enterなど特殊ケースは除外

  • この 小さなハック でキーボード操作性が大幅向上

バッテリー・CPU消費の問題

  • Firefoxの高いバッテリー・CPU消費 も課題として言及
  • 効率化や最適化 の必要性

Hackerたちの意見

検索ボックスでEnterを押すと、Firefoxは次の検索パターンの出現を見つけてくれるよ。拡張機能を使わずに簡単に直せる方法は、まずEscを押して検索ボックスを閉じてからEnterを押すことだね。

└

これはChromeのリンクやボタンで動くけど、Firefoxではリンクだけだね。どちらでも他のHTML要素には効かないよ。

ちなみに、「キーボード戦士」ならFirefoxのVimium拡張機能を超おすすめ！ https://addons.mozilla.org/en-US/firefox/addon/vimium-ff

└

昔はVimiumを使ってたし、似たような拡張機能も試したけど、人気のある拡張機能のコードベースがどれだけ大きいかにいつもビビってたんだ。結局、必要なことだけをやる小さな拡張機能を作ったよ。 https://github.com/h43z/jkscroll

└

キーボードウォリアーって、政治的スペクトラムの10%の端っこにいる人たちのことを指すよね。こういう人たちにもっといい呼び方があればいいんだけど、パワーユーザーって言葉は広すぎるな。

もしかしたら有名かもしれないけど、キーボードベースのブラウジングにはVimium Cがかなり気に入ってる。Vimのキーバインディングが十分に揃ってるし、'f'を押すとクリック可能な要素が全部ハイライトされるんだ。Firefox: https://addons.mozilla.org/ko/firefox/addon/vimium-c/ Chrome: https://chromewebstore.google.com/detail/vimium-c-all-by-key... * Vimと完全に同じではないけどね。

ちなみに、最近キーボードでウェブページをスクロールしようとしてるんだけど、めちゃくちゃだね。誰もやってないみたい。PageUp/PageDownが常に表示されるトップバーのあるサイトでは正しく動かないし（コンテンツの一部が表示されない）、カーソルの上下も予期しない動きをすることが多いよ（例えばMastodonでは、PageDownを何回か押した後にカーソルを下にすると、元に戻されちゃう）。悲しい退化だと思う。マウスやスクロールホイールを使えない人もいるのに！

└

EUやアメリカでは、こういう壊れたアクセシビリティは法律違反で、サービス提供者が訴えられることもあるんだ。ただし、公共や商業サービスにのみ適用されるけどね。

└

スペース/シフト+スペースとページアップ/ページダウン、エンドキーを使って縦スクロールしてるけど、全然問題ないよ。デフォルトでJSを無効にしてるけど、これが役立つこともあれば、逆に邪魔になることもある。たまに、ドキュメントのスクロールエリアを使わずに独自のスクロールエリアを作ってるページに出くわすことがあるけど、そしたらそのエリアにフォーカスを合わせないといけない（必要に応じてタブを何回も押すか、クリックするか）から、キーボードでスクロールできるようになるまでちょっと面倒。けど、そんなのは稀だね。昔、Firefoxはスティッキーヘッダーの影響を補うために、ページのスクロール量を減らすようになったけど、だいたい上手くいってる。ただ、完璧ではないけどね。他のブラウザでは同じ機能を見たことがないな。面白いのは、下にスクロールするとヘッダーが消えて、上にスクロールすると再び現れることがあって、そのせいでページアップとページダウンを繰り返すと一方向にしか動かないことがあるんだよね。 —⁂— エンドキーだけど、ホームキーは使えない。僕のノートパソコンではFn+左矢印なんだけど、左矢印キーはもう1年以上使えない状態。バッテリーとキーボードを交換しようか考えたけど、ノートパソコンが他にも色々壊れてるから、投資する価値があるか微妙なんだよね。

└

時々、ページアップ/ダウンがYouTubeの動画をシークしちゃうんだよね。最悪だ。

└

2年前に自分のためにこのChrome拡張を作ったんだ: https://chromewebstore.google.com/detail/focustoscroll/jbcpo... 他の誰も興味がなかったみたいだけど、今でも毎日使ってるよ。

└

マウスイベントをキーボードショートカットにマッピングするのが、現実的に進むべき唯一の方法かもしれないね。カーソルや選択位置にマウスを移動させて、そこからスクロールイベントを送る感じ。レノボのキーボードにあるトラックポイントとマウスボタンはこの解決策の一つだけど、IMEのスクロールはまだ面倒だね（トラックポイントを動かしながらスクロールモードに切り替える必要があるから）。

Hacker Newsで議論の続きを見る