Why Won't Tabindex Work with Firefox?

Question

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.

Solution 1

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

Solution 2

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.

Solution 3

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> 

Comments

[Tergiver]

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.

[Jack7890]

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?

[bilcker]

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.

[Mr Lister]

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

[Big McLargeHuge]

Assuming the OP is on a Mac, this solution is great.

[John Hascall]

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)

[deniz]

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.

[Experimenter]

Strange firefox behaviour. In Chrome it works without any laptop settings changes :/