Making Your HubSpot Website WCAG 2.1 Compliant

2.4.7 Focus Visible

MCS Accessibility Team

MCS Accessibility Team
Last Updated November 09, 2019

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. All suggestions in this guide are in conjunction with the accessiBe solution and require an active license. For more information on the accessiBe platform and pricing, you can learn more here.

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 completely resolved with accessiBe or HubSpot.

Understanding

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! 

How accessiBe Helps

The built-in keyboard navigation accessibility built into accessiBe will create boxes and colors on focused areas if you haven't built them into the CSS! accessiBe has many options to change focus/colors/contrasts etc. accessiBe will make you ADA Compliant with their service. 

  

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