Anchor tag has :focus style applied on click

Question

I am new to web accessibility.

I applied the style for a:focus as

a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -1px;
}

Its working fine when I press Tab to go through anchor tag in the webpage, the problem is when I click anchor tag, this focus style also applied but I don't want.

Is there any way to solve it?

Answer 1

What I have done in the past for accessibility was when tab is pressed to apply a css class to the body with javascript like .keyboard-active and to have the focus style only apply if that class is active.

.keyboard-active a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -1px;
}

and then when the user clicks the body with the mouse, have javascript remove that .keyboard-active class (so that non-keyboard users do not see that focus class any longer).

Works for me and also was accepted as a correct ADA solution.

If you happen to be using sass (only mentioning because many SO users confuse the two) then you can nest all of those ada styles inside like so:

.keyboard-active {
    /* styles */
    a {
        /* styles */
        &:focus {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -1px;
        }
    }
}