CSS :focus pseudo-classes are an important visual aid to accessibility that shouldn’t be overlooked. However there’s been a number of times when I’ve seen requests to remove styles like outlines on focusable elements because it’s not in keeping with a design.
Generally this is a bad idea. I’ve also seen compromises suggested that result in very subtle focus styles. Unfortunately these aren’t to be recommended either.
Focus indicators by their very nature are designed to assist people with low vision, or where keyboard use is in operation without a mouse cursor. Without a clear defined visual aid sporting good contrast from it’s background they aren’t much help to anyone.
Check out the example below and try using your keyboard to navigate the links. You’ll quickly see that it’s impossible to know where you are on the page.
However there are other options to help meet accessibility needs and satisfy design demands simultaneously.
In the example below there are 3 approaches using different CSS pseudo-classes :focus, :focus-visible and :focus-within.
Using :focus we can offer styling for both keyboard and mouse focus. :focus-visible allows for keyboard focus only. Finally :focus-within lets us apply a focus style to the elements parent.
So whilst we could use :focus-within to effectively solve most requests I see for dealing with removing outlines on click, we could also be more thoughtful with our focus styling. Which might all in all be a better approach.
Lets consider the following setup, with some links styled with colour and the underlines removed by default. A fairly common situation.
For the on click focus events I have removed all the outlines and replaced them with a white colour and an underline.
However to aid keyboard users on focus I have added a red colour to create greater contrast.
For the :focus-within selector I’ve used some subtle background highlight to reinforce where attention should be placed, but not detract from the main link.
Whilst this is just a quick example I hope it illustrates how we could better approach design and accessibility conundrums like these in the future.