I added the following CSS code to get rid of the outline that was appearing after click on a link HTML element.
CSS Code:
.window-leveling-btn:focus {
outline: 0;
}
Afterwards I get the following csslint error message. I don't understand why I shouldn't be doing this or how I should do it correctly.
Error Msg: WARNING: Outlines shouldn't be hidden unless other visual changes are made. Use of outline: none or outline: 0 should be limited to :focus rules. (outline-none)
According to the CSSLint page for outline-none:
The focus outline is important for accessibility because it gives a visual indication as to where the focus is on the page. For keyboard-only users, tracking the focus on a web page is impossible without the visual indication given by the focus outline.
Basically, the CSSLint team believes you shouldn't be doing that because it makes it harder for users to navigate the page.
As for suppressing the error, it would depend on the application you're coding in (command line, or a text editor). According to this CSSLint GitHub issue you can turn off the linting for a rule in a comment, which should cover most cases.
Since the user can switch between buttons by pressing the tab key, there must be some visual clue which button has the focus. So that's what the warning is about.
Solutions: change something else, like the background color for focused buttons or something. Or, keep the focus outline, but use JavaScript to remove the focus when it's no longer needed, so that the focus outline goes away.
By the way, the warning is dual purpose: you get it when either the first rule (about the other visual changes), or the second rule (about :focus) is being violated. So you didn't violate the second, only the first.
