Website Accessibility Guide Home

2.4.7 Focus Visible

MCS Accessibility Team

MCS Accessibility Team
Last Updated July 23, 2020

The following directions are part of a full step-by-step guide to making a HubSpot website WCAG 2.1 AA compliant. These recommendations are intended for websites managed on the HubSpot CMS but can be adapted for other content management systems.

LEVELAA
Principle: Operable
User interface components and navigation must be operable.
Guideline: Navigable
Provide ways to help users navigate, find content, and determine where they are.

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

View Official WCAG 2.1 Compliance Techniques

Understanding 2.4.7 Focus Visible

Any element that has keyboard focus should be obvious. This helps users relying on keyboards and people with trouble focusing. The most common practices include a visual change to a targeted button, a caret in a textfield or a border around the area of focus.

Solutions

Browsers will automatically do this for you. Popular browsers like Chrome, Firefox and Safari will add a blue outline to text fields. As for the focus of links; the browsers act a bit differently. But if you would like to control the design, you can.   

Warnings

When designing your site, try to be mindful to test the user experience from the perspective of someone relying solely on the use of the keyboard to engage and interact with your site.

For more information, please visit the official W3C article: Understanding 2.4.7 Focus Visible

Next Article: 2.5.1 Pointer Gestures

Questions?

Let us know if we can help you address this specific WCAG Recommendation.