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.
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:
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.
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.
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: