[accessibility] Respecteer reduced motion bij avatars

[Lucb1e]

1. Welk probleem ervaar je?

Ik vind het lastig tekst te lezen op een pagina wanneer ernaast iets probeert mijn aandacht te trekken

2. Waarom is dat een probleem?

• Ik lees reacties op Tweakers graag
• Andere mensen hebben graag flashy avatars

3. Hoe vaak loop je er tegenaan?

Misschien elke tweede of derde keer dat ik een artikel open en de reacties lees is er wel iemand met zo'n avatar

4. Hoe ziet de ideale oplossing er voor jou uit?

Idealiter wordt de toegankelijkheidsoptie prefers-reduced-motion uitgelezen om te bepalen of avatars op het scherm bewegen

Overwegingen:

Er zijn avatars die leuk zijn wanneer ze bewegen, bijvoorbeeld op het Factorio forum heb ik door iemands avatar geleerd dat je kan vissen met een inserter (heel af en toe komt in de gif een vis voorbij die dan uit het water geplukt wordt). Zulke avatars algeheel verbieden lijkt me daarom niet leuk

Daarnaast verschilt het ook per persoon. Je kan als middenweg wellicht "flashy" avatars verbieden, naar eigen inzicht met als regel dat het oké is tot bijv. twee verschillende gebruikers (anoniem) aangeven er last van te hebben, maar alsnog zullen sommige mensen zich storen aan de beperking en andere mensen zich storen aan de beweging. Een voorkeur in het profiel zou daarom handig zijn, maar dat moet een bezoeker dan per website instellen (en weten dat de optie bestaat op deze site).

De generieke oplossing die voor elke website al bestaat is de genoemde toegankelijkheidsoptie. Met accessibilityfeatures in de browser of, in dit geval, het besturingssysteem, kunnen mensen zelf instellen wat ze nodig hebben. Op MDN kun je checken of de optie aanstaat: dit bewegende vierkant is groen als het aanstaat, of paars als het uitstaat

Complexiteit van implementatie:

Ik zie in de URL dat gifsicle gebruikt wordt:

code:

https://tweakers.net/i/FvxoHPJl1BtZ7oWjlSTr2_R4SHw=/x/filters:gifsicle():strip_exif()/u/1231784/crop5dbadd4473f9b_cropped.gif?f=community

Als de gifsicle library voor PHP vergelijkbare functionaliteit heeft met de command-line tool die ik ken, dan zou het triviaal zijn om het eerste frame eruit te halen met 1 regel code:

code:

gifsicle input.gif "#0"

Natuurlijk heeft het meer voeten in aarde (zoals de URL aanpassen a.d.h.v. de reduced-motion-optie), maar met een beetje geluk is het ook totaal niet complex

Uitlezen in de client kan met Javascript: matchMedia("(prefers-reduced-motion: reduce)") -> boolean. Alternatief kunnen beide avatar-URL's op de pagina staan en de juiste geselecteerd worden in een CSS media query.

Een andere optie is om de HTTP request header uit te lezen, maar dat is in Firefox en Safari nog niet geïmplementeerd. Een eerste versie zou wel op basis van deze header kunnen werken (en dan zien of Mozilla en Apple het ondertussen geïmplementeerd hebben), want op die manier is het nóg makkelijker om te gaan ondersteunen gezien het hele Javascript- of HTML+CSS-deel niet meer nodig is

[DaFeliX]

Ik heb hier als gebruiker ook last van. Als ik ingelogd ben, gebruik ik custom css om alle gifjes te verbergen, maar liever zie ik hier een 'echte' oplossing voor.

We gebruiken overigens de prefers-reduced-motion nu wel, zij het zeeer beperkt (voor het slide-in effect van de zijbalk, en in twee geanimeerde smilies). Maar we doen het nu nergens voor user generated content.

Deze flag gebruiken om een andere avatar in te laden lijkt me het meeste werk te kosten; in Thumbor hier een still van maken is eenvoudig (Thumbor gebruikt onderhuids gifsicle, maar die gebruiken wij niet direct).

[Lucb1e]

Ik gebruik Tweakers meestal niet-ingelogd; het custom-CSS-systeem kende ik niet! Heb dat nu aangevinkt om ook te gebruiken, thanks (ook al werkt het dan alleen werkt wanneer ik ingelogd ben)