Making Your HubSpot Website WCAG 2.1 Compliant

2.5.4 Motion Actuation

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.

LEVELA
Principle: Operable
User interface components and navigation must be operable.
Guideline: Input Modalities
Make it easier for users to operate functionality through various inputs beyond keyboard.

Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:

  • Supported Interface: The motion is used to operate functionality through an accessibility supported interface;
  • Essential: The motion is essential for the function and doing so would invalidate the activity.

View Official WCAG 2.1 Compliance Techniques

Understanding 2.5.4 Motion Actuation

"...ensure that functions triggered by moving a device or by gesturing towards the device can also be operated by more conventional user interface components."

This criteria applies specifically to device-based actions (such as shaking or tilting a smartphone or tablet) to trigger actions that cannot also be triggered through conventional means. This is an uncommon use case. If you're just using standard HTML elements, you'll resolve this criteria and be compliant by default. No manual intervention will be required, and you can stop reading right here.

The purpose of 2.5.4 is to ensure two things for users with difficulty performing certain motions:

  • That they don't accidentally trigger events through inadvertent motion
  • That they are able to trigger events without the use of motion, through another mechanism

Let's say you're developing a custom application that requires a user to fill out a long form. You have a feature that allows a user to "Undo" their last action by shaking their phone.

  • A user with tremors or another impairment needs a way to turn this feature off to prevent accidentally "Undoing" their actions. This can be a toggle or conventional button easily accessible within your page or app that disables motion-based events.
  • All users need the ability to Undo without the use of motion. After a user inputs text in a field, for example, you can display a conventional "Undo" or "Cancel" button next to the text field to offer the same functionality.

The one exemption to this criteria is when motion is considered "essential" to the activity, where if the motion was removed the activity would be invalidated. A pedometer app, for example, needs to use motion in order to accurately track steps.

Recommended Solutions

Either avoid motion-based functions altogether or provide clear, conventional alternatives to navigate your interface. 

For more information, please visit the official W3C article: Understanding 2.5.4 Motion Actuation


Download the WCAG 2.1 Compliance Checklist

Checklist Download

Questions?

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