5 ms·

On day 1 of this journey I realized how important the Tab key is for website navigation. Tab lets you jump between focusable elements such as links and buttons.

On day 1 of this journey I realized how important the Tab key is for website navigation. Tab lets you jump between focusable elements such as links and buttons. If you’re viewing this page from a computer with a keyboard you can try it now [...] I tried pushing <TAB> and Firefox refuses to do anything with the page. Extremely ironic. I've never experienced a website not being able to do anything with the tab key. For instance, if I push <TAB> right now, Hacker News will navigate me to the "add comment" button. But this website claiming that "a lot of docs sites suck at Tab-based navigation"? Somehow it manages to be the worst I've seen yet. Just to make sure this is not a Firefox issue, I opened the page in Safari, pushed <TAB>, and nothing happened. At this point I'm not sure if the author is performing some elaborate prank on me. I agree that accessibility is important, and being able to quickly navigate with tabs and arrow keys is something that many modern web apps fail at, but some of them do pretty well! (Slack is surprisingly good at placing focus on the most commonly used widgets of the app, and they even provide a mini tutorial on your first attempt at keyboard navigation). Assuming that this article is not intentionally breaking keyboard navigation, they should hold themselves to the same standards they have outlined.

slimsag 2y ago
Firefox disables tab key navigation on macOS by default. You can enable it via System Settings -> Keyboard -> 'Keyboard navigation' toggle Then it works exactly the way the author described (which is also the default on Windows and Linux, I believe)
- koito17 2y ago
  Thanks for mentioning this. Navigation now works as expected on Firefox, but Safari for some reason still doesn't do anything. Now I am curious why Mac OS has defaults that seemingly break accessibility on some websites? This is the first time in recent memory that I've experienced a page not responding to tab keys at all. Your suggestion remedied the issue on Firefox, but not on Safari for some reason.
  - panzerboiler 2y ago
    The default shortcut choosen by apple is option+tab (...). You can change it on the preferences of Safari, but not on iPadOS (or I didn't find the way to do it).
    - deleted 2y ago
      [deleted]
  - throwitaway1123 2y ago
    Safari requires yet another setting to be toggled in order to allow tabbing between links [1]. Apple is normally at the vanguard when it comes to accessibility, but there are a few legitimate keyboard navigation quirks in Safari. [1] https://www.mayank.co/blog/safari-focus#keyboard-navigation https://www.mayank.co/blog/safari-focus#keyboard-navigation
- re 2y ago
  > Firefox disables tab key navigation on macOS by default To be more specific, it only navigates between form elements (including <button>) by default. I was curious why Tab was taking me all over a StackOverflow page but not the one linked here.
Arnavion 2y ago
Works fine for me in FF 126.0.1 on desktop Linux.
SoftTalker 2y ago
Most pages have so many clickable/focusable elements that tab navigation is next to useless. There was a browser called xxxterm (later called xombrero) that did this pretty nicely. There was a hot key that showed a little overlay of a number on each link. Type that number and it clicks the link. Sadly the project was discontinued. It was one of my favorite browsers. https://en.wikipedia.org/wiki/Xombrero https://en.wikipedia.org/wiki/Xombrero
- kenniskrag 2y ago
  qutebrowser does that. https://en.m.wikipedia.org/wiki/Qutebrowser https://en.m.wikipedia.org/wiki/Qutebrowser
- PhilipRoman 2y ago
  It's a really cool feature, I use it everywhere I can: Link Hints extension in browser, EasyMotion in Vim, the "dot" shortcut in elinks, etc.
- herewulf 2y ago
  Tridactyl does this also. Nyxt does this also. If you really care about all websites having roughly the same key binding experience then you need to use an extension or custom browser.
o11c 2y ago
The apostrophe key is also very useful, to jump quickly to a particular link. Unfortunately a lot of websites have no searchable text on their links. Sometimes the problem is that it's an icon; other times the problem is that the text is not added in a way that allows search (I don't HTML enough to know all the ways). This is in addition to all the clickable elements that aren't tabbable, ugh. I've also found a significant number of scrolling/sliding and menu-like elements where tabbing does weird things (partial scroll, not adjacent, etc.).
- netghost 2y ago
  I never knew about this, thank you!
kaycebasques 2y ago
updated the post to cover browser/OS compat: https://technicalwriting.dev/a11y/skip.html#macos-and-windows https://technicalwriting.dev/a11y/skip.html#macos-and-window...

slimsag 2y ago

Firefox disables tab key navigation on macOS by default. You can enable it via System Settings -> Keyboard -> 'Keyboard navigation' toggle Then it works exactly the way the author described (which is also the default on Windows and Linux, I believe)

koito17 2y ago
Thanks for mentioning this. Navigation now works as expected on Firefox, but Safari for some reason still doesn't do anything. Now I am curious why Mac OS has defaults that seemingly break accessibility on some websites? This is the first time in recent memory that I've experienced a page not responding to tab keys at all. Your suggestion remedied the issue on Firefox, but not on Safari for some reason.
- panzerboiler 2y ago
  The default shortcut choosen by apple is option+tab (...). You can change it on the preferences of Safari, but not on iPadOS (or I didn't find the way to do it).
  - deleted 2y ago
    [deleted]
- throwitaway1123 2y ago
  Safari requires yet another setting to be toggled in order to allow tabbing between links [1]. Apple is normally at the vanguard when it comes to accessibility, but there are a few legitimate keyboard navigation quirks in Safari. [1] https://www.mayank.co/blog/safari-focus#keyboard-navigation https://www.mayank.co/blog/safari-focus#keyboard-navigation
re 2y ago
> Firefox disables tab key navigation on macOS by default To be more specific, it only navigates between form elements (including <button>) by default. I was curious why Tab was taking me all over a StackOverflow page but not the one linked here.

Arnavion 2y ago

Works fine for me in FF 126.0.1 on desktop Linux.

SoftTalker 2y ago

Most pages have so many clickable/focusable elements that tab navigation is next to useless. There was a browser called xxxterm (later called xombrero) that did this pretty nicely. There was a hot key that showed a little overlay of a number on each link. Type that number and it clicks the link. Sadly the project was discontinued. It was one of my favorite browsers. https://en.wikipedia.org/wiki/Xombrero https://en.wikipedia.org/wiki/Xombrero

kenniskrag 2y ago
qutebrowser does that. https://en.m.wikipedia.org/wiki/Qutebrowser https://en.m.wikipedia.org/wiki/Qutebrowser
PhilipRoman 2y ago
It's a really cool feature, I use it everywhere I can: Link Hints extension in browser, EasyMotion in Vim, the "dot" shortcut in elinks, etc.
herewulf 2y ago
Tridactyl does this also. Nyxt does this also. If you really care about all websites having roughly the same key binding experience then you need to use an extension or custom browser.

o11c 2y ago

The apostrophe key is also very useful, to jump quickly to a particular link. Unfortunately a lot of websites have no searchable text on their links. Sometimes the problem is that it's an icon; other times the problem is that the text is not added in a way that allows search (I don't HTML enough to know all the ways). This is in addition to all the clickable elements that aren't tabbable, ugh. I've also found a significant number of scrolling/sliding and menu-like elements where tabbing does weird things (partial scroll, not adjacent, etc.).

netghost 2y ago
I never knew about this, thank you!

kaycebasques 2y ago

updated the post to cover browser/OS compat: https://technicalwriting.dev/a11y/skip.html#macos-and-windows https://technicalwriting.dev/a11y/skip.html#macos-and-window...