ハクソク

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

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

273日前原文(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のスクロールはまだ面倒だね（トラックポイントを動かしながらスクロールモードに切り替える必要があるから）。

└

AIの要約を追加する前は、Googleで最初のリンク結果をハイライトするのにTab+Tab+Enterが必要だったんだ。今は要約があるから、Tab+Tab+Enter+Tab+Tabになった。めっちゃクレイジーだね（笑）。

それか、Surfingkeys拡張機能を使うのもありだよ。カスタマイズするのにはちょっと学習曲線が急だけど、その努力は十分に価値があるよ。

数ヶ月前にVimiumをインストールしたけど、もう戻れないよ。 -> https://vimium.github.io/ マウスなしでコンピュータを操作するためにMouselessも使ってる。 -> https://mouseless.click/

└

macOSユーザーにはShortCatを超おすすめ！: https://shortcat.app/ ShortCatはアクセシビリティAPIを使って、どんなアプリでもVimiumスタイルのキーボードリンクをボタンやテキストフィールドに追加してくれる。VimiumはFirefoxで使うとShortCatでウェブサイトをクリックするよりも速いと思うから、両方使ってるけど、ShortCatは技術的にはVimiumができることは全部できるはず。

└

i https://tridactyl.xyz/about/ 編集: URLを追加したよ。

└

Vimium、(neo)vim、vimのキーバインディングは人生を変えてくれた。

└

i3wmを使ってるから、色々なキーバインディングが使えるよ。マウスなしの操作にはxdotoolを使って、キーボードで16ピクセルか64ピクセルずつポインタを動かしてる。もしマウスポインタをオンオフできたらいいのにな。

└

もうvimiumは使ってないけど、vimium-cを使ってるよ。でも、これらは両方で使えるはずだから、カスタムマッピングに追加してみて。後で感謝されると思うよ： map gf LinkHints.activateOpenInNewTab count=999999 map go LinkHints.click direct="focused" mode="newtab-active" map gb LinkHints.click direct="focused" mode="newtab" map gm toggleMuteTab

普段はこんな感じでやってるよ。"/"を押して検索して、見つけたらそれに移動する。リンクだったら「go」を押すと新しいタブで開くし、「gb」を押すと切り替えずに開く。これ、絶対気に入ると思うよ。面白いオプションがあったら教えてね。

キーボードをよく使う人にとって、HTMLレンダリングパネルからフォーカスが外れるのが嫌な場合、Ctrl-F Escを押せばすぐにフォーカスが戻るよ。1967年からネットで見た中で一番のヒントだね！

最近、Windowsでの完全キーボード指向のワークフローについての基本を紹介する投稿を書いたんだ。https://amun.pl/blog/post/working-on-windows-with-keyboard-o... （画像を消しちゃったからごめんね、コンテナのバックアップいじってたら間違って消しちゃった）そこで、BrowseCutというChromiumプラグインについても触れてるんだけど、これがあればいろんなページのナビゲーションがめっちゃ楽になるよ。BrowseCut拡張がDuolingoで使えるかって質問が来ると思うけど、使えないんだ。ただ、他のページでは問題なかったよ。

Firefoxのクイックファインド機能は本当に便利だと思ってる。でも、選択した後にリンクをクリックするのがいつも気まずくて、流れが途切れちゃうんだ。このちょっとした調整が素晴らしいのは、その余分なステップを数行のコードで取り除いてくれるから。もしブラウザが選択したリンクを自動的にアクティブにできるようになったら、キーボードでのナビゲーションがもっとスムーズになると思う。いつかそれが標準機能になることを心から願ってるよ。

もう一つのヒント拡張をおすすめしたいんだけど、これは「Yet Another Hints Extension (YAHE)」って呼ばれてて、すごくシンプルでいい感じだよ。長い間使ってるけど、満足してるよ。（YAHE）https://gitlab.com/jpallari/yahe （ところで、「Hit-A-Hint」っていう拡張を覚えてる人いる？）