Keyboard navigation, Firefox, and Macs (including how to tab through drop-down boxes in forms)

ETA: Hate the fact that you can’t tab to drop-down boxes in forms in Firefox? This solves the problem!

I used to be able to test my sites’ keyboard navigation just by tabbing around a page in my browser. And then I couldn’t. And now I can again.

Lemme ‘splain.

Testing keyboard navigation (tab order, focus states, etc.) is an important step in designing accessible websites. When I first got into accessibility, I found that this was really easy to test: I just fired up my browser of choice and hit Tab a lot. I had to get through the browser’s address bar and search box and stuff, but eventually I’d land on something in the page — the first link or form field — and from there I could keep hitting Tab to get to more links and form fields.

Things changed. Tiger came out. I switched to Firefox full time. (I still prefer Camino for simple browsing, actually, but I can’t live without all the web developer extensions.) And one day I noticed that I couldn’t tab within the page anymore. All I could get to were the browser controls.

Fast forward a couple years. I’ve finally found out how to restore my keyboard navigation. It’s more complicated than I expected — and as I expected, it turned out to be a combination of OS X prefs and Firefox settings. The key is in this article on tabbing problems in Firefox (which, to my amusement, includes notes on setting this in Camino as well).

First, you have to switch the setting in OS X’s Keyboard & Mouse preferences, as shown. Then you have to type about:config in Firefox’s address bar, promise it you won’t break anything, and look for accessibility.tabfocus in the long list of settings. It wasn’t there on my machine, so I had to right-click in the list, choose New → String, and enter accessibility.tabfocus for the string, with 7 for the value. (Here are the other values you might enter for accessibility.tabfocus.) Voila: tabs work like they used to.

I have no idea why the less accessible settings are the defaults in both OS X and Firefox, but at least I know how to fix them now.