I often see outline: 0; or outline: none; in CSS just because we don’t like the ring around actionable elements. Because it’s ugly sometimes and we don’t want to have it in our application / web site. I think this is mostly misunderstanding the mission of that ring. By removing this ring we solving one problem, but in the same time we creating another. I think the trade-off would be removing focus ring for the mouse users only, but not for keyboard navigation.
Let me provide here important cite from W3C about focus ring: Do not use any other method that hides the focus ring from keyboard users, in particular do not use a CSS rule to override the ‘outline’ property. Removal of the focus ring leads to serious accessibility issues for users who navigate and interact with interactive content using the keyboard.
.
If you must do it – do it in a right way. One way is to add simple event listener to the area where you want to manage focus ring and set styles for outline. I’ve prepared example of implementation in my lab. See the source code for more details how it’s implemented.
Leave a Reply