Making Your HubSpot Website WCAG 2.1 Compliant

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. In addition to explaining the WCAG Success Criteria and how to address them, this guide also describes how the AudioEye Managed solution may address each issue.

LEVELAA
Success Criteria

2.4.7 Focus Visible

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
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

  • This criteria is consistently resolved with AudioEye Managed.

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.

How AudioEye Helps

AudioEye offers several keyboard-centric features. From the Visual Toolkit, users may enable a Keyboard Focus utility, which forces an accessible style schema to ensure elements receiving focus are properly conveyed.

Screenshot of AudioEye Visual Toolbar with keyboard focus selected

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

The AudioEye Visual Toolkit can adjust the formatting of a website, but it is not intended as a replacement for making the necessary visual improvements that help ensure an optimal visual experience for individuals with disabilities. AudioEye collaborates with Managed customers to assist them in identifying and understanding keyboard accessibility issues. 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


Download the WCAG 2.1 Compliance Checklist

What to expect if you download this checklist

Video: What to Expect If You Download this Checklist

Checklist Download

Questions?

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

Recent Morey Creative Studios Blog Articles