|
1 | 1 | # Esri Developer & Technology Summit
|
2 | 2 |
|
3 |
| -### Project description |
| 3 | +## Project Description |
4 | 4 |
|
5 | 5 | 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.
|
6 | 6 |
|
7 |
| -### How to Test `prefers-reduced-motion` with Chrome Developer Tools |
| 7 | +## How to Test `prefers-reduced-motion` with Chrome Developer Tools |
8 | 8 |
|
9 | 9 | To test the `prefers-reduced-motion` setting in Chrome Developer Tools, follow these steps:
|
10 | 10 |
|
11 | 11 | 1. Open Chrome Developer Tools (F12 or right-click on the page and select "Inspect").
|
12 | 12 | 2. Go to the "Rendering" tab.
|
13 | 13 | 3. Under the "Emulate CSS media feature prefers-reduced-motion" section, select "Reduce".
|
14 | 14 |
|
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/). |
16 | 16 |
|
17 |
| -### Accessibility Information |
| 17 | +## Accessibility Information |
18 | 18 |
|
19 | 19 | 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:
|
20 | 20 |
|
21 | 21 | - [MDN Web Docs: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
|
22 | 22 | - [WebAIM: Animation and Accessibility](https://webaim.org/techniques/css/#animation)
|
23 | 23 |
|
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