Animationer bør respektere indstillingen for reduceret bevægelse
Store effekter med bevægelse, zoom eller parallakse kan give folk med balanceforstyrrelser svimmelhed eller kvalme. De slår »Reducer bevægelse« til i deres enhedsindstillinger, og en webshop, der ignorerer indstillingen, kan skræmme dem væk.
- Regel-id
- vs-motion
- Kilde
- Validiscan-kontrol
- Alvorlighed
- Mindre
- Rettelsesniveau
- AUTO
- på Shopify, Shopware, WooCommerce og Magento
- Status
- køres
Hvad kontrollen gør
Finder CSS- og scriptanimationer, parallakse- og zoomeffekter, der ignorerer brugerindstillingen prefers-reduced-motion. Rapporteres som god praksis (relateret til 2.3.3 Animation fra interaktioner, niveau AAA); blinkende indhold er dækket af den manuelle tjekliste (2.3.1).
Siderne indlæses uden nogen indstilling for bevægelse. Kontrollen aflæser de beregnede animations- og overgangsegenskaber for op til 5.000 elementer i body og ser bort fra skjulte. Kandidater er kørende CSS-animationer, der gentages uendeligt eller har en animation-duration på over 5 sekunder, samt overgange på over 5 sekunder.
Siden skiftes til prefers-reduced-motion: reduce, scripts får 150 ms til at reagere, og hver kandidat aflæses igen. En kandidat, der fjernes, sættes på pause, skjules eller gøres endelig og højst 5 sekunder lang, består, også når det sker gennem et stilark fra en anden origin. Resten bliver til fund, højst 20 pr. side. Slår skiftet fejl, regnes en prefers-reduced-motion-forespørgsel i et stilark, der definerer eller anvender animationen, som en sikring.
En video, der afspilles automatisk, får resultatet »kræver gennemgang«, medmindre indstillingen skjuler den eller sætter den på pause, mens den afspilles. Det gør også én påmindelse om at kontrollere blinkende indhold manuelt, hvis siden viser video, canvas, .gif-billeder eller animation. Scanneren laver i dag ingen fund af resultater, der kræver gennemgang. Bevægelse, som et script styrer billede for billede, måles ikke.
Sådan retter du det
Pak ikke-essentielle animationer og overgange ind i @media (prefers-reduced-motion: no-preference), eller slå dem fra inde i @media (prefers-reduced-motion: reduce), og tjek indstillingen i JavaScript, før animationer startes.
WCAG-succeskriterier
God praksis: ikke knyttet til et succeskriterium i WCAG.
Hvor en opskrift retter det
Shopify: opskrift reduced-motion-guard
Vis før og efter (1)
assets/base.css.liquid Ændringer i assets/base.css.liquid: 13 tilføjet, 0 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 1866 | 1866 | } | |
| 1867 | 1867 | ||
| 1868 | 1868 | /* ----------------------------------------------------------------- motion */ | |
| 1869 | Tilføjet | ||
| 1870 | Tilføjet | /* validiscan:reduced-motion-guard */ | |
| 1871 | Tilføjet | @media (prefers-reduced-motion: reduce) { | |
| 1872 | Tilføjet | *, | |
| 1873 | Tilføjet | *::before, | |
| 1874 | Tilføjet | *::after { | |
| 1875 | Tilføjet | animation-duration: 0.01ms !important; | |
| 1876 | Tilføjet | animation-iteration-count: 1 !important; | |
| 1877 | Tilføjet | transition-duration: 0.01ms !important; | |
| 1878 | Tilføjet | scroll-behavior: auto !important; | |
| 1879 | Tilføjet | } | |
| 1880 | Tilføjet | } | |
| 1881 | Tilføjet | /* /validiscan:reduced-motion-guard */ |
Shopware: opskrift reduced-motion-guard
Vis før og efter (1)
Resources/app/storefront/src/main.js Ændringer i Resources/app/storefront/src/main.js: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 139 | 139 | }); | |
| 140 | 140 | }); | |
| 141 | 141 | ||
| 142 | Fjernet | if (options.autoplay === true) { | |
| 142 | Tilføjet | 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 Ændringer i Resources/app/storefront/src/scss/base.scss: 14 tilføjet, 0 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 1708 | 1708 | margin: 8px 0 0; | |
| 1709 | 1709 | font-size: 0.875rem; | |
| 1710 | 1710 | } | |
| 1711 | Tilføjet | ||
| 1712 | Tilføjet | /* validiscan:reduced-motion-guard */ | |
| 1713 | Tilføjet | /* Honour the visitor's reduced-motion setting: animations and transitions end at once, no smooth scrolling. */ | |
| 1714 | Tilføjet | @media (prefers-reduced-motion: reduce) { | |
| 1715 | Tilføjet | *, | |
| 1716 | Tilføjet | *::before, | |
| 1717 | Tilføjet | *::after { | |
| 1718 | Tilføjet | animation-duration: 0.01ms !important; | |
| 1719 | Tilføjet | animation-iteration-count: 1 !important; | |
| 1720 | Tilføjet | transition-duration: 0.01ms !important; | |
| 1721 | Tilføjet | scroll-behavior: auto !important; | |
| 1722 | Tilføjet | } | |
| 1723 | Tilføjet | } | |
| 1724 | Tilføjet | /* /validiscan:reduced-motion-guard */ |
WooCommerce: opskrift reduced-motion-guard
Vis før og efter (1)
assets/css/main.css Ændringer i assets/css/main.css: 13 tilføjet, 0 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 794 | 794 | color: #999; | |
| 795 | 795 | cursor: pointer; | |
| 796 | 796 | } | |
| 797 | Tilføjet | ||
| 798 | Tilføjet | /* validiscan:reduced-motion-guard */ | |
| 799 | Tilføjet | @media (prefers-reduced-motion: reduce) { | |
| 800 | Tilføjet | *, | |
| 801 | Tilføjet | *::before, | |
| 802 | Tilføjet | *::after { | |
| 803 | Tilføjet | animation-duration: 0.01ms !important; | |
| 804 | Tilføjet | animation-iteration-count: 1 !important; | |
| 805 | Tilføjet | transition-duration: 0.01ms !important; | |
| 806 | Tilføjet | scroll-behavior: auto !important; | |
| 807 | Tilføjet | } | |
| 808 | Tilføjet | } | |
| 809 | Tilføjet | /* /validiscan:reduced-motion-guard */ |
Magento: opskrift reduced-motion-guard
Vis før og efter (1)
app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Ændringer i app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 9 tilføjet, 0 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 1264 | 1264 | height: 18px; | |
| 1265 | 1265 | stroke-width: 3; | |
| 1266 | 1266 | } | |
| 1267 | Tilføjet | ||
| 1268 | Tilføjet | /* validiscan:reduced-motion-guard */ | |
| 1269 | Tilføjet | @media (prefers-reduced-motion: reduce) { | |
| 1270 | Tilføjet | .product-label, | |
| 1271 | Tilføjet | .slick-track { | |
| 1272 | Tilføjet | animation: none; | |
| 1273 | Tilføjet | } | |
| 1274 | Tilføjet | } | |
| 1275 | Tilføjet | /* /validiscan:reduced-motion-guard */ |
app/design/frontend/Validiscan/fixture/web/css/styles-m.css Ændringer i app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 9 tilføjet, 0 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 1232 | 1232 | height: 18px; | |
| 1233 | 1233 | stroke-width: 3; | |
| 1234 | 1234 | } | |
| 1235 | Tilføjet | ||
| 1236 | Tilføjet | /* validiscan:reduced-motion-guard */ | |
| 1237 | Tilføjet | @media (prefers-reduced-motion: reduce) { | |
| 1238 | Tilføjet | .product-label, | |
| 1239 | Tilføjet | .slick-track { | |
| 1240 | Tilføjet | animation: none; | |
| 1241 | Tilføjet | } | |
| 1242 | Tilføjet | } | |
| 1243 | Tilføjet | /* /validiscan:reduced-motion-guard */ |
Begynd med et gratis tjek af din webshop.
Send din webshops adresse. Validiscan scanner den og svarer med hver fejl, scanningen kan påvise, med siden og koden.
Bestil et gratis tjekEller skriv til info@validiscan.com.
Hvad det gratis tjek omfatter, og hvad det udelader- Du sender
- din webshops adresse
- Sider, der scannes
- op til 15
- Du får
- hver fejl, scanningen kan påvise, med siden og koden
- På din webshop
- kun offentlige sider; intet login, intet købt, ingen formularer sendt
- Hvad det ikke er
- et fuldt audit