CODEWITHSUNDEEP
csshyperlinkaccessibilitytabindex
goltornate
goltornate

Reputation: 103

Tabindex, outlines only with tab button

I'm trying to fix accessibility on my site and to manage the navigation with tab button, I'm using tabindex. I noticed that elements with tabindex have an outline, both on tab focus and on click. I would remove outlines on click (or drag) and leave it on tab focus.

Is there a solution (maybe in css) to resolve this problem?

Upvotes: 4

Views: 7564

Answers (3)

Steven Lambert
Steven Lambert

Reputation: 5891

At the moment there is no easy way to achieve this without JavaScript detecting differences between focus on keyboard and mouse. However, there is a new CSS pusedo-class called :focus-visible (previously called :focus-ring) that solves this problem. It allows you to style the focus indicator just for keyboard users while not having it apply to mouse users.

Currently it's not supported in any browser without turning on a feature flag, but there is a polyfill available that would allow you to use it.

Additional resource: A11ycast focus-ring

Upvotes: 5

Adam
Adam

Reputation: 18807

This is a no go.

When you click on an element using your mouse, you will move both the pointing device focus and the keyboard focus.

The WCAG requires that the keyboard focus indicator be always visible on any keyboard operable element (no matter how it has been moved). By setting the tabindex, you made it keyboard operable, so you must obey this rule, even if the element has been previously activated with the mouse, leading the keyboard focus to be moved there.

Also, many assistive technologies can focus an element without using the tab key (for instance, voice recoginition software, eye tracking devices, some screen readers).

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

this code will remove outline only when you click on button by mouse
use mousedown to remove outline and mouseup to back it

<button onmousedown="this.style.outlineColor='transparent'" onmouseup="this.style.outlineColor='blue'"  tabindex="1">try me</button><br>
<br>
<button onmousedown="this.style.outlineColor='transparent'" onmouseup="this.style.outlineColor='blue'"  tabindex="2">try me 2</button><br>

if you want on click Tab (in keyboard)

button:focus{
outline:none;
}

Upvotes: 0

Related Questions