Tab focus not working in Safari?

While doing some cross-browser testing in Safari, I noted that tab was not working as expected. I was looking at a focus-managed component, so my first thought was that I had done something in my JavaScript that did not work in Safari.

After trying to debug the issue for a few minutes, I finally noticed that tab wasn’t working anywhere, not just my component. This was both a relief (it wasn’t me!) and a mystery. How could tab not work?

A quick Google search for “Safari tab order” lead me to this StackOverflow question and answer: Safari ignoring tabindex.

As it turns out, Safari does not enable tab highlighting by default. To turn it on:

  1. Go to “Preferences”
  2. Select the “Advanced” tab
  3. Check “Press Tab to highlight each item on a webpage”

With that setting enabled, tab worked as I expected. Thanks graphicdivine!

While you’re fiddling with settings, the A11y Project has a guide for enabling browser keyboard navigation on macOS that is worth checking out.

Setting you computer up for accessibility testing makes it that much easier to ensure that you’re building a product that will work for everyone.

Happy tabbing!

About

Sean McPherson

My name is Sean McPherson (SeanMcP), and I am a software engineer and educator in Pittsburgh, PA. I have given conference talks, lead workshops, and organized meetups. Here I write articles about programming for developers of all levels.