7 ms·

A small change to improve browsers for keyboard navigation

207 points by h43z 1y ago

massimoto 1y ago
Control + Enter worked on the first three test elements for me on Chrome + Mac. I got alerts and redirects.
jiehong 1y ago
Good idea! I think browsers should also come with headingMaps [0] and landmarks by default for all websites. With a keyboard shortcut to access them, navigation would be great (assuming websites have a semantic DOM). [0]: https://addons.mozilla.org/en-GB/firefox/addon/headingsmap https://addons.mozilla.org/en-GB/firefox/addon/headingsmap
dannyfritz07 1y ago
I'm using Firefox and the links were activated when I hit enter in the quick-find prompt. Not sure why the behavior is different than what the author is seeing.
- h43z 1y ago
  The links yes, but what about buttons or other html elements?
  - hirako2000 1y ago
    Buttons work too. The issue is with any JavaScript driven on click events tags. Some sites even have their <a> tags not responding to keyboards events, because they have a hash href, and a JavaScript handler to redirect. The web is beautiful place.
    - h43z 1y ago
      I don't see it working on firefox for buttons but on chrome. Both don't work on other html elements (div,span,..).
CodeMage 1y ago
When you press Enter in the search box, Firefox finds the next occurrence of your search pattern. An easy fix that doesn't require an extension is to press Esc first, which closes the search box, and then you can press Enter.
- h43z 1y ago
  This works on links and buttons in chrome. In firefox just on links. In both it doesn't work for other html elements.
  - chrismorgan 1y ago
    I was going to disagree with you, but… huh. It doesn’t work on buttons. Thought it did. Selection is set, but focus isn’t. Further workaround: Shift+Tab. This feels like it may be a bug, but at the very least it’s not a recent regression—I tested Firefox 44 and it shows the same behaviour. (44.0 is the oldest version I can run now, apparently. I tried 4.0 first, the first version with linux-x86_64 builds, which I have run successfully in the past, I think even in the last year, but now all versions before 44.0 are crashing on startup.)
vunderba 1y ago
On a related note, highly recommend the Firefox Vimium extension if you're a "keyboard warrior". https://addons.mozilla.org/en-US/firefox/addon/vimium-ff https://addons.mozilla.org/en-US/firefox/addon/vimium-ff
- h43z 1y ago
  I used to use vimium (and tried similar extensions) but it always scared me how big the codebase was for most of the popular extensions. In the end I came up with a tiny extension for just the things I need https://github.com/h43z/jkscroll https://github.com/h43z/jkscroll
- camdroidw 1y ago
  Keyboard warrior is people who are on the 10% far end of political spectrums. I'd like a better term for such people but power users is too broad.
remark5396 1y ago
It may be well-known, but I’m quite happy with Vimium C for keyboard-based browsing. It provides a sufficiently good set of Vim keybindings* and highlights all clickable elements when you press 'f', not just <a href> ones. Firefox: https://addons.mozilla.org/ko/firefox/addon/vimium-c/ https://addons.mozilla.org/ko/firefox/addon/vimium-c/ Chrome: https://chromewebstore.google.com/detail/vimium-c-all-by-keyboard/hfjbmagddngcpeloejdejnfgbamkjaeg https://chromewebstore.google.com/detail/vimium-c-all-by-key... * not exactly the same with Vim
jwr 1y ago
Incidentally, I've been trying to use the keyboard to scroll webpages recently, and it's a disaster. Nobody does it, apparently. PageUp/PageDown do not work correctly on sites that have a permanent topbar (some of the content is never shown). Cursor up/down often does something unexpected (for example in Mastodon, if you use PageDown several times and then cursor down, you will get yanked back). I think it is a sad regression. Not everybody is able to use the mouse and its scrollwheel!
- cluckindan 1y ago
  In the EU and the US, this kind of broken accessibility is not legal and the service providers can be sued. Only applies to public and commercial services, though.
