Making Your HubSpot Website WCAG 2.1 Compliant

3.2.1 On Focus

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.

LEVELA
Success Criteria

3.2.1 On Focus

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
Principle: Understandable
Information and the operation of user interface must be understandable.
Guideline: Predictable
Make Web pages appear and operate in predictable ways.

When any component receives focus, it does not initiate a change of context.

View Official WCAG 2.1 Compliance Techniques

  • This criteria is partially resolved and/or detected with AudioEye Managed but may require some manual intervention and/or collaboration with AudioEye.

Understanding 3.2.1 On Focus

Anything that receives focus should not change context. For example any component that is able to trigger an event such a submit button on a form or a link that opens a new tab or window. 

All functionality of a website should be predictable as users navigate around. 

  • Example: If someone is tabbing through a dropdown menu and lands on a menu item, it should not take them to that new page until it is activated by the enter key on the keyboard. At the same time if they escape out of the menu the context should not change when they get out of the menu.

How AudioEye Helps

AudioEye automatically applies the necessary fixes to warn users when links open a new window.

When content changes are triggered automatically when a component receives focus, AudioEye will alert Managed customers when 3.2.1 violations are detected and can take action with customer approval. However, for instances where Managed customers do have full control to remediate the source issue, AudioEye will collaborate with accessibility stakeholders to instruct them on what specific changes are required, why the changes are important, and how the changes can be implemented.

Recommended Solutions

Ensure that when focus is on an element to not trigger any changes of context unless it is activated by the user. Allow the user to control the activation via the return/enter key on their keyboard.

For more information, please visit the official W3C article: Understanding 3.2.1 On Focus


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