How to allow keyboard focus of links in Firefox?

Question

Go to this ultra-simple fiddle in a Webkit browser and click on on of the inputs:

<input type="text">
<input type="text">
<input type="text">
<a href="#">my first link</a>
<a href="#">my second link</a>
<a href="#">my third link</a>

Then, notice that you can keyboard navigate through both the inputs and the links using the Tab key (and Shift+Tab to navigate in reverse order).

Now, look at the same fiddle in Firefox on Mac OS and do the same thing. The inputs receive focus, but the links won't receive focus. It's not a CSS display problem. The focus leaps from the last input to the URL bar.

I've tried endless combinations of tabindex declarations in the markup, and to no avail, e.g.:

http://jsfiddle.net/eK4TT/1/

What the heck is going on here? I will accept any answer that has:

a) a fiddle working in Firefox
b) an explanation of what exactly is going on here in Mozilla's head. It appears to contradict the spec.

Not sure what is going on, it may be a weird JSFiddle & FF bug. Try dropping all `tabindex`s, and put `tabindex="-1"` on all and only the links. I don't have access to FF to test. — Ryan B, Jul 29 '12 at 21:13
Oh yeah. This behavior should also happen in Safari too, if you don't have "all controls" enabled or whatever. It isn't a Moz issue — Ryan B, Jul 30 '12 at 03:26
You will find these settings useful: http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/ — Nasia Makrygianni, Jan 22 '20 at 16:09
Whomever is reading this in 2023, I wrap a inside an anchor tag with href, and it worked fine. — Lucas M. Oliveira, Aug 02 '23 at 02:27

score 428 · Accepted Answer · edited Sep 21 '18 at 12:11

428

Ok, somebody explained this to me. It's a Mac problem. Mozilla is being true to operating system settings in Mac OS.

There are two distinct ways around this on the user side. Both seem to work:

In System Preferences → Keyboard, in the Shortcuts pane, check the “all controls” radio at the bottom.
In Firefox, type "about:config" in the URL bar. There is no accessibility.tabfocus preference on the mac, so you'll have to make one. Right click in the window, create a new "integer" pref, and set it to 7.

Neither of these are terribly obvious. Also, neither of these are a server-side solution for developers, which is frustrating.

edited Sep 21 '18 at 12:11

doppelgreener

4,809
10
46
63

answered Jul 29 '12 at 22:27

Ben

11,082
8
33
47

21

10.9 Mavericks: System Preferences > Keyboard > Shortcuts > 'All controls' radio button at the bottom of the pane. – paulhhowells Oct 16 '14 at 10:22
14

I'm on Catalina and I had to perform both of these suggestions - updating the system preferences alone didn't seem to change anything in Firefox. Once I added the new preference to Firefox's `about:config`, Firefox finally allowed tab focusing. Thanks! – Ray Brown Nov 14 '19 at 17:08
1

In MacOS Mojave (Version 10.14.6), I had to perform both suggestions as well. The system preference didn't change Firefox' behavior. Adding the new Firefox preference did the trick. It's pretty wild that hyperlink keyboard focus is not a default behavior in Firefox. – Paul Shryock Mar 17 '20 at 23:13
Thank you so much! I wondered why Chrome and Firefox (on MacOS) are so different in focusing with tab. Thats why :-) – Hermann Schwarz Jun 23 '20 at 13:46
3

Side note: I had to quit/restart Firefox after changing the config in System Preferences. Also, for Safari, I had to Safari > Preferences > Advanced > Accessibility: [x] Press Tab to highlight each item on a webpage (this was in addition to setting it in System Preferences). – Bryan Downing Jul 28 '20 at 23:23
In Catalina, doing just step 2. worked for me. Thanks! – sandrina-p Aug 17 '20 at 06:26
11

8 years later and (option 2) is still the answer. Fun times. – Bruford Oct 28 '20 at 12:29
2022 checking in and #2 is still the best solution. – Gavin Jan 20 '22 at 09:53
Suggestion 1 is different in newer versions of OSX. See @javabeangrinder's answer. – BBaysinger Mar 07 '22 at 12:18
Not sure, but seems there´s a way to work around this with code. In my job, we´re currently looking into this. Alpine JS is in our stack. And this demo link works fine without any configuration change: https://alpinejs.dev/component/modal I´m digging deeper to check if we can arrange something without Alpine and I´ll post here if I find it. – Jorge Mauricio Feb 09 '23 at 20:38
In 13.4.1 Ventura, step 1 was located in: System Settings > Keyboard > Keyboard Shortcuts > Keyboard. The default is all options selected, so I didn't need to change anything there (although the "Restore defaults" button will select all if anything has been changed). Step 2 was all that was required for me since step 1 was already in place. – AnnieP Aug 09 '23 at 17:29

score 35 · Answer 2 · answered Feb 15 '21 at 13:11

35

On MacOS Big Sur this is done like this:

Tick the checkbox Use keyboard navigation...

I also didn't have to hack the about:config

answered Feb 15 '21 at 13:11

javabeangrinder

6,939
6
35
38

5

You need a ff restart to have those changes applied – tobi-or-not-tobi Mar 31 '21 at 00:28
1

@tobi-or-not-tobi I don't remember having to do that but thank you for sharing! – javabeangrinder Mar 31 '21 at 12:19
1

I did not have to restart Firefox. The settings were applied successfully without doing that. – daniels Dec 23 '21 at 09:52
1

thx! this worked for me without restarting Firefox – Andree Wille Jul 15 '22 at 09:12
1

I can't find this in macOS Ventura (13.3.1). Anyone can give me a hint, please? – Joshua Muheim Apr 11 '23 at 20:57
1

In Ventura this option has moved to the Settings -> Keyboard main page, above the `Keyboard shortcuts...` button: `Keyboard navigation` `Use keyboard navigation to move focus between cotrols. Press the Tab key to move focus forwards and Shift Tab to move focus backwards.` – OscarVanL Jul 19 '23 at 23:46

score 3 · Answer 3 · answered Apr 14 '22 at 13:57

Anyone looking at the second method explained within the accepted answer:

In Firefox, type "about:config" in the URL bar. There is no accessibility.tabfocus preference on the mac, so you'll have to make one. Right click in the window, create a new "integer" pref, and set it to 7.

Be aware that there is already a preference named accessibility.tabfocus within the Firefox Developer Edtion which is a boolean.

You can change this to an integer by clicking on the trash icon and deleting the preference. This will then allow you to select the type you would like the preference to be and allow you to assign it a value afterwards.

score 1 · Answer 4 · answered May 19 '22 at 15:03

Thanks, I'm on Catalina, and the following works:

In Firefox, type "about:config" in the URL bar. There is no accessibility.tabfocus preference on the mac, so you'll have to make one. Right click in the window, create a new "integer" pref, and set it to 7.

score 1 · Answer 5 · answered Dec 13 '22 at 19:50

1

On macOS Ventura, this keyboard shortcut seems to be able to toggle this behavior:

I did not find a way to toggle this in the settings directly yet, if someone has one please suggest an edit

answered Dec 13 '22 at 19:50

Florian Wendelborn

1,667
1
19
29

tavrel kate · Answer 6 · 2023-07-10T00:00:16.077

1

macOS Ventura:

Settings -> (Accessibility > Keyboard Shortcuts > Keyboard)

Mac Shortcut Settings

Config in Firefox -> (URL > "about:config", add "accessibility.tabfocus" and set the integer value to 7 )

Firefox config

Having this you'll be able to focus links in Firefox.

Example of focus link

edited Jul 10 '23 at 00:00

answered Jul 09 '23 at 23:47

tavrel kate

11
2

How to allow keyboard focus of links in Firefox?

6 Answers6

Linked