- chrismorgan 1y ago
  I use Space/Shift+Space and PageUp/PageDown and End¹ for vertical scrolling all the time. It’s nowhere near a disaster. I also disable JS by default, which… well, actually that might help sometimes. And hinder other times. Rarely, I find a page that doesn’t use the document scroll area, but makes its own which is not focused, and so you have to focus that (by Tab as many times as necessary, or by clicking) before you can scroll by keyboard. But that’s rare. Long ago, Firefox started compensating for sticky headers, reducing the amount it would scroll the page by, and it mostly works well, though it’s not flawless. I don’t think I’ve observed the same feature in other browsers. One amusing situation that can arise is when the header disappears when you go down and reappears when you go up, so that repeating PageUp and PageDown yields net movement in one direction. —⁂— ¹ End, but not Home, which is Fn+Left on my laptop, but the Left key hasn’t worked for over a year now. I’ve contemplated replacing the battery and keyboard, but the laptop’s falling apart in enough other ways it doesn’t quite feel worth the investment…
  - treetalker 1y ago
    Just dropping a note to say I appreciate your asterism! :-)
    - 1y ago
blacklight 1y ago
Or just use the Surfingkeys extension - it has a bit of a steep learning curve to customize it, but it's worth every piece of effort.
ashwinsundar 1y ago
I installed Vimium a few months ago and haven't looked back -> https://vimium.github.io/ https://vimium.github.io/ Mouseless as well for navigating anywhere on the computer without a mouse -> https://mouseless.click/ https://mouseless.click/
- ashton314 1y ago
  For macOS users, I highly recommend ShortCat: https://shortcat.app/ https://shortcat.app/ ShortCat uses the accessibility API to put Vimium-style keyboard links on buttons and text fields in any app. I find that Vimium works faster in Firefox than using ShortCat to click around websites, so I use both, but ShortCat technically should do everything (clicking-wise) that Vimium does.
  - CharlesW 1y ago
    ShortCat is an incredible recommendation, thank you!
  - idk-92 1y ago
    omg this is amazing. shortcat that is
  - lelandfe 1y ago
    I wish this was paid or open source…
    - ashton314 1y ago
      As I understand it, a payment system is in the works. I would gladly fork over some cash to support ShortCat. Looks like someone recommended Homerow, which appears to be pretty comparable to ShortCat, and it has a one-time purchase option.
  - sooheon 1y ago
    Shortcat has a ~second delay before showing links, homerow (https://www.homerow.app https://www.homerow.app) is faster.
HankStallone 1y ago
I use Qutebrowser, a keyboard-driven browser built on the Chromium engine. The controls are mostly vi-like (search with /), but easy to configure.
curtisszmania 1y ago
[dead]
OGEnthusiast 1y ago
FWIW, using Chromium on Linux, I was able to use Ctrl+F + Escape + Enter to find and click on all of them except for the "span with an onclick handler".
- h43z 1y ago
  The span one is the important one though as most of the modern web does not use <button> anymore.
  - deleted 1y ago
    [deleted]
butz 1y ago
With more websites shrinking their scrollbars or removing them outright, keyboard navigation seems to be the last resort.
lolive 1y ago
Link Hints, what else !!!!!! https://addons.mozilla.org/user-media/previews/full/232/232083.png?modified=1622135143 https://addons.mozilla.org/user-media/previews/full/232/2320...
lolive 1y ago
For people using keyboard a lot, and who HATE to have focus going out of the HTML rendering panel, you can simply Ctrl-F Esc and you are back on focus. Best hint I read on the Internet since 1967 !
WhyNotHugo 1y ago
> Just press ' and start typing. This doesn't seem to work with English International keyboard.
- arp242 1y ago
  If you have dead keys you need two quotes, like everywhere else.
- garbagepatch 1y ago
  Pressing ' twice places one ' in the search box and then you have to delete it. You can press ' <space> to get the search box empty.
high_priest 1y ago
Recently, I had written a post mentioning basics of my fully keyboard oriented workflow on Windows. https://amun.pl/blog/post/working-on-windows-with-keyboard-only#chrome-chromium https://amun.pl/blog/post/working-on-windows-with-keyboard-o... (Sorry for missing images, I accidentally deleted them when messing with containers backups) I mention the BrowseCut chromium plugin over there, which made navigating all kinds of pages, a total breeze. Expecting questions if the BrowseCut extension works with Duolingo. It does not. Although, I have not had issues on any other pages.
globular-toast 1y ago
What about the fact that almost all websites that I want to search in hijack the quick search key now? https://blog.gpkb.org/posts/lamenting-firefox-quick-find/ https://blog.gpkb.org/posts/lamenting-firefox-quick-find/
stephen123 1y ago
I like leopard links for that. cmd+t type "go/" and I get all of the shortcuts I've configured. https://leopardlinks.com/ https://leopardlinks.com/
lelanthran 1y ago
Thos small snippet is a great thing to add to your site if you have all your links as buttons.
apparent 1y ago
Pressing down-arrow on WSJ articles unmutes the auto-playing video. This may have happened by mistake, but surely they've kept it this way on purpose. I hate it.
mrjavid 1y ago
[dead]
Leo-thorne 1y ago
I’ve always found Firefox’s / quick find feature incredibly useful. But having to click on a link after selecting it always felt awkward and interrupted my flow. This little tweak is brilliant because it removes that extra step with just a few lines of code. If browsers allowed links to activate automatically once selected, navigating with a keyboard would feel so much smoother. I sincerely hope that becomes a standard feature one day.
myfonj 1y ago
Just chiming in with recommendation of yet another hints extension, this one is called »Yet Another Hints Extension (YAHE)« and is really minimal and nice. Signed, happy long-time user. (YAHE) https://gitlab.com/jpallari/yahe https://gitlab.com/jpallari/yahe (BTW, does anyone here remember extension called »Hit-A-Hint«?)
mudkipdev 1y ago
The battery link is more interesting
- b0dhimind 1y ago
  yeah seriously wth, I just did powercfg /requests and it says an audio stream is in use... so many web apps open I wonder how much power its been eating.
pvtmert 1y ago
Honestly, most sites these days built in such incompetent way I cannot imagine how much disabled users suffer... Since there is no tariff adding <div> in react code, even my teammates are using these as pseudo buttons. As a user, I cannot even tell if it's a button or not. The cursor usually doesn't change or becomes "I-beam" (text selection). Only way to understand is click random places and wait for mysterious stuff to happen.

207 points by h43z 1y ago

Control + Enter worked on the first three test elements for me on Chrome + Mac. I got alerts and redirects.

Good idea! I think browsers should also come with headingMaps [0] and landmarks by default for all websites. With a keyboard shortcut to access them, navigation would be great (assuming websites have a semantic DOM). [0]: https://addons.mozilla.org/en-GB/firefox/addon/headingsmap https://addons.mozilla.org/en-GB/firefox/addon/headingsmap

dannyfritz07 1y ago

I'm using Firefox and the links were activated when I hit enter in the quick-find prompt. Not sure why the behavior is different than what the author is seeing.

h43z 1y ago
The links yes, but what about buttons or other html elements?
- hirako2000 1y ago
  Buttons work too. The issue is with any JavaScript driven on click events tags. Some sites even have their <a> tags not responding to keyboards events, because they have a hash href, and a JavaScript handler to redirect. The web is beautiful place.
  - h43z 1y ago
    I don't see it working on firefox for buttons but on chrome. Both don't work on other html elements (div,span,..).

CodeMage 1y ago

When you press Enter in the search box, Firefox finds the next occurrence of your search pattern. An easy fix that doesn't require an extension is to press Esc first, which closes the search box, and then you can press Enter.

h43z 1y ago
This works on links and buttons in chrome. In firefox just on links. In both it doesn't work for other html elements.
- chrismorgan 1y ago
  I was going to disagree with you, but… huh. It doesn’t work on buttons. Thought it did. Selection is set, but focus isn’t. Further workaround: Shift+Tab. This feels like it may be a bug, but at the very least it’s not a recent regression—I tested Firefox 44 and it shows the same behaviour. (44.0 is the oldest version I can run now, apparently. I tried 4.0 first, the first version with linux-x86_64 builds, which I have run successfully in the past, I think even in the last year, but now all versions before 44.0 are crashing on startup.)

vunderba 1y ago

On a related note, highly recommend the Firefox Vimium extension if you're a "keyboard warrior". https://addons.mozilla.org/en-US/firefox/addon/vimium-ff https://addons.mozilla.org/en-US/firefox/addon/vimium-ff

h43z 1y ago
I used to use vimium (and tried similar extensions) but it always scared me how big the codebase was for most of the popular extensions. In the end I came up with a tiny extension for just the things I need https://github.com/h43z/jkscroll https://github.com/h43z/jkscroll
camdroidw 1y ago
Keyboard warrior is people who are on the 10% far end of political spectrums. I'd like a better term for such people but power users is too broad.

remark5396 1y ago

It may be well-known, but I’m quite happy with Vimium C for keyboard-based browsing. It provides a sufficiently good set of Vim keybindings* and highlights all clickable elements when you press 'f', not just <a href> ones. Firefox: https://addons.mozilla.org/ko/firefox/addon/vimium-c/ https://addons.mozilla.org/ko/firefox/addon/vimium-c/ Chrome: https://chromewebstore.google.com/detail/vimium-c-all-by-keyboard/hfjbmagddngcpeloejdejnfgbamkjaeg https://chromewebstore.google.com/detail/vimium-c-all-by-key... * not exactly the same with Vim

jwr 1y ago

Incidentally, I've been trying to use the keyboard to scroll webpages recently, and it's a disaster. Nobody does it, apparently. PageUp/PageDown do not work correctly on sites that have a permanent topbar (some of the content is never shown). Cursor up/down often does something unexpected (for example in Mastodon, if you use PageDown several times and then cursor down, you will get yanked back). I think it is a sad regression. Not everybody is able to use the mouse and its scrollwheel!

cluckindan 1y ago
In the EU and the US, this kind of broken accessibility is not legal and the service providers can be sued. Only applies to public and commercial services, though.
chrismorgan 1y ago
I use Space/Shift+Space and PageUp/PageDown and End¹ for vertical scrolling all the time. It’s nowhere near a disaster. I also disable JS by default, which… well, actually that might help sometimes. And hinder other times. Rarely, I find a page that doesn’t use the document scroll area, but makes its own which is not focused, and so you have to focus that (by Tab as many times as necessary, or by clicking) before you can scroll by keyboard. But that’s rare. Long ago, Firefox started compensating for sticky headers, reducing the amount it would scroll the page by, and it mostly works well, though it’s not flawless. I don’t think I’ve observed the same feature in other browsers. One amusing situation that can arise is when the header disappears when you go down and reappears when you go up, so that repeating PageUp and PageDown yields net movement in one direction. —⁂— ¹ End, but not Home, which is Fn+Left on my laptop, but the Left key hasn’t worked for over a year now. I’ve contemplated replacing the battery and keyboard, but the laptop’s falling apart in enough other ways it doesn’t quite feel worth the investment…
- treetalker 1y ago
  Just dropping a note to say I appreciate your asterism! :-)
  - 1y ago

