Skip to content

Commit e16c088

Browse files
committed
chore: Update read-me for reduced motion
1 parent 9a3de9a commit e16c088

File tree

1 file changed

+20
-5
lines changed

1 file changed

+20
-5
lines changed

demos/reduced-motion/README.md

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,39 @@
11
# Esri Developer & Technology Summit
22

3-
### Project description
3+
## Project Description
44

55
This demo app demonstrates how to respect the `prefers-reduced-motion` settings in CSS. It showcases how to read the CSS setting for `prefers-reduced-motion` and disables animations accordingly. Additionally, the app provides a play/pause button so users can re-enable animations if they prefer.
66

7-
### How to Test `prefers-reduced-motion` with Chrome Developer Tools
7+
## How to Test `prefers-reduced-motion` with Chrome Developer Tools
88

99
To test the `prefers-reduced-motion` setting in Chrome Developer Tools, follow these steps:
1010

1111
1. Open Chrome Developer Tools (F12 or right-click on the page and select "Inspect").
1212
2. Go to the "Rendering" tab.
1313
3. Under the "Emulate CSS media feature prefers-reduced-motion" section, select "Reduce".
1414

15-
For more detailed instructions, refer to [Chrome Developer Tools Documentation](https://developer.chrome.com/docs/devtools/).
15+
For more detailed instructions, refer to the [Chrome Developer Tools Documentation](https://developer.chrome.com/docs/devtools/).
1616

17-
### Accessibility Information
17+
## Accessibility Information
1818

1919
The `prefers-reduced-motion` media query is an important accessibility feature that allows users to reduce or eliminate animations and transitions that can cause motion sickness, distraction, or other issues. For more information on `prefers-reduced-motion` and its impact, visit the following resources:
2020

2121
- [MDN Web Docs: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
2222
- [WebAIM: Animation and Accessibility](https://webaim.org/techniques/css/#animation)
2323

24-
By respecting the `prefers-reduced-motion` setting, this app ensures a more inclusive and comfortable user experience for individuals who are sensitive to motion.
24+
## WCAG Requirements for Reduced Motion
25+
26+
The Web Content Accessibility Guidelines (WCAG) include specific criteria related to motion and animations to ensure web content is accessible to all users, including those with vestibular disorders. The relevant WCAG criterion is:
27+
28+
### WCAG 2.1 - Guideline 2.3: Seizures and Physical Reactions
29+
30+
**Success Criterion 2.3.3: Animation from Interactions (Level AAA)**
31+
32+
- Motion animation triggered by interaction can be disabled unless the animation is essential to the functionality or the information being conveyed.
33+
34+
For more information on WCAG requirements related to reduced motion, refer to the following resources:
35+
36+
- [WCAG 2.1 Guideline 2.3: Seizures and Physical Reactions](https://www.w3.org/WAI/WCAG21/quickref/#seizures-and-physical-reactions)
37+
- [Understanding Success Criterion 2.3.3: Animation from Interactions](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html)
38+
39+
By adhering to these guidelines, this app helps to provide a more accessible experience for users who may be adversely affected by motion and animations.

0 commit comments

Comments
 (0)