A page that plays music or sounds doesn't disrupt people.
What to do
If you play audio content automatically, let people turn it down or off.
-
Why it's important
Sound distracts some people, and also interferes with screen readers.
+
Why it's important
Sound distracts some people, and also interferes with screen readers.
-
+
Intent of Audio Control
-
-
Individuals who use screen reading software can find it hard to hear the speech output
if there is other audio playing at the same time. This difficulty is exacerbated when
the screen reader's speech output is software based (as most are today) and is controlled
via the same volume control as the sound. Therefore, it is important that the user
- be able to turn off the background sound.
+ be able to turn off the background sound.
Having control of the volume includes
being able to reduce its volume to zero. Muting the system volume is not "pausing or stopping" the autoplay audio. Both the "pause or stop" and control of audio volume need to be independent of the overall system volume.
-
-
Playing audio automatically when landing on a page may affect a screen reader user's
ability to find the mechanism to stop it because they navigate by listening and automatically
started sounds might interfere with that navigation. Therefore, we discourage the
practice of automatically starting sounds (especially if they last more than 3 seconds),
- and encourage that the sound be
+ and encourage that the sound be
started by an action initiated by the user after they reach the page, rather than requiring
- that the sound be
+ that the sound be
stopped by an action of the user after they land on the page.
Individuals who use screen reading technologies can hear the screen reader without
other sounds playing. This is especially important for those who are hard of hearing
and for those whose screen readers use the system volume (so they cannot turn sound
down and screen reader up).
-
This Success Criterion also benefits people who have difficulty focusing on visual
content (including text) when audio is playing.
-
-
-
Examples of Audio Control
-
An audio file begins playing automatically when a page is opened. However, the audio
can be stopped by the user by selecting a "silent" link at the top of the page.
Fewer users are distracted by content that updates or moves.
What to do
Let users control content changes that occur in parallel with other content.
-
Why it's important
Some people with cognitive disabilities and attention deficits cannot concentrate with continual movement.
+
Why it's important
Some people with cognitive disabilities and attention deficits cannot concentrate with continual movement.
-
+
Intent of Pause, Stop, Hide
-
-
+
The intent of this Success Criterion is to avoid distracting users during their interaction
with a Web page.
-
+
"Moving, blinking and scrolling" refers to content in which the visible content conveys
a sense of motion. Common examples include motion pictures, synchronized media presentations,
animations, real-time games, and scrolling stock tickers. "Auto-updating" refers to
@@ -34,74 +33,50 @@
Intent of Pause, Stop, Hide
updates, and auto-advancing presentations and messages. The requirements for moving,
blinking and scrolling content and for auto-updating content are the same except that:
-
+
-
-
authors have the option of providing the user with a means to control the frequency
- of updates when content is auto-updating and
-
-
-
there is no five second exception for auto-updating since it makes little sense to
- auto-update for a few seconds and then stop
-
-
+
authors have the option of providing the user with a means to control the frequency of updates when content is auto-updating and
+
there is no five second exception for auto-updating since it makes little sense to auto-update for a few seconds and then stop
-
+
Content that moves or auto-updates can be a barrier to anyone who has trouble reading
stationary text quickly as well as anyone who has trouble tracking moving objects.
It can also cause problems for screen readers.
-
+
Moving content can also be a severe distraction for some people. Certain groups, particularly
those with attention deficit disorders, find blinking content distracting, making
it difficult for them to concentrate on other parts of the Web page. Five seconds
was chosen because it is long enough to get a user's attention, but not so long that
a user cannot wait out the distraction if necessary to use the page.
-
+
Content that is paused can either resume in real-time or continue playing from the
point in the presentation where the user left off.
-
+
-
-
Pausing and resuming where the user left off is best for users who want to pause to
read content and works best when the content is not associated with a real-time event
or status.
-
-
-
See
- 2.2.1: Timing Adjustable for additional requirements related to time-limits for reading.
-
Pausing and jumping to current display (when pause is released) is better for information
that is real-time or "status" in nature. For example, weather radar, a stock ticker,
a traffic camera, or an auction timer, would present misleading information if a pause
caused it to display old information when the content was restarted.
-
-
-
Hiding content would have the same result as pausing and jumping to current display
- (when pause is released).
-
-
+
Hiding content would have the same result as pausing and jumping to current display (when pause is released).
-
-
-
+
For a mechanism to be considered "a mechanism for the user to pause," it must provide
the user with a means to pause that does not tie up the user or the focus so that
the page cannot be used. The word "pause" here is meant in the sense of a "pause
@@ -110,58 +85,44 @@
Intent of Pause, Stop, Hide
moves the focus away) would not be considered a "mechanism for the user to pause"
because it makes the page unusable in the process and would not meet this SC.
-
+
It is important to note that the terms "blinking" and "flashing" can sometimes refer
to the same content.
-
+
-
"Blinking" refers to content that causes a distraction problem. Blinking can be allowed
for a short time as long as it stops (or can be stopped)
-
"Flashing" refers to content that can trigger a seizure (if it is more than 3 per
second and large and bright enough). This cannot be allowed even for a second or it
could cause a seizure. And turning the flash off is also not an option since the seizure
could occur faster than most users could turn it off.
-
Blinking usually does not occur at speeds of 3 per second or more, but it can. If
blinking occurs faster than 3 per second, it would also be considered a flash.
-
-
-
Benefits of Pause, Stop, Hide
-
-
+
-
Providing content that stops blinking after five seconds or providing a mechanism
for users to stop blinking content allows people with certain disabilities to interact
with the Web page.
-
One use of content that blinks is to draw the visitor's attention to that content.
Although this is an effective technique for all users with vision, it can be a problem
for some users if it persists. For certain groups, including people with low literacy,
reading and intellectual disabilities, and people with attention deficit disorders,
content that blinks may make it difficult or even impossible to interact with the
- rest of the Web page.
-
+ rest of the Web page.
-
-
-
Examples of Pause, Stop, Hide
-
An essential animation can be paused without affecting the activity
A Web site helps users understand 'how things work' through animations that demonstrate
@@ -195,127 +156,69 @@
Examples of Pause, Stop, Hide
for all users and because it is not presented in parallel with other content, no mechanism
to pause, stop or hide it needs to be provided.
-
-
-
From dd3a053c9f621c07311b290172a9a58465b9b47d Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke"
Date: Fri, 9 Aug 2024 00:07:10 +0100
Subject: [PATCH 02/17] Remove the "audio" mention in the intent - this is not
about audio, it's visual
---
understanding/20/pause-stop-hide.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/understanding/20/pause-stop-hide.html b/understanding/20/pause-stop-hide.html
index aface86b69..7677766c7e 100644
--- a/understanding/20/pause-stop-hide.html
+++ b/understanding/20/pause-stop-hide.html
@@ -29,7 +29,7 @@
Intent of Pause, Stop, Hide
a sense of motion. Common examples include motion pictures, synchronized media presentations,
animations, real-time games, and scrolling stock tickers. "Auto-updating" refers to
content that updates or disappears based on a preset time interval. Common time-based
- content includes audio, automatically updated weather information, news, stock price
+ content includes automatically updated weather information, news, stock price
updates, and auto-advancing presentations and messages. The requirements for moving,
blinking and scrolling content and for auto-updating content are the same except that:
From 43c629b5fc4ac2abd1ca51f952e11c84a5c19c20 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke"
Date: Fri, 9 Aug 2024 00:20:04 +0100
Subject: [PATCH 03/17] Add explanation of what "starts automatically" means,
plus notes with cross-references to related/overlapping SCs.
---
understanding/20/pause-stop-hide.html | 23 ++++++++++++++++++++---
1 file changed, 20 insertions(+), 3 deletions(-)
diff --git a/understanding/20/pause-stop-hide.html b/understanding/20/pause-stop-hide.html
index 7677766c7e..10ec434952 100644
--- a/understanding/20/pause-stop-hide.html
+++ b/understanding/20/pause-stop-hide.html
@@ -25,6 +25,9 @@
Intent of Pause, Stop, Hide
with a Web page.
+
In the context of this Success Criterion, "starts automatically" broadly refers to animations/updates
+ that are not the direct result of a user's explicit activation.
+
"Moving, blinking and scrolling" refers to content in which the visible content conveys
a sense of motion. Common examples include motion pictures, synchronized media presentations,
animations, real-time games, and scrolling stock tickers. "Auto-updating" refers to
@@ -86,9 +89,16 @@
Intent of Pause, Stop, Hide
because it makes the page unusable in the process and would not meet this SC.
-
It is important to note that the terms "blinking" and "flashing" can sometimes refer
- to the same content.
-
+
+
This Success Criterion is specifically concerned with moving, blinking, scrolling, and
+ auto-updating visual content. For audio content that starts automatically, refer to 1.4.2 Audio Control.
+
Moving, blinking, scrolling content that starts automatically not as a result of explicit *activation* (such as activating a button),
+ but because of a more general user interaction (such as focusing/hovering over an element, or scrolling the page), and doesn't provide
+ a way to Pause, Stop, or Hide, will fail this Criterion, and potentially
+ 2.3.3 Animation from Interaction.
+
+
+
It is important to note that the terms "blinking" and "flashing" can sometimes refer to the same content.
"Blinking" refers to content that causes a distraction problem. Blinking can be allowed
@@ -103,6 +113,13 @@
Intent of Pause, Stop, Hide
blinking occurs faster than 3 per second, it would also be considered a flash.
In the context of this Success Criterion, "plays automatically" broadly refers to audio that
+ is not stated/played as a direct result of a user's explicit activation.
Benefits of Audio Control
From 10a8283f10a304578fea4a57681d9caaea36ba60 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke"
Date: Fri, 9 Aug 2024 00:40:13 +0100
Subject: [PATCH 05/17] Clean up formatting and add additional note to 2.3.3
---
.../21/animation-from-interactions.html | 56 +++++++++----------
1 file changed, 25 insertions(+), 31 deletions(-)
diff --git a/understanding/21/animation-from-interactions.html b/understanding/21/animation-from-interactions.html
index 4f92d73997..a226548a93 100644
--- a/understanding/21/animation-from-interactions.html
+++ b/understanding/21/animation-from-interactions.html
@@ -15,22 +15,22 @@
In brief
What to do
Support user preferences for motion, and eliminate unnecessary motion effects.
Why it's important
People can get sick from motion effects.
-
-
-
+
+
+
Intent
The intent of this Success Criterion is to allow users to prevent animation from being displayed on Web pages. Some users experience distraction or nausea from animated content. For example, if scrolling a page causes elements to move (other than the essential movement associated with scrolling) it can trigger vestibular disorders. Vestibular (inner ear) disorder reactions include dizziness, nausea and headaches. Another animation that is often non-essential is parallax scrolling. Parallax scrolling occurs when backgrounds move at a different rate to foregrounds. Animation that is essential to the functionality or information of a web page is allowed by this Success Criterion.
-
"Animation from interactions" applies when a user’s interaction initiates non-essential animation. In contrast, 2.2.2 Pause, Stop, Hide applies when the web page initiates animation.
+
"Animation from interactions" applies when a user’s interaction initiates non-essential animation. In contrast, 2.2.2 Pause, Stop, Hide applies when the web page initiates animation "automatically" that is not in response to an explicit user activation. There may be situations where a particular animation may fail both Success Criteria.
The impact of animation on people with vestibular disorders can be quite severe. Triggered reactions include nausea, migraine headaches, and potentially needing bed rest to recover.
How can a website reduce the chances of triggering a vestibular disorder? Choose any one of the following solutions. Avoid using unnecessary animation. Provide a control for users to turn off non-essential animations from user interaction. Take advantage of the reduce motion feature in the user agent or operating system.
-
+
What about movement caused by a user scrolling a page? Moving new content into the viewport is essential for scrolling. The user controls the essential scrolling movement so it is allowed. Only add non-essential animation to the scrolling interaction in a responsible way. Always give users the ability to turn off unnecessary movement.
-
+
Benefits
@@ -45,35 +45,29 @@
Benefits
Examples
-
-
Parallax scrolling with option to turn off unnecessary motion globally:
-
-
A site includes extra animations when the user scrolls. Decorative elements move in and out of view horizontally when the essential page content is scrolled vertically. A control at the top of each page allows the user to turn off unnecessary animations. The ability to turn off non-essential animations is a site-wide setting.
-
-
-
Transitions that support the reduce motion preference:
-
-
A site includes a non-essential transition when loading new content. The transition is a page-flipping animation that respects the reduce-motion CSS media query. When the user enables the reduce motion preference, the page-flipping animation is turned off.
-
-
-
Essential animation:
-
-
A web application provides a feature to author animated sequences. As part of this tool the author needs to preview the animation.
-
-
-
+
+
Parallax scrolling with option to turn off unnecessary motion globally
+
A site includes extra animations when the user scrolls. Decorative elements move in and out of view
+ horizontally when the essential page content is scrolled vertically. A control at the top of each page
+ allows the user to turn off unnecessary animations. The ability to turn off non-essential animations is a site-wide setting.
+
Transitions that support the reduce motion preference
+
A site includes a non-essential transition when loading new content. The transition is a page-flipping
+ animation that respects the reduce-motion CSS media query. When the user enables the reduce motion preference,
+ the page-flipping animation is turned off.
+
Essential animation
+
A web application provides a feature to author animated sequences. As part of this tool the author needs to preview the animation.
In the context of this Success Criterion, "plays automatically" broadly refers to audio that
- is not stated/played as a direct result of a user's explicit activation.
+ is not started/played as a direct result of a user's explicit activation.
In the context of this Success Criterion, "starts automatically" broadly refers to animations/updates
- that are not the direct result of a user's explicit activation.
+ that are not the direct result of a user's intentional activation, e.g., selecting a link or button.
"Moving, blinking and scrolling" refers to content in which the visible content conveys
a sense of motion. Common examples include motion pictures, synchronized media presentations,
From b511327f8f88897ad53079d6e3c3055bb1f08082 Mon Sep 17 00:00:00 2001
From: Alastair Campbell
Date: Fri, 23 Aug 2024 16:45:12 +0100
Subject: [PATCH 08/17] Update understanding/20/pause-stop-hide.html
---
understanding/20/pause-stop-hide.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/understanding/20/pause-stop-hide.html b/understanding/20/pause-stop-hide.html
index 16bda9b991..613ad2e061 100644
--- a/understanding/20/pause-stop-hide.html
+++ b/understanding/20/pause-stop-hide.html
@@ -26,7 +26,7 @@
Intent of Pause, Stop, Hide
In the context of this Success Criterion, "starts automatically" broadly refers to animations/updates
- that are not the direct result of a user's intentional activation, e.g., selecting a link or button.
+ that are not the direct result of a user's intentional activation, for example, selecting a link or button.
"Moving, blinking and scrolling" refers to content in which the visible content conveys
a sense of motion. Common examples include motion pictures, synchronized media presentations,
From 4b3558e57f551471fb792476076e3257ad976ee4 Mon Sep 17 00:00:00 2001
From: Alastair Campbell
Date: Fri, 23 Aug 2024 16:46:04 +0100
Subject: [PATCH 09/17] Update understanding/20/audio-control.html
---
understanding/20/audio-control.html | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/understanding/20/audio-control.html b/understanding/20/audio-control.html
index 83cc68b2d5..f38b302fd5 100644
--- a/understanding/20/audio-control.html
+++ b/understanding/20/audio-control.html
@@ -41,8 +41,8 @@
In the context of this Success Criterion, "plays automatically" broadly refers to audio that
- is not started/played as a direct result of a user's explicit activation.
+
In the context of this Success Criterion, "plays automatically" broadly refers to audio
+ that is not the direct result of a user's intentional activation, for example, selecting a link or button.
In the context of this Success Criterion, "plays automatically" broadly refers to audio
- that is not the direct result of a user's intentional activation, for example, selecting a link or button.
+
In the context of this Success Criterion, "plays automatically" broadly refers to audio that is not started/played as a direct result of a user's intentional activation. For example, not selecting a link or button.
The intent of this Success Criterion is to allow users to prevent animation from being displayed on Web pages. Some users experience distraction or nausea from animated content. For example, if scrolling a page causes elements to move (other than the essential movement associated with scrolling) it can trigger vestibular disorders. Vestibular (inner ear) disorder reactions include dizziness, nausea and headaches. Another animation that is often non-essential is parallax scrolling. Parallax scrolling occurs when backgrounds move at a different rate to foregrounds. Animation that is essential to the functionality or information of a web page is allowed by this Success Criterion.
-
"Animation from interactions" applies when a user’s interaction initiates non-essential animation. In contrast, 2.2.2 Pause, Stop, Hide applies when the web page initiates animation "automatically" that is not in response to an explicit user activation. There may be situations where a particular animation may fail both Success Criteria.
+
"Animation from interactions" applies when a user’s interaction initiates non-essential animation. In contrast, 2.2.2 Pause, Stop, Hide applies when the web page initiates animation "automatically" that is not in response to an intentional user activation. There may be situations where a particular animation may fail both Success Criteria.
The impact of animation on people with vestibular disorders can be quite severe. Triggered reactions include nausea, migraine headaches, and potentially needing bed rest to recover.
This Success Criterion is specifically concerned with moving, blinking, scrolling, and
auto-updating visual content. For audio content that starts automatically, refer to 1.4.2 Audio Control.
-
Moving, blinking, scrolling content that starts automatically not as a result of explicit *activation* (such as activating a button),
+
Moving, blinking, scrolling content that starts automatically not as a result of intentional activation (such as activating a button),
but because of a more general user interaction (such as focusing/hovering over an element, or scrolling the page), and doesn't provide
a way to Pause, Stop, or Hide, will fail this Criterion, and potentially
2.3.3 Animation from Interaction.
See 2.2.1: Timing Adjustable for additional requirements related to time-limits for reading and interactions.
From 7025f3eb49ff84695c69d0e6c3caf0044e475dad Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke"
Date: Tue, 29 Oct 2024 15:55:34 +0000
Subject: [PATCH 16/17] Turn paragraph around for more clarity
---
understanding/20/pause-stop-hide.html | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/understanding/20/pause-stop-hide.html b/understanding/20/pause-stop-hide.html
index 6fd2fd55ce..53514f2899 100644
--- a/understanding/20/pause-stop-hide.html
+++ b/understanding/20/pause-stop-hide.html
@@ -92,9 +92,9 @@
Intent of Pause, Stop, Hide
This Success Criterion is specifically concerned with moving, blinking, scrolling, and
auto-updating visual content. For audio content that starts automatically, refer to 1.4.2 Audio Control.
-
Moving, blinking, scrolling content that starts automatically not as a result of intentional activation (such as activating a button),
- but because of a more general user interaction (such as focusing/hovering over an element, or scrolling the page), and doesn't provide
- a way to Pause, Stop, or Hide, will fail this Criterion, and potentially
+
Moving, blinking, scrolling content that starts automatically because of a general user interaction (such as focusing/hovering over an element,
+ or scrolling the page), rather than as a result of an intentional activation (such as activating a button),
+ and which doesn't provide provide a way to Pause, Stop, or Hide, will fail this Criterion, and potentially
2.3.3 Animation from Interaction.