You don't want to ruin the look of your website or webshop by some random ugly borders. These borders are called outlines and happen to aid some users as if you are walking in the dark with no lights. So, don't just remove them!
This article is part of the Dutch week of digital Accessibility, which I am participating in.
Way too many articles are written about CSS outlines already. It is the easiest to do right and the fastest to do wrong.
Outlines, doing accessibility right
Remove all CSS outline property declarations from your stylesheets and browsers will fall back on the browser's default outline. A CSS outline is also known as focus ring or focus indicator. By showing a ring around any element that received focus, bad-sighted or motor impaired persons better understands where they are on a page.
Browser fallback
Browsers will always show a focus ring by default. Browsers generally will apply different styling. Chrome recently introduced a new outline to solve issues with default blue focus rings being hardly visible on blue backgrounds.
The new focus indicator uses a thick dark ring with a thin white outline, which should improve visibility on both light and dark backgrounds. This is an easy accessibility win
Chromium Blog
This way, users will always know which button, link or form fields holds focus at that very moment, regardless of the background color. This comes in handy within dark-coloured websites or elements, such as footers which often have a dark background color.
Removing outlines as it does not look pretty
This is the doing it wrong version. When doing this, you are removing any indication as to where users are located within a webpage. No outlines is basically the same is not having a mouse indicator: you can still click around, but just hope for the best that you clicked the right link.
Reasons for deleting the CSS outline
Let's assume making websites inaccessible isn't one of the reasons to remove the outline. This could be two main reasons do:
- Remainings of boilerplate or framework code. Reset.css might be the best know. Although the author of reset.css did advice to take care of the outline yourself, it is very easy to overlook this accessibility aspect when not being aware of its purpose.
- An outline is not matching the style guide or is considered ugly.
But then that’s the case with street lights, too. [...] but [...] you are glad they help you see where you are
Hidde de Vries
So, if you unintentionally removed the CSS outline within your own websites: start reverting this right away.
Browser vendors interfered
Most browsers already changed behaviour to cater for UX wishes: Chromium (including Edge) will only show the outline when an element would receive focus using a keyboard. When using a mouse, the outline style declaration won't be applied or visible. FireFox for example is even displaying the outline when a mouse cursor is being used.
Good to know:
- The above even applies if you custom styled the outline property;
- This includes screenreader users on top of keyboard users, as such assistive technology is being used on top of common browsers.
As Chromium is by far the most used browser on desktop, users using a mouse might never see an outline at all. This way, there are no more designer or aesthetic to remove CSS outlines.
Outlines, style it yourself
I can relate to aesthetic complaints nevertheless. You can't change border-radius of outlines for example. Only color, width, offset and style. No way to make them match your custom styled buttons.
Most web designers don't fancy the look of a squared outlined around rounded buttons.
Bootstrap's box-shadow solution
The lack of styling possibilities is why Bootstrap introduced custom created indicators for focussed elements. Bootstrap uses box-shadow with a color, matching its button. These often have a softer color by applying a bit of transparancy to it. The CSS rgba method is being used to achieve this.
This solution has one main similarity with the outline property: As box-shadow isn't part of the document flow, it won't push any content away and possibly force elements to jump around, unlike the border property.
Bootstrap has an eye for accessibility
Let's face it: Bootstrap really has accessibility baked in when it comes to JavaScript components. ARIA attributes are used in a proper way and I use their sr-only class on regular basis.
And Bootstrap's equivalent of a focus ring just is very convenient being baked in, and couldn't be more fancy or subtle. But these ingrediënts are the exact problem at the same time. It is easy to make mistakes while taking over some else's code and just leave things as they are. I'll be talking about this in tomorrow's blog post.
