29

I'm trying to use the tabindex text input attribute to allow users to tab between fields on this page: https://seatgeek.com/login/. This works perfectly in all browsers (even in IE!) except for Firefox. I'm using Firefox 3.6.10.

lulalala
  • 17,572
  • 15
  • 110
  • 169
Jack7890
  • 1,311
  • 4
  • 19
  • 27
  • Hmmm, thanks for the datapoint re:OS. I'm on Windows 7. Can't you tell where the focus is by where the cursor is? – Jack7890 Oct 02 '10 at 17:57
  • This works for me, with no problems. Also 3.6.10, also Windows 7. – rhino Oct 02 '10 at 18:00
  • 2
    I'm just happy that there's at least one developer out there who cares about people who like to use the keyboard. Most of today's programmers seem to think the mouse is the only interface to a computer. – Tergiver Oct 02 '10 at 18:18
  • Okay, sounds like it might be something idiosyncratic to my particular Firefox installation. Thanks for the datapoints guys. – Jack7890 Oct 02 '10 at 18:38
  • 1
    @Tergiver : I beg to differ. This site doesn't care at all about people who _must_ use the keyboard! Most importantly `outline: none;` but also dozens of rules where only :hover is defined and not the equivalent :focus and same thing with `onmouseover` events and no `onfocus` – FelipeAls Oct 03 '10 at 05:42
  • @Felipe: I'm not sure what you differ with. My comment was made simply to express happiness in a developer who is taking the time to make sure the keyboard device works correctly in his application. – Tergiver Oct 04 '10 at 12:45
  • 1
    @Tergiver : It doesn't work correctly except for the two main form elements that will be focused with the two first press of the Tab key (sorry for my english). Then the rest of the tabulation is as inaccessible as possible and (for me) isn't really ergonomical. – FelipeAls Oct 18 '10 at 17:45
  • Possible duplicate of [How to allow keyboard focus of links in Firefox?](http://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox) – arkhi May 02 '16 at 11:25
  • Latest version of Firefox v72 affecting tabindex in Mac, but changing the OS preferences fixed the issue. Still curious how to manipulating in JS.Thanks – Regina Sanchez Feb 06 '20 at 15:51

3 Answers3

71

Something similar here and I found this to solve it on Firefox/Mac

The solution lies not in Firefox, but in the Mac OS X preferences.

Apple Menu > System Preferences > Keyboard and Mouse > Keyboard Shortcuts

and under "Full Keyboard Access" choose "All controls".

For newer macOS versions:

Apple > System Preferences > Keyboard > Shortcuts > Accessibility > All Controls (at the bottom of the pane)

For even newer macOS versions:

Apple > System Preferences > Keyboard > Shortcuts > "Use keyboard navigation to move focus between controls" (at the bottom of the pane)

You may have to restart Firefox afterwards

dartanian300
  • 247
  • 2
  • 16
Ahmad Ajmi
  • 7,007
  • 3
  • 32
  • 52
  • 4
    Searched forever to find out why my site wasn't keyboard accessible via firefox. And here I thought I was the idiot. Thanks a lot worked like a gem. – bilcker Jan 22 '15 at 16:33
  • 1
    I took the liberty of adding the relevant part of the page (i.e. the solution) to this answer, in case of link rot. Now if we could only get @Jack7890 to return here and accept this... – Mr Lister May 31 '15 at 07:20
  • 1
    Assuming the OP is on a Mac, this solution is great. – Big McLargeHuge Sep 09 '16 at 21:28
  • 3
    FYI, the current path in more recent versions of OS X is _Apple_ > _System Preferences_ > _Keyboard_ > _Shortcuts_ > _Accessibility_ > _All Controls_ (at the bottom of the pane) – John Hascall Nov 27 '16 at 11:54
  • Bonus tip: If the "All controls" option for "Full Keyboard Access" is not enabled, you can get macOS to tab through all controls by pressing Opt+Tab. – Jon Schneider Mar 18 '19 at 20:29
  • Strange firefox behaviour. In Chrome it works without any laptop settings changes :/ – Experimenter Mar 08 '21 at 21:29
  • @dartanian300 Any insight on even newer newer macOS versions? I'm struggling to get this working with Ventura after doing a fresh install. – jbwharris Mar 07 '23 at 16:19
1

Because of the length of this, I decided to post it as an 'answer' rather than 'comment.' It's a bit on the edge of the definitions of both, though.

It works for me, using Firefox 3.6.10 on Ubuntu 10.04. Having said that, it appears that there's no :focus style applied (or, more likely, they've done the usual outline: none; to remove the :focus indication), which makes it annoying.

Is your status bar displayed? If not, there's no way you'd able to know where the focus is. Just in case:

View -> ✓ Status Bar

Failing that, I'm not sure why it wouldn't be working for you.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • 1
    Hmmm, thanks for the datapoint re:OS. I'm on Windows 7. Can't you tell where the focus is by where the cursor is? – Jack7890 Oct 02 '10 at 17:59
1

Hi this may not be a perfect answer but, it's a workaround

The latest mozilla firefox (81.0.1) You can actually navigate to it using tab, but if any text is there it won't read it. so what you can do is label/span the text and use aria-labbeledby with the id, it will read similar to the examplae below.

<div tabindex="0" aria-labelledby="xyz123">
 <label id="xyz123">
  There were errors processing the question
 </label>
</div>
Ashhar Baig
  • 11
  • 2