CODEWITHSUNDEEP
cssfocusaccessibilitytabindexoutline
Yala Yala Herzlin
Yala Yala Herzlin

Reputation: 622

Should non-clickable elements that have tabindex="0" have :focus blue outline removed?

We have a project where the user needs to navigate trough the UI using the tab key.

To ensure sequential navigation we added tabindex="0" to these divs, which now can be navigated sequentially using tab key. that´s good.

But, we my question is if these divs, which are not clickable, should have the outline or not?

I know how to remove it , the question is if this the appropiate thing to do from an accesibility perspective?

thanks for your help

Upvotes: 0

Views: 1442

Answers (1)

brennanyoung
brennanyoung

Reputation: 6514

If they're not clickable (or in a11y jargon 'operable'), they shouldn't really have tabindex=0. (There are some rare exceptions to this).

If by 'navigate' you mean 'browse with a screenreader' you're probably doing it wrong. Just use semantic HTML and let the screenreader take care of the navigation.

The question of whether the focus indicator is visible is secondary to that, but if it's not operable, it probably shouldn't have a focus indicator.

Upvotes: 4

Related Questions