voorkeur voor beperkte beweging beeldscherm

Verminder beweging detecteert of de gebruiker de voorkeur voor gereduceerde beweging heeft geactiveerd om het aantal bewegingen en animaties te minimaliseren. Het heeft twee waarden:

• geen voorkeur:
  Geeft aan dat de gebruiker geen voorkeur kenbaar heeft gemaakt aan het systeem.
• verminder beweging:
  Geeft aan dat de gebruiker het systeem heeft laten weten dat hij de voorkeur geeft aan een interface die de hoeveelheid bewegingen of animaties minimaliseert, bij voorkeur tot het punt waarop alle niet-essentiële bewegingen worden verwijderd.

Deze voorkeur wordt meestal gebruikt door mensen die lijden aan vestibulaire stoornis of vertigo, waarbij verschillende bewegingen leiden tot evenwichtsverlies, migraine, misselijkheid of gehoorverlies. Als je ooit hebt geprobeerd snel te draaien en duizelig werd, weet je hoe dat voelt.

Beperkte beweging media query CSS website

In een mooi accessibility artikel van Eric Bailey stelt hij voor om alle animaties te stoppen met deze code:

@media screen and (prefers-reduced-motion: reduce) {  
  * {
    /* Zeer korte duur betekent dat JavaScript vertrouwt op events (gebeurtenissen) nog steeds werkt */
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

Populaire frameworks zoals Bootstrap hebben deze functie standaard ingeschakeld. Volgens mij is er geen excuus om prefers-reduced-motion niet te gebruiken – gebruik het gewoon.

Meer media queries en css voor toegankelijkheid

Met css media queries kun je de toegankelijkheid en accessibility verbeteren. Lees meer WordPress handleidingen: