Create A Custom Focus Indicator

Every website needs to have a visual focus indicator that is easy to see, follow, and distinguish from other elements on the page. This tool allows you to design your own custom focus indicator in just a few seconds! Simply select the color you want your indicator to be, the width of your indicator, and what type of style your indicator should have. Once you have all three fields complete, select the Generate CSS button, and the CSS code needed to apply the focus indicator you’ve designed will be provided.

Once you have the CSS code, head over to your website code or builder, and paste it into the appropriate place. Once you save the changes, you should be able to tab through your pages and see the focus indicator in action!

Note: If you are using a builder like Square Space (except version 7,1), Wix, WordPress, or Duda, you will be looking for a space where additional CSS can be added. If you are writing your own HTML, you will want to add the CSS to your stylesheet.

This tool was created as a result of most website builders and themes disabling the focus indicator that the browser adds to any page by default. The default focus indicator typically appears as a dashed or dotted pink outline around interactive elements. If you tab through your website and do not get an indicator, chances are your website or theme has disabled it. Additionally, if you want to customize the way the indicator appears, this tool can also be used to achieve this.

Providing an indicator with sufficient contrast, that is always visible, is also an AA success criterion in WCAG  called 2.4.7 Focus Visible.