Motion-based functionality

WCAG Level

Level A

Priority

Critical

Pages/screens/components affected

AMP Story Player - AMP Story 360

Description

Particularly on portable (mobile/tablet) devices, it is possible for web content to react to device motion or user motion (through additional sensors, such as a webcam or motion detector) - with functionality such as “shake to undo”, or by using the tilt of the device as a directional input. However, as not all users will be able to use such motion-based controls, an alternative way of triggering the same functionality that doesn't involve motion must be available. This is also particularly important for mouse and keyboard users. Further, it must be possible to disable the motion-based controls to prevent accidental triggering.

AMP Story 360 contains <canvas> and 360 degree video examples that can only be navigated using a device's gyroscope. No alternative way of viewing/controlling the content is provided for keyboard or mouse users, and no way to disable device motion based functionality is available.

One of the AMP Story 360 pages, showing a 3d canvas overlaid with instructions to 'Move device to explore'

User impact

Depending on their particular situation and needs, some people may have their device mounted in a fixed position (for instance, onto a powered wheelchair). Or they may lack the necessary mobility or fine motor control to confidently perform any required device or user motion. Without an alternative way of triggering functionality, these users will be unable to operate the web content. If the motion controls can't be disabled, users may also accidentally trigger functionality they didn't intend to.

Further, this content may be accessed by users who navigate using a keyboard or mouse, both on a desktop/laptop and on smartphones/tablets. For these users, it is currently impossible to use content designed solely for device motion.

Required solution

The simplest solution is to make sure that for each functionality triggered via motion-based controls, there is an equivalent way to trigger the functionality without the need for motion - for instance, by having regular buttons, links, or similar interface controls.

Further, make sure there is a way for users to explicitly disable motion controls. This could be added to an existing settings page/dialog, or added explicitly as a toggle control on each page.

Consider adding on-screen controls that can be used with the mouse, and focused/toggled using the keyboard. Alternatively, ensure that the same content/functionality is available in an accessible alternative AMP story/format.

This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the website.

Test procedure(s)

Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the website for instances of the same issue:

Open a page that uses motion activation.
Verify that there is an alternative way to trigger the same functionality that does not rely on device or user motion.
Make sure that keyboard and mouse users are able to operate this alternative way (e.g. additional controls).
Verify that there is a way to disable the motion controls.

Definition of done

Complete all of these tasks before closing this issue or indicating it is ready for retest:

All issues identified within the test sample have been resolved.
The rest of the website has been tested for the same issue.
All issues identified throughout the rest of the website have been resolved or filed as new issues.

ampproject / amphtml

amp-story: Motion-based functionality #32513