Firefox Tabbing Problems on List Boxes
My favorite web browser by far is Firefox for many reasons. It is one of the most standards compatible browser in existence, it has very useful add-ons (i.e. Firebug), and it is almost completely customizable. However, I found one flaw this week that was absolute driving me insane. Whenever I encountered a web form I could tab over every text field but not drop down lists or list boxes (normally used in contact forms asking for state or country you live in). Firefox would skip right over these form elements as if they never existed on the page!
Was this a regular Mac thing? I tested the same pages using Safari and Camino and tabbing was not an issue. I also tested Firefox on a Windows machine and noticed the problem did not exist there either. It was only happening on Firefox installed on Macs. I was determined to find out what was going on.
I asked my co-workers (also web designers) if they were aware of this problem and they were shocked that they never noticed this little flaw. They had no solutions so I looked online but was unable to find anyone else complaining about this issue. I emailed Mozilla yesterday to get some answers but got nothing. I did not give up.
Fortunately, I finally found a solution to this problem. Actually, I found 2 different solutions. I “googled” all sorts of combination of words until I discovered Robert’s Talk web blog. I was so happy there was someone else determined to find a solution to this horrible flaw in Firefox.
Robert mentions you can change the keyboard system settings on your Mac so Firefox is able to recognize all form elements by turning on Full keyboard access.
I tried this and it worked perfectly. I was able to use forms as they should using Firefox. I then read the comments left for Robert and noticed that someone else left another solution that I tried and it worked great.
Instead of changing the system settings you can change the Firefox settings. Kanashii says you can change the configuration files in Firefox by changing the accessibility.tabfocus values to a 3 or a 7. I was so happy to read this but did not know what he meant. I thought it would be easy to find the accessibility.tabfocus on Firefox but again I was stumped. After some research I figured it out and thought I should do the world a favor by offering a tutorial.
Open Firefox and type the following in the address bar:
about:config
Right-click (ctrl-click) anywhere in the page and select new integer. You will get a dialog box asking for the preference name. Enter accessibility.focus.
The next dialog box asks for the integer value. Enter 7.
Press OK and you are done. Every form element on a page will be made available. Kanashii further explains what the integer values do:
1 - Neither checkboxes checked.
3 - Top checked: Only text fields and form controls
5 - Bottom checked: Only text fields and links and linked images
7 - Both checked: Text fields, form controls and links
I hope this tutorial helps someone else. I know it has definitely helped me. Firefox FTW!!
February 20th, 2009 at 6:51 am
What about simply setting the tab index in your html. In other words giving the links especially in a drop down a tab index number. From my experience this works and doesn’t require you to mess with any settings on your computer. This is great for accessibility to, and has worked for me on all browsers, including firefox.