So, we often get this request: “Can we remove the ugly blue border?”
You have probably seen this when clicking into a text field, on a button, a link, or any other interactive element on a website. A border appears around whatever you have just interacted with. It’s not always a blue line; depending on the browser that you are using, it may be a fuzzy grey line or a black dotted line.
So what is this and why is it there?
That border is known as the focus ring. It’s put there by the browser to tell you which element on the page is currently ‘focused’. When an element is ‘focused’ it means that it is currently active or is selected and ready to be active—and it can be pretty helpful. For example, when you are filling out an online form, the focus ring tells you which which field is currently selected. As you move through the form the focus ring follows. It acts as a good visual indicator of where you are up to.
The purpose of the focus ring is to help people navigate your website if they are using a keyboard instead of a mouse.
Now, this may not be a large percentage of your website’s traffic but there are a number of reasons why someone could be using a keyboard to navigate the site:
- They have a permanent disability where they do not have the fine motor control needed to operate a mouse.
- They have a temporary disability—such as a broken arm, for example.
- They have a situational disability—like a parent holding a newborn in one arm. (Or someone who has an Apple Magic Mouse and it’s on charge!)
But it isn’t there simply to help people with disabilities. Our earlier example of moving through a web form is a good example of how something that was designed to help people with disabilities can also make the experience better for everyone.
Is it really that important?
As web designers and developers, it’s important to us that we are able to make your website as functional and usable as possible. The more people that are able to use your site and use it easily, regardless of their predispositions, the more successful it will be.
It’s also important to note that depending on where your website is being viewed, you may have to ensure it meets certain levels of accessibility—or you could be putting yourself or your business at risk of litigation. In the USA if your website is deemed to be inaccessible or discriminates against people with disabilities then you can be sued.
There are a many things that go into making a website accessible—and having the focus ring visible so keyboard users can navigate your site is just one of them.
But, fortunately most of these things are not hard to do and if you are starting with a well-built theme, you will get a lot of these out of the box.
To help merchants on their platform meet these requirements, Shopify has created a mandate to ensure that all themes sold on the Shopify theme store are WCAG 2.0 (Web Content Accessibility Guideline) compliant by 2021.
But it’s still ugly!
We get it. As designers, we understand that the focus ring can detract from that beautiful new website you just had built. So, instead of removing it and actively breaking your website for a portion of your customers, what can we do?
Well, there are a couple of options:
- Embrace it: Brutalism is a really popular design trend right now so lean into it.
- Style it: You should already have a hover state for a lot of the same elements. The focus state is the hover state for keyboard users. Unless your hover state is very subtle and there is not enough contrast between it and the default state then there is no reason not to use it for the focus state as well.
- Remove it just for mouse users: We don’t really recommend this as it is not 100% reliable. Because of the way it needs to be written it can sometimes cause issues with some combinations of browsers and screen readers (a screen reader is another way of navigating your website used by people with visual impairments or disabilities).