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.
Using a keyboard to navigate within webpages You can use the keyboard to select web content and copy it to the clipboard. You can press F7 at any time to turn this feature on or off. When you press F7, Firefox will ask if you really want to turn on this feature.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With