Skip to content
Tab key skips all my buttons in Safari but works in Chrome, is it a focus-visible problem?
question1 min read140 viewsSep 1, 2026

Tab key skips all my buttons in Safari but works in Chrome, is it a focus-visible problem?

Mariana Costa@mari_costa

September 1, 2026 · 1 min read

#1 in CSS Is My Passion

140 views3 comments

I have a doubt that is making me crazy. In our checkout, when I navigate with the keyboard in Chrome and Firefox everything works: Tab goes to inputs, buttons and links, and the focus ring appears. In Safari on Mac, Tab jumps only between the text inputs. The buttons and links are completely skipped, like they don't exist.

I thought it was my CSS, we have this:

button:focus { outline: none; }
button:focus-visible { outline: 2px solid #1a56db; outline-offset: 2px; }

I removed both rules and the problem continues, so I don't think is the outline. The buttons are real button elements, no tabindex anywhere. Safari 17. Is this a bug in Safari or something in our markup? Our accessibility audit is next week, help 🙏

Accepted answer

Siobhan O'Rourke#2 in CSS Is My Passion2 likes

It's not your code. macOS Safari by default only tabs between text fields. Go to Safari Settings > Advanced and tick "Press Tab to highlight each item on a webpage". Or hold Option while you press Tab, that moves through everything without changing the setting. Every new tester we onboard on a Mac gets caught by this one, its in our setup checklist now. Your focus-visible rules look grand by the way.

View in the thread

#css#accessibility#safari

Written by

Mariana Costa

Product designer in São Paulo, working on e-commerce checkout. I like design systems, accessibility and talk with real users. Figma all day, but I still write some CSS when nobody is watching.

View profile

Get the best of #css-is-my-passion weekly

One email each Monday with the most useful posts. No spam; unsubscribe in one click.

Comments

3

Sign in to join the conversation.

Sign in to comment

Accepted answer

Siobhan O'Rourke@siobhan_tests#2 in CSS Is My Passion
It's not your code. macOS Safari by default only tabs between text fields. Go to Safari Settings > Advanced and tick "Press Tab to highlight each item on a webpage". Or hold Option while you press Tab, that moves through everything without changing the setting. Every new tester we onboard on a Mac gets caught by this one, its in our setup checklist now. Your focus-visible rules look grand by the way.
2 net votes
Mariana Costa@mari_costa#1 in CSS Is My Passion
Oh my god. 3 hours of my life. Thank you Siobhan, it works perfectly now. Adding to our checklist too
1 net votes
Tunde Adebayo@tunde_ade#4 in CSS Is My Passion
safari doing safari things. the new IE, i keep telling una
1 net votes