Steve Faulkner hat hier eine clevere Idee. Man kann eine (animierte) GIF anzeigen und einen Pause/Wiedergabe-Button darüber legen – der eigentlich ein <details>/<summary>-Element ist. Wenn es umgeschaltet wird, überdeckt eine (nicht animierte) JPG-Datei innerhalb der GIF sie und "pausiert" sie effektiv.
Adrian Roselli nennt es eine "schnelle und schmutzige" Methode, um das WCAG Success Criterion 2.2.2 Pause, Stop, Hide zu erfüllen.
Ich habe sie geforkt, alle Bilder ausgetauscht, sodass zuerst das JPG angezeigt wird, und loading="lazy" auf die Bilder gesetzt. Es scheint die GIF effektiv erst zu laden, wenn man explizit auf Wiedergabe drückt, das ist also auch eine Option.
Diese Bibliothek sieht vielversprechend aus, um GIFs zu pausieren/abzuspielen: https://github.com/buzzfeed/libgif-js
Verwandt: https://christianheilmann.com/2020/07/16/a-css-only-click-to-animate-gif-solution/
Das scheint der falsche Weg zu sein. Meiner Meinung nach wäre die Verwendung eines Videoelements mit etwas wie einer MP3-Datei wesentlich effektiver.
Das scheint auch die GIF nicht wirklich zu pausieren. Das kommt dem Stoppen der GIF näher. Wenn man sie wieder startet, wird man feststellen, dass sie nicht dort ist, wo man sie erwartet hat. Das ist eine viel schlechtere UX, als die GIF einfach in ein Video umzuwandeln oder GIFs gar nicht zuzulassen.
Niedlich. Eine weitere Option wäre, basierend auf der Erkennung reduzierter Bewegung zu entscheiden, ob mit einer statischen oder animierten Darstellung begonnen werden soll :)
Nun, es ist nicht wirklich eine Pause. Die GIF spielt im Hintergrund weiter und das pausierte Bild ist nicht dort, wo der Benutzer pausiert hat. Es kann für sehr kurze GIFs besser funktionieren, ist aber für längere verwirrend.
Eine GIF ist dafür gedacht, eine Schleifen-Bild zu sein. Das wird von den meisten, wenn nicht allen, Benutzern verstanden.
Das Stoppen einer GIF (in diesem Fall Pausieren) und das Starten von diesem genauen Punkt aus ist für Nicht-Entwickler-Benutzer nicht von Belang. Sie läuft in einer Schleife. Sie wird innerhalb von Sekunden zu diesem Punkt zurückkehren.
Die meisten GIFs haben eine kurze Dauer. Für GIFs mit einer Dauer von über 5 Sekunden wird empfohlen, sie durch Video zu ersetzen. Die von diesem Artikel vorgeschlagene Lösung ist gut, wenn sie im entsprechenden Kontext kurzer GIFs verwendet wird.
Barrierefreiheit und Funktionalität werden vom Browser gehandhabt, was fast immer besser ist als Nicht-HTML- oder JavaScript-Lösungen.
Ich sehe diese Lösung als eine Ergänzung zum Werkzeugkasten eines Entwicklers für Fälle, die sie erfordern. Sie fälschlicherweise als völlig nutzlos zu kritisieren (insbesondere, weil Sie sie nicht zuerst erfunden haben) ist frivolous und kleinlich.
Das hat bei mir unter Chrome nicht funktioniert, ein besseres Ergebnis habe ich erzielt, indem ich einfach das Skript so geändert habe, dass es standardmäßig auf statisch (geschlossen) gesetzt wird und das Attribut "open" nach der Überprüfung von "prefers-reduced-motion" hinzufügt. https://codepen.io/phillipkent/pen/yLJwKNm
OH, Moment – ich mag meine Methode immer noch besser, aber das eigentliche Problem, das ich in diesem Pen hatte, ist die zusätzliche Klammer ')' in Zeile 1 des JS ♂️