Making Your HubSpot Website WCAG 2.1 Compliant

2.2.2 Pause, Stop, Hide

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

2.2.2 Pause, Stop, Hide

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
Principle: Operable
User interface components and navigation must be operable.
Guideline: Enough Time
Provide users enough time to read and use content.

For moving, blinking, scrolling, or auto-updating information, all of the following are true:

  • Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
  • Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.

Note 1: For requirements related to flickering or flashing content, refer to Guideline 2.3.

Note 2: Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion. See Conformance Requirement 5: Non-Interference.

Note 3: Content that is updated periodically by software or that is streamed to the user agent is not required to preserve or present information that is generated or received between the initiation of the pause and resuming presentation, as this may not be technically possible, and in many situations could be misleading to do so.

Note 4: An animation that occurs as part of a preload phase or similar situation can be considered essential if interaction cannot occur during that phase for all users and if not indicating progress could confuse users or cause them to think that content was frozen or broken.

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 2.2.2 Pause, Stop, Hide

We want to give users the option to pause, stop or hide any content that shows motion. Examples include, moving pictures, animations, stock tickers, scrolling news updates, and sliders. 

Content that moves or updates automatically can cause issues for people who have trouble reading stationery text quickly as well as people who have trouble tracking moving objects. 

To certain groups of users, this content can be distracting specifically to people with attention deficit disorders or individuals that find blinking content breaks their concentration.

How AudioEye Helps

With the Visual Toolkit's Disable Animations, AudioEye provides a solution for stopping animations and hiding images within their widget. However it doesn't stop all types of elements in motion. For example, it will not work for any animation that use JavaScript to update styles inline (old jquery-style). It is ideally suited to work for CSS animations.Screenshot of AudioEye Visual Toolbar with disable animations selected

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 pause, stop, hide accessibility issues. When designing your site, try to be mindful to provide controls for all animated features and content.

For more information, please visit the official W3C article: Understanding 2.2.2 Pause, Stop, Hide


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