search

carbon-design-system / carbon-for-ibm-dotcom

Carbon for IBM.com is based on the Carbon Design System for IBM
https://www.ibm.com/standards/carbon/
Apache License 2.0
266 stars 157 forks source link

Accessibility Violation: Leadspaces with video #10340

Open tweenn opened 1 year ago

tweenn commented 1 year ago

Description

Able@IBM in rule 2.2.2 Play, Pause, Hide states: Source: https://www.ibm.com/able/requirements/requirements/

Moving content can also be a severe distraction for some people. Certain groups, particularly those with attention deficit disorders, find blinking content distracting and have difficulty concentrating on other content. The five-second limit is long enough to get a user’s attention, but short enough for a user to wait out the distraction before reading the page.

[...]

The requirement Understanding 2.3.3 Animation from Interactions applies when a user’s interaction initiates animation. In contrast this requirement, 2.2.2 Pause, stop, hide, applies when the web page or application initiates animation.

[...]

Essential Exception: If the movement, blinking, scrolling or auto-updating is part of an activity where it is essential, this requirement does not apply. An animation, such as loading… that occurs as part of a preload phase or similar situation can be considered essential if any user interaction cannot occur during that phase and if not indicating progress could confuse users or cause them to think that content was frozen or broken.

As the leadspace video in the background is not considered an essential animation, it should be limited to 5 seconds max duration with a limit of 3 blinks.

Said that, I know you guys can't control the video from Mediacenter that a user may input in the component and trying to figure a code to restrain a user from misbehaving would be impossible, so...

TLDR:

Removing the looping of the components is essential and it's nice to have a note into the docs around the accessibility best practices.

Note: I didn't look around all the components that may be potentially affected by this issues aside the leadspaces with video that are linked in the components impacted section - which I know are web-components only, the react package don't have 'em - buuuuuuut this may affect other "autoplay" components that are not related to a user gesture.

Component(s) impacted

Carbon for IBM dot Com webcomponets that have media in autoplay of any order. I have identified the following:

Browser

No response

Carbon for IBM.com version

Latest

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Application/website

MediaCenter

Package

@carbon/ibmdotcom-react, @carbon/ibmdotcom-web-components, @carbon/web-components

CodeSandbox example

Not needed

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

kennylam commented 1 year ago

There are 2 parts to this issue:

kennylam commented 1 year ago

@oliviaflory @RichKummer Confirmed prefers-reduced-motion is already present in background-media component. The video will not autoplay when the user has this setting enabled. So we only need to select a new video.

oliviaflory commented 1 year ago

@tweenn Thank you for opening this issue!

We spoke with our accessibility team and determined that we are OK to keep the looping video as along as:

  1. prefers-reduced-motion is present, so the video will not auto play if the user has this enabled on their device
  2. The video has no sound or captions.

The current video example in the lead space and background media components is not compliant. We need to find an alternative video, something more ambient like this example from MaaS360. Do you or Jerry know how we could get access to Media Center to find a better video that would be in compliance?

May-01-2023 11-43-40