{"id":6722,"date":"2022-06-28T17:07:33","date_gmt":"2022-06-28T15:07:33","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=6722"},"modified":"2024-03-21T10:57:47","modified_gmt":"2024-03-21T08:57:47","slug":"animationen-und-bewegungen-barrierefrei-gestalten","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/formen-von-einschraenkungen\/autismus\/animationen-und-bewegungen-barrierefrei-gestalten\/","title":{"rendered":"Animationen und Bewegungen barrierefrei gestalten"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/22-animationen\/embed?context=external&#038;theme=default\" style=\"border: 0\" border=\"0\" height=\"100\" width=\"100%\"><\/iframe><br \/>\nUnter Animationen und Bewegungen verstehe ich jede Form von Bewegung, die von der Nutzerin nicht intendiert ist. Wenn ich scrolle oder etwas anklicke, kann ich eine Reaktion erwarten. Wenn ich aber nichts tue, sollte sich auch nichts bewegen.<br \/>\nH\u00e4ufig zu finden sind von selbst abspilende Videos und Audios, durchtickende Bilder-Galerien, seltener auch dynamische Newsticker. Au\u00dferdem geh\u00f6ren auch Animationen via GIF, SVG und andere Technologien dazu. Einfache Effekte wie Ver\u00e4nderung einer Farbe oder Form bei Mausover sind Teil einer grafischen Benutzeroberfl\u00e4che und geh\u00f6ren nicht zu den zu vermeidenden Animationen.<br \/>\nHinweis: Wenn nicht anders beschrieben, handelt es sich um Pflicht-Kriterien. AAA-Kriterien entsprechen der h\u00f6chsten Stufe der Barrierefreiheit und m\u00fcssen in der Regel nicht fl\u00e4chendeckend auf einer gesamten Website umgesetzt werden. <\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/formen-von-einschraenkungen\/autismus\/animationen-und-bewegungen-barrierefrei-gestalten\/#Wichtige_Zielgruppen\" >Wichtige Zielgruppen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/formen-von-einschraenkungen\/autismus\/animationen-und-bewegungen-barrierefrei-gestalten\/#231_Three_Flashes_or_Below_Threshold_und_232_Three_Flashes\" >2.3.1 Three Flashes or Below Threshold und 2.3.2 Three Flashes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/formen-von-einschraenkungen\/autismus\/animationen-und-bewegungen-barrierefrei-gestalten\/#222_Pause_Stop_Hide\" >2.2.2 Pause, Stop, Hide<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/formen-von-einschraenkungen\/autismus\/animationen-und-bewegungen-barrierefrei-gestalten\/#233_Animation_from_Interactions\" >2.3.3  Animation from Interactions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/formen-von-einschraenkungen\/autismus\/animationen-und-bewegungen-barrierefrei-gestalten\/#Mindest-Kontrast_bei_wechselnden_Inhalten\" >Mindest-Kontrast bei wechselnden Inhalten<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/formen-von-einschraenkungen\/autismus\/animationen-und-bewegungen-barrierefrei-gestalten\/#Reduzierte_Animationen_durch_Nutzer-Einstellungen\" >Reduzierte Animationen durch Nutzer-Einstellungen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/formen-von-einschraenkungen\/autismus\/animationen-und-bewegungen-barrierefrei-gestalten\/#Trigger-Warnungen\" >Trigger-Warnungen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/formen-von-einschraenkungen\/autismus\/animationen-und-bewegungen-barrierefrei-gestalten\/#Wer_moechte_Animationen_und_permanente_Bewegungen\" >Wer m\u00f6chte Animationen und permanente Bewegungen?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Wichtige_Zielgruppen\"><\/span>Wichtige Zielgruppen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Im Wesentlichen gibt es drei Gruppen, f\u00fcr die das Thema relevant sein kann:<\/p>\n<ul>\n<li>Epileptiker:Innen<\/li>\n<li>Autist:Innen<\/li>\n<li>Personen mit weiteren Anfalls-Erkrankungen, dazu k\u00f6nnen etwa Migr\u00e4ne-Erkrankte geh\u00f6ren<\/li>\n<\/ul>\n<p>Das Thema epileptische Anf\u00e4lle und Trigger f\u00fcr Autist:Innen ist weitgehend bekannt. Die Betroffenen k\u00f6nnen durch st\u00e4ndige Bewegung oder Blitzen\/Flackern getriggert werden bzw. Anf\u00e4lle bekommen.<br \/>\nDie dritte Gruppe wird seltener genannt: Effekte wie Parallax k\u00f6nnen bei einigen Personen Migr\u00e4ne und vielleicht noch andere Dinge ausl\u00f6sen.<br \/>\nLast not least sind Bewegungen ein stetiger Punkt der Ablenkung. Auch wenn wir woanders hinschauen, wird das Auge durch Bewegung angelockt. Das kann f\u00fcr Menschen mitADHS relevant sein.<br \/>\nDie f\u00fcr das Thema wichtigen Anforderungen finden wir vor allem in der Guideline 2.3 Seizures and Physical Reactions. Schauen wir uns das einmal genauer an. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"231_Three_Flashes_or_Below_Threshold_und_232_Three_Flashes\"><\/span>2.3.1 Three Flashes or Below Threshold und 2.3.2 Three Flashes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Diese Erfolgskriterien besagen, dass Blitzen und Flackern mit einer H\u00e4ufigkeit von mehr als drei Mal pro Sekunde nicht erlaubt sind.<br \/>\n2.3.1 erlaubt Blitzen und Flackern auf einer sehr kleinen Fl\u00e4che oder wenn sie schwach ausgepr\u00e4gt sind. 2.3.2 ist ein AAA-Erfolgskriterium und erlaubt kein Blitzen oder Flackern f\u00fcr mehr als 3 Mal pro Sekunde, auch wenn es nur um ein einzelnes Pixel geht.<br \/>\nDas gilt auch f\u00fcr Inhalte innerhalb von Videos. Es gibt das ber\u00fchmte Beispiel eines japanischen Zeichentrickfilms, der bei tausenden von Kindern epileptische Anf\u00e4lle ausgel\u00f6st hat. Das Thema muss also auch bei der Konzeption von Videos beachtet werden.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"222_Pause_Stop_Hide\"><\/span>2.2.2 Pause, Stop, Hide<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Dieses AA-Kriterium bezieht sich auf Bewegungen, die nicht durch Nutzerinnenverhalten wie Klicken oder Scrollen ausgel\u00f6st werden  wie Bilder-Karussels oder selbststartende Videos oder Animationen. Wenn sie nicht innerhalb von f\u00fcnf Sekunden von selbst stoppen sollen sie durch die Nutzerin angehalten, pausiert oder ausgeblendet werden k\u00f6nnen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"233_Animation_from_Interactions\"><\/span>2.3.3  Animation from Interactions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>2.3.3 ist eine AAA-Anforderung. Hier geht es um Bewegungen wie Parallax-Effekte. Parallax und \u00e4hnliche Effekte stehen im Verdacht, dass sie bei einigen Menschen Migr\u00e4ne- und andere Anf\u00e4lle triggern k\u00f6nnen.<br \/>\nHier geht es um Bewegung, die tats\u00e4chlich durch die Nutzerin ausgel\u00f6st, aber nicht intendiert ist. Wenn etwa bei Parallax sich der Hintergrund in einer anderen Geschwindigkeit bewegt als der gescrollte Content, ist das nicht erwartungskonform. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Mindest-Kontrast_bei_wechselnden_Inhalten\"><\/span>Mindest-Kontrast bei wechselnden Inhalten<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ein h\u00e4ufig zu findender Fehler sind auch wechselnde Hintergr\u00fcnde und der Mindest-Kontrast. Selten ist der Kontrast eines Textes so abgestimmt, dass er auch bei wechselnden Hintergr\u00fcnden die Anforderungen erf\u00fcllt.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Reduzierte_Animationen_durch_Nutzer-Einstellungen\"><\/span>Reduzierte Animationen durch Nutzer-Einstellungen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Meines Wissens unterst\u00fctzen alle Mainstream-Betriebssysteme einen Modus, welcher Animationen und Bewegungen des Systems selbst reduziert. Dieser Modus kann von Apps, Webseiten oder Programmen unterst\u00fctzt werden.<br \/>\nDie Anwendung fragt ab, ob diese Einstellung aktiviert ist und schaltet dann ggf. die Animationen ab. Bei Webseiten kann das mit dem CSS Media Query &#8222;prefer-reduced-motion &#8220; abgefragt werden. Wenn dieses Query aktiviert ist, werden Animationen gestoppt, vorausgesetzt nat\u00fcrlich, die Webseite wurde entsprechend programmiert.<br \/>\nAlternativ kann man oben auf der Website einen Button anbieten, um auf der Seite verwendete Animationen zu stoppen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Trigger-Warnungen\"><\/span>Trigger-Warnungen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Trigger-Warnungen sind meines Wissens bisher nirgendwo vorgeschrieben, sind aber durchaus sinnvoll. Es gibt zwei F\u00e4lle, in denen Sie \u00fcber eine Trigger-Warnung nachdenken sollten:<\/p>\n<ul>\n<li>Die Animation ist notwendig, etwa als Teil einer Verifikation oder Pr\u00fcfungs-Aufgabe.<\/li>\n<li>Sie haben keine M\u00f6glichkeit, die Animation abzuschalten, zum Beispiel, weil sie \u00fcber eine andere Anwendung reinkommt<\/li>\n<\/ul>\n<p>Eine Trigger-Warnung muss, damit sie sinnvoll ist erscheinen, bevor die Animation startet. Die Nutzerin muss gen\u00fcgend Zeit haben, die Warnung wahrzunehmen. Das hei\u00dft, es sollten mindestens 5 Sekunden vergehen, bis die Animation erscheint oder die Person sollte sie selbst ausl\u00f6sen m\u00fcssen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wer_moechte_Animationen_und_permanente_Bewegungen\"><\/span>Wer m\u00f6chte Animationen und permanente Bewegungen?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Animationen und Bewegungen sind vor allem bei Designerinnen und Kunden beliebt. Sie unterstreichen die F\u00e4higkeit der Entwicklerinnen und die Modernit\u00e4t des Kunden &#8211;  auch wenn Trends schon total ausgelutscht sind. Erinnert sich noch jemand an den kleinen Hype um Parallax?<br \/>\nDass diese Trends aber auch relativ schnell wieder abflauen zeigt auch, dass sie nicht nachhaltig bei der Konsumentin wirken. Probieren Sie mal aus, wie viele Besucherinnen die Effekte starten, wenn sie per Default abgeschaltet sind und aktiv ausgel\u00f6st werden m\u00fcssen. Das d\u00fcrfte relativ selten passieren: Ausnahme sind Multimedia-Inhalte, die der Kern der jeweiligen Unterseite sind.<br \/>\n<a href=\"https:\/\/www.netz-barrierefrei.de\/en\/animations.html\">Accessibility for Animations and Motion<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Unter Animationen und Bewegungen verstehe ich jede Form von Bewegung, die von der Nutzerin nicht intendiert ist. Wenn ich scrolle oder etwas anklicke, kann ich&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/formen-von-einschraenkungen\/autismus\/animationen-und-bewegungen-barrierefrei-gestalten\/\">Weiterlesen<span class=\"screen-reader-text\">Animationen und Bewegungen barrierefrei gestalten<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":872,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6722","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/6722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/comments?post=6722"}],"version-history":[{"count":9,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/6722\/revisions"}],"predecessor-version":[{"id":9005,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/6722\/revisions\/9005"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/872"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=6722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}