Last week I came across Removing that ugly :focus ring (and keeping it too). It’s a really good post about
outline, that CSS property lots of devs tend to hide. The post explains some a11y-friendly alternatives to not display it, and show it when needed.
In the past I have made the same mistake of hiding the
outline altogether, but no more!
A few months ago I came across a similar technique David Gilbertson describes, while inspecting the markup on Youtube.com. They take accessibility seriously and their player is a very good example to get inspiration from.
I then applied it to one of the Spotify sites I work on. Take this Spotify page as an example. This is how it works:
- Add a
no-focus-outlineCSS class to the
- Hide the outline using CSS only in
<button>elements that descend from that class.
- When tabbing, remove the CSS class.
The complete code:
And a video showing what it looks like when tabbing:
Some additional a11y improvements are that I apply the same effect on hover and on focus, like when going through the “More by …” albums section. Last, but not least, the track row acts as a button to start the playback.
These are some small touches that very few people will realise, but are not difficult to implement and can have a very positive impact for some users.