If you tab through this page, you will notice that the focus indicator is modified. Creative custom developed this universal focus indicator that is compliant with any possible color scheme. It utilizes 1px white and 1px black outer strokes along with 1px white and 1px black inner strokes to comprise a 4px ring. There are instances where the black strokes stand out against the background and instances with the white strokes stand out. Using both black and white make it truly universal in any situation. We also added a red glow animation that helps to catch attention as focus moves throughout the page but is not necessarily part of the success criteria.

Our focus indicator is based on WCAG 2.0, Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are. More can be found on Understanding SC 2.4.7.

Examples of Success Criterion 2.4.7

• When text fields receive focus, a vertical bar is displayed in the field, indicating that the user can insert text, OR all of the text is highlighted, indicating that the user can type over the text.
• When a user interface control receives focus, a visible border is displayed around it.