Hi All,
I need to remove the focus outline that appears once an anchor link has been clicked. I know the benefits that they provide to visually impaired users, but my client is not interested in them. How do I remove them. For example, when the “SEE MORE” link is clicked a blue outline (similar to a “border”) quickly appears & disappears… Here’s the url.
Here’s the code I tried to remove the outline:
`a {
outline: 0;
}`
Thanks in advance.
You’d need to address a:focus{outline:0}
I always make a point of telling my clients that I’m the one who knows how the web works not them. 
Removing focus is the single worst thing you can do to a website. It’s not just the visually impaired who need it, it’s keyboard users and similar devices.
It’s your job as a developer to educate the client and rather than remove this most important of accessibility aids you need to come up with a solution that satisfies both of you. You can change the styling of the focus element to match the design or perhaps make it more subtle.
If you are set on removing the outline, then please give some other sort of visual indicator that it’s focused on.
What I like doing is to match the focus state with the hover state. E.g.
a {
color: red;
}
a:hover,
a:focus {
color: blue;
text-decoration: underline;
}
I see your point, and I am actually targeting styling at the moment. Still not going well though. Thanks.
Thanks, much appreciated. I tried it out, didn’t work for me, but I’ll keep playing around with it. Thanks again.
Thanks for your help on this one. JamesWilson on a different platform suggested this code with psuedo-class below, which actually worked for me. I do intend to recommend that the client keep the focus features and explain its usefulness, but it is not my site and will not be my call. Thanks again everyone for your help.
/**
* The default focus style is likely provided by Bootstrap or the browser
* but here we override everything else with a visually appealing cross-
* browser solution that works well on all focusable page elements
* including buttons, links, inputs, textareas, and selects.
*/
*:focus {
outline: 0 !important;
box-shadow:
0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
0 0 0 .35rem #069 !important; /* faux focus ring color */
}
/**
* Undo the above focused button styles when the element received focus
* via mouse click or touch, but not keyboard navigation.
*/
*:focus:not(:focus-visible) {
outline: 0 !important;
box-shadow: none !important;
}
As long as there is some sort of indication that yes its focused you should be fine. As far as its not your site… well yes it is, you have attached your name to this project. And I’ll give you the answer I gave to others who didn’t want a focus indicator / ring… “So your okay with a lawsuit then?”… guess who still has focus rings…
Good point. It should be inclusive. Do you have any link to any legal issues involving the absence of focus features? Could be useful. Thanks for your help.
Cool, much appreciated. “Legal” is a language everyone speaks. Great info. Thanks!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.