From 366a7b7e6fdfa689a39ded47877426623c6e2c3a Mon Sep 17 00:00:00 2001
From: Roel Koper <roelkoper@fourdigits.nl>
Date: Thu, 13 Jun 2024 10:17:27 +0200
Subject: [PATCH] Add prefers-reduced-motion to accessibility docs (#12038)
---
CHANGELOG.txt | 1 +
CONTRIBUTORS.md | 1 +
.../accessibility_considerations.md | 18 ++++++++++++++++++
docs/releases/6.2.md | 1 +
4 files changed, 21 insertions(+)
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index f5e2e7f5ab..45f65cec17 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -32,6 +32,7 @@ Changelog
* Maintenance: Split `contrib.frontend_cache.backends` into dedicated sub-modules (Andy Babic)
* Maintenance: Remove unused `docs/autobuild.sh` script (Sævar Öfjörð Magnússon)
* Fix: Handle choice groups as dictionaries in active filters (Sébastien Corbin)
+ * Docs: Add note about `prefers-reduced-motion` to the accessibility documentation (Roel Koper)
6.1.2 (30.05.2024)
diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index c5e4aea6df..b84f35f48a 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -821,6 +821,7 @@
* Julie Rymer
* Byron Peebles
* Arnar Tumi Þorsteinsson
+* Roel Koper
## Translators
diff --git a/docs/advanced_topics/accessibility_considerations.md b/docs/advanced_topics/accessibility_considerations.md
index 8e125e9315..3478fc3d2c 100644
--- a/docs/advanced_topics/accessibility_considerations.md
+++ b/docs/advanced_topics/accessibility_considerations.md
@@ -224,6 +224,24 @@ Readability is fundamental to accessibility. One of the ways to improve text con
(accessibility_resources)=
+### prefers-reduced-motion
+
+Some users, such as those with vestibular disorders, may prefer a more static version of your site. You can respect this preference by using the `prefers-reduced-motion` media query in your CSS.
+
+```css
+@media (prefers-reduced-motion) {
+ /* styles to apply if a user's device settings are set to reduced motion */
+ /* for example, disable animations */
+ * {
+ animation: none !important;
+ transition: none !important;
+ }
+}
+```
+
+Note that `prefers-reduced-motion` is only applied for users who enabled this setting in their operating system or browser. This feature is supported by Chrome, Safari and Firefox. For more information on reduced motion, see the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).
+
+
## Accessibility resources
We focus on considerations specific to Wagtail websites, but there is much more to accessibility. Here are valuable resources to learn more, for developers but also designers and authors:
diff --git a/docs/releases/6.2.md b/docs/releases/6.2.md
index af94d0b618..9aaf0653eb 100644
--- a/docs/releases/6.2.md
+++ b/docs/releases/6.2.md
@@ -45,6 +45,7 @@ depth: 1
* Document Wagtail's bug bounty policy (Jake Howard)
* Fix incorrect Sphinx-style code references to use MyST style (Byron Peebles)
* Document the fact that `Orderable` is not required for inline panels (Bojan Mihelac)
+ * Add note about `prefers-reduced-motion` to the accessibility documentation (Roel Koper)
### Maintenance