20% Off My Easy-Peasy Proposal with the Coupon Code 20OFF (Now - April 30th)

Accessibility Weekly

Focus Outlines



Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Week 13

Have you ever visited a website and tried to use only your tab key to move around?

If not, take a break from reading this and go try it right now on your own website.

Not every user who can see uses a mouse. For people with limited mobility or perhaps no use of their arms at all, a mouse can be challenging or impossible to use. These users may use only a keyboard or assistive technology such as eye tracking or voice control to navigate the web.

If you’ve tried to use a website without a mouse, you’ll quickly learn that one feature can have a significant impact on how usable that website is: a focus indicator or outline.

What is a focus outline?

A focus outline is a CSS style that is added to an element on a web page when it has received focus. By default, the browser put an outline around the element to show that it has received focus.

This outline around the Equalize Digital logo is not a mistake – it’s how a keyboard-only user knows that they are currently focused on the logo link to the home page of the website.

Equalize Digital website header with a visible outline around the logo.

In the CSS for a quality WordPress theme, you’ll typically see the focus style set like this:

:focus {
Outline: 2px solid;

Sometimes the focus outline will have a color on it, but adding a color is not necessary as browsers have a default color defined.

Never Remove a Focus Outline

Though your client may request it, don’t be tempted to remove the outline on your focus styles.

:focus {outline: none;} will cause major accessibility problems and is a Web Content Accessibility Guideline failure of success criterion 2.4.7, Focus Visible (Level AA).

If you remove the focus outline, it makes it impossible to tell where you are on the page as you hit the tab button to move through focusable elements. Paul Adams has a great side-by-side comparison of good and bad focus states. If you didn’t encounter a missing focus outline on your own website, visit the comparison to see the difference.

Good Focus State Styles

Focus outlines don’t have to be boring – they just need to be useable. Here are some recommendations for styling focus outlines:

  • Keep a full outline around the element, and make it at least 2px so that it’s thick enough to see.
  • Add a 2px outline-offset to help make it more visible than if it directly touches the element being outlined.
  • WCAG 1.4.11: Non-text contrast require focus indicators to follow the same contrast rules as other parts of the content. There should be a minimum contrast of 3:1 between the outline and the background (this might mean light and dark styles for various parts of the website as the background color changes).
  • Most focus outlines are solid, but dotted outlines are okay.
  • If you want to add a CSS transition to your outlines as they come in, that might be fine, but be cautious that you’re not excessively delaying your user from moving at the speed they want to move through your website.

What if a theme is missing focus states?

If you find that a website you’re working on is missing a focus outline as you tab through the page, this is a relatively easy fix.

First, search through the theme to see if you can find any instances of :focus {outline: none;} in the stylesheet. If you can, you can remove it and allow the browser’s default focus indicator to take over.

If you can’t find where the outline is being removed, you’ll want to add it back in. You can add in a basic focus indicator with this CSS:

:focus {
outline: 2px solid blue;
outline-offset: 2px;

You may need to add an !important to it to force it to override the styles that are removing it if you can’t delete them for one reason or another.

If you add an offset to your focus outline like this, make sure it’s not cut off on any elements. You may need to remove overflow: hidden; from parent elements so that your offset outline is fully visible.

Join the Conversation!

There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!

Group Thread

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since. 

Brought to you by:

Make your WordPress website accessible and ensure all people have equal access to your products or services, regardless of ability. Reach more customers, reduce liability, and increase conversions.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

More from Accessibility Weekly

Week 51

How Accessible is “Accessible Enough”

In an ideal world where clients have unlimited budgets and everything is custom, every website would …

Week 50

How to Sell Accessibility in New Builds

Creating websites that prioritize accessibility is no longer just a best practice—it’s a business must, especially …

Week 49

Accessibility in Web Development Contracts

Whether you’re running an agency or freelancing, having a clear contract for your web development and …