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:

http://jsfiddle.net/eK4TT/

<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.

Weaks

Not sure what is going on, it may be a weird JSFiddle & FF bug. Try dropping all tabindexs, and put tabindex="-1" on all and only the links. I don't have access to FF to test. – Towards

nah it's a mac thing. see my answer... – Weaks

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 – Towards

You will find these settings useful: weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers – Handout

Whomever is reading this in 2023, I wrap a <input type="button"> inside an anchor tag with href, and it worked fine. – Scrawny

Still relevant for me on FF on my recently purchased macbook air. Generally a linux user, and so this is my first Mac. Why would such an important accessibility feature be turned off by default. I was shocked to discover links not avialble via tab when completeting a WCAG assessment. This was driving me nuts. Thanks all! – Azo

Answer 1

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:

1. In System Preferences → Keyboard, in the Shortcuts pane, check the “all controls” radio at the bottom.

2. 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.

Weaks

10.9 Mavericks: System Preferences > Keyboard > Shortcuts > 'All controls' radio button at the bottom of the pane. – Coopt

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! – Uzzi

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. – Sleeper

Thank you so much! I wondered why Chrome and Firefox (on MacOS) are so different in focusing with tab. Thats why :-) – Quid

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). – Cabbageworm

In Catalina, doing just step 2. worked for me. Thanks! – Culch

8 years later and (option 2) is still the answer. Fun times. – Effectually

2022 checking in and #2 is still the best solution. – Vernonvernor

Suggestion 1 is different in newer versions of OSX. See @javabeangrinder's answer. – Shelli

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: 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. – Filberte

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. – Mordent

If anybody is wondering where the 7 comes from, see "Possible Values and effects" here: kb.mozillazine.org/Accessibility.tabfocus (it's 1+2+4) – Ironing

Answer 2

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

Evadnee

You need a ff restart to have those changes applied – Dorsum

@Dorsum I don't remember having to do that but thank you for sharing! – Evadnee

I did not have to restart Firefox. The settings were applied successfully without doing that. – Seismo

thx! this worked for me without restarting Firefox – Illjudged

I can't find this in macOS Ventura (13.3.1). Anyone can give me a hint, please? – Hugh

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. – Kelwunn

Answer 3

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.

Infringement

Answer 4

macOS Ventura:

1. Settings -> (Accessibility > Keyboard Shortcuts > Keyboard)

Mac Shortcut Settings

2. 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

Ev

Answer 5

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

Unreality

Answer 6

With macOS Sonoma (Version 14.1.1), the 2nd option alone in the answer worked for Firefox. Something similar to 1st option alone also worked as well, but it's the "Keyboard navigation" that I had to enable for my version of Mac.

Seasoning

Answer 7

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.

Mcgrath

Answer 8

It may happen that you don't find accessibility.tabfocus In Firefox. Here is how you can activate this option:

Settings > General > Browsing > use the tab key to move focus between form controls and links 

Askance