Tabindex, outlines only with tab button

Question

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?

@goltornate do you want when click on tab(in keyboard) outline stays only when click with mouse outline removed??? — לבני מלכה, May 22 '18 at 10:55
I found the following answer helpful in approaching the `outline` issue between mouse and keyboard (the caveat being it's a JavaScript solution, but you did say `'maybe' in css` :) ): https://stackoverflow.com/a/46249645/638153 — Keith DC, Jan 11 '19 at 05:43

score 5 · Answer 1 · answered Jun 05 '18 at 20:27

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

Browser support for `:focus-visible` is fairly decent now, with IE 11 and Safari being the major hold-outs. — Thomas Higginbotham, Jan 29 '21 at 16:03

לבני מלכה · Answer 2 · 2018-05-22T12:53:13.407

0

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;
}

edited May 22 '18 at 12:53

answered May 22 '18 at 11:00

לבני מלכה

15,925
2
23
47

this method removes outline until reload – goltornate May 22 '18 at 12:28
NOW you can see my edit.. set outlineColor as you want – לבני מלכה May 22 '18 at 12:53
I suggust do not use `outline:none` set color to outline – לבני מלכה May 22 '18 at 12:59
doesn't work for me. if i tab to the buttons, i see the focus outline. that's good. when i click on the buttons with a mouse, the outline disappears. that's also good. however, if i now tab to the buttons again, the outline is gone. that's bad. – slugolicious May 22 '18 at 13:53
@slugolicious see now – לבני מלכה May 23 '18 at 04:51
now clicking on the buttons with a mouse doesn't remove the outline (on firefox on a pc) – slugolicious May 24 '18 at 17:59

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

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

edited Jun 20 '20 at 09:12

Community

1
1

answered May 22 '18 at 18:45

Adam

17,838
32
54

as long as the ":focus" styling works, you should be ok with wcag 2.4.7. mouse focus isn't required under wcag. i think the OP was only trying to remove mouse focus and leave keyboard focus alone. with voice recog (eg, dragon), the ":focus" should still work. – slugolicious May 22 '18 at 19:19

Tabindex, outlines only with tab button

3 Answers3

This is a no go.