blacklight 1y ago

Or just use the Surfingkeys extension - it has a bit of a steep learning curve to customize it, but it's worth every piece of effort.

ashwinsundar 1y ago

I installed Vimium a few months ago and haven't looked back -> https://vimium.github.io/ https://vimium.github.io/ Mouseless as well for navigating anywhere on the computer without a mouse -> https://mouseless.click/ https://mouseless.click/

ashton314 1y ago
For macOS users, I highly recommend ShortCat: https://shortcat.app/ https://shortcat.app/ ShortCat uses the accessibility API to put Vimium-style keyboard links on buttons and text fields in any app. I find that Vimium works faster in Firefox than using ShortCat to click around websites, so I use both, but ShortCat technically should do everything (clicking-wise) that Vimium does.
- CharlesW 1y ago
  ShortCat is an incredible recommendation, thank you!
- idk-92 1y ago
  omg this is amazing. shortcat that is
- lelandfe 1y ago
  I wish this was paid or open source…
  - ashton314 1y ago
    As I understand it, a payment system is in the works. I would gladly fork over some cash to support ShortCat. Looks like someone recommended Homerow, which appears to be pretty comparable to ShortCat, and it has a one-time purchase option.
- sooheon 1y ago
  Shortcat has a ~second delay before showing links, homerow (https://www.homerow.app https://www.homerow.app) is faster.

HankStallone 1y ago

I use Qutebrowser, a keyboard-driven browser built on the Chromium engine. The controls are mostly vi-like (search with /), but easy to configure.

curtisszmania 1y ago

[dead]

OGEnthusiast 1y ago

FWIW, using Chromium on Linux, I was able to use Ctrl+F + Escape + Enter to find and click on all of them except for the "span with an onclick handler".

h43z 1y ago
The span one is the important one though as most of the modern web does not use <button> anymore.
- deleted 1y ago
  [deleted]

butz 1y ago

With more websites shrinking their scrollbars or removing them outright, keyboard navigation seems to be the last resort.

lolive 1y ago

Link Hints, what else !!!!!! https://addons.mozilla.org/user-media/previews/full/232/232083.png?modified=1622135143 https://addons.mozilla.org/user-media/previews/full/232/2320...

lolive 1y ago

For people using keyboard a lot, and who HATE to have focus going out of the HTML rendering panel, you can simply Ctrl-F Esc and you are back on focus. Best hint I read on the Internet since 1967 !

WhyNotHugo 1y ago

> Just press ' and start typing. This doesn't seem to work with English International keyboard.

arp242 1y ago
If you have dead keys you need two quotes, like everywhere else.
garbagepatch 1y ago
Pressing ' twice places one ' in the search box and then you have to delete it. You can press ' <space> to get the search box empty.

high_priest 1y ago

Recently, I had written a post mentioning basics of my fully keyboard oriented workflow on Windows. https://amun.pl/blog/post/working-on-windows-with-keyboard-only#chrome-chromium https://amun.pl/blog/post/working-on-windows-with-keyboard-o... (Sorry for missing images, I accidentally deleted them when messing with containers backups) I mention the BrowseCut chromium plugin over there, which made navigating all kinds of pages, a total breeze. Expecting questions if the BrowseCut extension works with Duolingo. It does not. Although, I have not had issues on any other pages.

globular-toast 1y ago

What about the fact that almost all websites that I want to search in hijack the quick search key now? https://blog.gpkb.org/posts/lamenting-firefox-quick-find/ https://blog.gpkb.org/posts/lamenting-firefox-quick-find/

stephen123 1y ago

I like leopard links for that. cmd+t type "go/" and I get all of the shortcuts I've configured. https://leopardlinks.com/ https://leopardlinks.com/

lelanthran 1y ago

Thos small snippet is a great thing to add to your site if you have all your links as buttons.

apparent 1y ago

Pressing down-arrow on WSJ articles unmutes the auto-playing video. This may have happened by mistake, but surely they've kept it this way on purpose. I hate it.

mrjavid 1y ago

[dead]

Leo-thorne 1y ago

I’ve always found Firefox’s / quick find feature incredibly useful. But having to click on a link after selecting it always felt awkward and interrupted my flow. This little tweak is brilliant because it removes that extra step with just a few lines of code. If browsers allowed links to activate automatically once selected, navigating with a keyboard would feel so much smoother. I sincerely hope that becomes a standard feature one day.

myfonj 1y ago

Just chiming in with recommendation of yet another hints extension, this one is called »Yet Another Hints Extension (YAHE)« and is really minimal and nice. Signed, happy long-time user. (YAHE) https://gitlab.com/jpallari/yahe https://gitlab.com/jpallari/yahe (BTW, does anyone here remember extension called »Hit-A-Hint«?)

mudkipdev 1y ago

The battery link is more interesting

b0dhimind 1y ago
yeah seriously wth, I just did powercfg /requests and it says an audio stream is in use... so many web apps open I wonder how much power its been eating.

pvtmert 1y ago

Honestly, most sites these days built in such incompetent way I cannot imagine how much disabled users suffer... Since there is no tariff adding <div> in react code, even my teammates are using these as pseudo buttons. As a user, I cannot even tell if it's a button or not. The cursor usually doesn't change or becomes "I-beam" (text selection). Only way to understand is click random places and wait for mysterious stuff to happen.