Animationen sollten die Einstellung für reduzierte Bewegung berücksichtigen
Große bewegte, zoomende oder Parallax-Effekte können bei Menschen mit Gleichgewichtsstörungen Schwindel oder Übelkeit auslösen. Sie aktivieren in den Einstellungen ihres Geräts „Bewegung reduzieren“, und ein Shop, der diese Einstellung ignoriert, kann sie vertreiben.
- Regel-ID
- vs-motion
- Quelle
- Validiscan-Prüfung
- Auswirkung
- Gering
- Korrekturstufe
- AUTO
- auf Shopify, Shopware, WooCommerce und Magento
- Status
- wird ausgeführt
Was geprüft wird
Erkennt CSS- und Skript-Animationen, Parallax- und Zoom-Effekte, die die Benutzereinstellung prefers-reduced-motion ignorieren. Wird als gute Praxis gemeldet (bezogen auf 2.3.3 Animation from Interactions, Stufe AAA); blitzende Inhalte deckt die manuelle Checkliste ab (2.3.1).
Die Seiten laden zunächst ohne die Einstellung für reduzierte Bewegung. Die Prüfung liest die berechneten Animations- und Übergangseigenschaften von bis zu 5.000 Elementen im body und ignoriert dabei verborgene. Kandidaten sind laufende CSS-Animationen, die sich endlos wiederholen oder deren animation-duration mehr als 5 Sekunden beträgt, sowie Übergänge von mehr als 5 Sekunden.
Danach wird die Seite auf prefers-reduced-motion: reduce umgestellt, Skripte haben 150 ms Zeit zu reagieren, und jeder Kandidat wird erneut gelesen. Ein Kandidat besteht, wenn er entfernt, angehalten oder verborgen wird oder nun endlich ist und höchstens 5 Sekunden dauert, auch wenn das über ein Stylesheet eines anderen Ursprungs geschieht. Die übrigen werden zu Befunden, höchstens 20 pro Seite. Schlägt die Umstellung fehl, gilt eine prefers-reduced-motion-Abfrage in einem Stylesheet, das die Animation definiert oder anwendet, als Absicherung.
Ein automatisch abspielendes video landet bei „zu prüfen“, es sei denn, die Einstellung blendet es aus oder hält es während der Wiedergabe an. Dorthin kommt auch ein einzelner Hinweis, blitzende Inhalte von Hand zu prüfen, wenn die Seite Video, Canvas, .gif-Bilder oder Animationen zeigt. Aus Ergebnissen „zu prüfen“ macht der Scanner derzeit keine Befunde. Bewegung, die ein Skript Bild für Bild steuert, wird nicht gemessen.
So wird es behoben
Schließen Sie nicht notwendige Animationen und Übergänge in @media (prefers-reduced-motion: no-preference) ein, oder schalten Sie sie innerhalb von @media (prefers-reduced-motion: reduce) ab, und prüfen Sie die Einstellung in JavaScript, bevor Sie Animationen starten.
WCAG-Erfolgskriterien
Gute Praxis: keinem WCAG-Erfolgskriterium zugeordnet.
Wo ein Rezept es behebt
Shopify: Rezept reduced-motion-guard
Vorher und nachher anzeigen (1)
assets/base.css.liquid Änderungen an assets/base.css.liquid: 13 hinzugefügt, 0 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 1866 | 1866 | } | |
| 1867 | 1867 | ||
| 1868 | 1868 | /* ----------------------------------------------------------------- motion */ | |
| 1869 | Hinzugefügt | ||
| 1870 | Hinzugefügt | /* validiscan:reduced-motion-guard */ | |
| 1871 | Hinzugefügt | @media (prefers-reduced-motion: reduce) { | |
| 1872 | Hinzugefügt | *, | |
| 1873 | Hinzugefügt | *::before, | |
| 1874 | Hinzugefügt | *::after { | |
| 1875 | Hinzugefügt | animation-duration: 0.01ms !important; | |
| 1876 | Hinzugefügt | animation-iteration-count: 1 !important; | |
| 1877 | Hinzugefügt | transition-duration: 0.01ms !important; | |
| 1878 | Hinzugefügt | scroll-behavior: auto !important; | |
| 1879 | Hinzugefügt | } | |
| 1880 | Hinzugefügt | } | |
| 1881 | Hinzugefügt | /* /validiscan:reduced-motion-guard */ |
Shopware: Rezept reduced-motion-guard
Vorher und nachher anzeigen (1)
Resources/app/storefront/src/main.js Änderungen an Resources/app/storefront/src/main.js: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 139 | 139 | }); | |
| 140 | 140 | }); | |
| 141 | 141 | ||
| 142 | Entfernt | if (options.autoplay === true) { | |
| 142 | Hinzugefügt | if (options.autoplay === true && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) { | |
| 143 | 143 | window.setInterval( | |
| 144 | 144 | function () { | |
| 145 | 145 | show(current + 1); |
Resources/app/storefront/src/scss/base.scss Änderungen an Resources/app/storefront/src/scss/base.scss: 14 hinzugefügt, 0 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 1708 | 1708 | margin: 8px 0 0; | |
| 1709 | 1709 | font-size: 0.875rem; | |
| 1710 | 1710 | } | |
| 1711 | Hinzugefügt | ||
| 1712 | Hinzugefügt | /* validiscan:reduced-motion-guard */ | |
| 1713 | Hinzugefügt | /* Honour the visitor's reduced-motion setting: animations and transitions end at once, no smooth scrolling. */ | |
| 1714 | Hinzugefügt | @media (prefers-reduced-motion: reduce) { | |
| 1715 | Hinzugefügt | *, | |
| 1716 | Hinzugefügt | *::before, | |
| 1717 | Hinzugefügt | *::after { | |
| 1718 | Hinzugefügt | animation-duration: 0.01ms !important; | |
| 1719 | Hinzugefügt | animation-iteration-count: 1 !important; | |
| 1720 | Hinzugefügt | transition-duration: 0.01ms !important; | |
| 1721 | Hinzugefügt | scroll-behavior: auto !important; | |
| 1722 | Hinzugefügt | } | |
| 1723 | Hinzugefügt | } | |
| 1724 | Hinzugefügt | /* /validiscan:reduced-motion-guard */ |
WooCommerce: Rezept reduced-motion-guard
Vorher und nachher anzeigen (1)
assets/css/main.css Änderungen an assets/css/main.css: 13 hinzugefügt, 0 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 794 | 794 | color: #999; | |
| 795 | 795 | cursor: pointer; | |
| 796 | 796 | } | |
| 797 | Hinzugefügt | ||
| 798 | Hinzugefügt | /* validiscan:reduced-motion-guard */ | |
| 799 | Hinzugefügt | @media (prefers-reduced-motion: reduce) { | |
| 800 | Hinzugefügt | *, | |
| 801 | Hinzugefügt | *::before, | |
| 802 | Hinzugefügt | *::after { | |
| 803 | Hinzugefügt | animation-duration: 0.01ms !important; | |
| 804 | Hinzugefügt | animation-iteration-count: 1 !important; | |
| 805 | Hinzugefügt | transition-duration: 0.01ms !important; | |
| 806 | Hinzugefügt | scroll-behavior: auto !important; | |
| 807 | Hinzugefügt | } | |
| 808 | Hinzugefügt | } | |
| 809 | Hinzugefügt | /* /validiscan:reduced-motion-guard */ |
Magento: Rezept reduced-motion-guard
Vorher und nachher anzeigen (1)
app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Änderungen an app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 9 hinzugefügt, 0 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 1264 | 1264 | height: 18px; | |
| 1265 | 1265 | stroke-width: 3; | |
| 1266 | 1266 | } | |
| 1267 | Hinzugefügt | ||
| 1268 | Hinzugefügt | /* validiscan:reduced-motion-guard */ | |
| 1269 | Hinzugefügt | @media (prefers-reduced-motion: reduce) { | |
| 1270 | Hinzugefügt | .product-label, | |
| 1271 | Hinzugefügt | .slick-track { | |
| 1272 | Hinzugefügt | animation: none; | |
| 1273 | Hinzugefügt | } | |
| 1274 | Hinzugefügt | } | |
| 1275 | Hinzugefügt | /* /validiscan:reduced-motion-guard */ |
app/design/frontend/Validiscan/fixture/web/css/styles-m.css Änderungen an app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 9 hinzugefügt, 0 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 1232 | 1232 | height: 18px; | |
| 1233 | 1233 | stroke-width: 3; | |
| 1234 | 1234 | } | |
| 1235 | Hinzugefügt | ||
| 1236 | Hinzugefügt | /* validiscan:reduced-motion-guard */ | |
| 1237 | Hinzugefügt | @media (prefers-reduced-motion: reduce) { | |
| 1238 | Hinzugefügt | .product-label, | |
| 1239 | Hinzugefügt | .slick-track { | |
| 1240 | Hinzugefügt | animation: none; | |
| 1241 | Hinzugefügt | } | |
| 1242 | Hinzugefügt | } | |
| 1243 | Hinzugefügt | /* /validiscan:reduced-motion-guard */ |
Beginnen Sie mit einem kostenlosen Check Ihres Shops.
Senden Sie die Adresse Ihres Shops. Validiscan scannt ihn und antwortet mit jedem Fehler, den der Scan nachweisen kann, jeweils mit der Seite und dem Code.
Kostenlosen Check anfordernOder schreiben Sie an info@validiscan.com.
Was der kostenlose Check umfasst und was nicht- Sie senden
- die Adresse Ihres Shops
- Gescannte Seiten
- bis zu 15
- Sie erhalten
- jeden Fehler, den der Scan nachweisen kann, mit Seite und Code
- In Ihrem Shop
- nur öffentliche Seiten; keine Anmeldung, nichts gekauft, kein Formular abgeschickt
- Was er nicht ist
- ein vollständiges Audit