{"id":8802,"date":"2024-01-14T16:11:55","date_gmt":"2024-01-14T14:11:55","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?p=8802"},"modified":"2024-02-04T16:14:13","modified_gmt":"2024-02-04T14:14:13","slug":"toast-messages-sind-nicht-barrierefrei","status":"publish","type":"post","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/toast-messages-sind-nicht-barrierefrei\/","title":{"rendered":"Toast-Messages sind nicht barrierefrei"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/toast-1024x576.jpg\" alt=\"Toast-Message von Google\" width=\"474\" height=\"267\" class=\"alignleft size-large wp-image-8803\" srcset=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/toast-1024x576.jpg 1024w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/toast-300x169.jpg 300w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/toast-768x432.jpg 768w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/toast-1536x864.jpg 1536w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/toast.jpg 1920w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/>Toast Messages in digitalen Anwendungen beziehen sich auf kleine Benachrichtigungen oder Meldungen, die kurzzeitig auf dem Bildschirm erscheinen, um die Benutzerin \u00fcber eine bestimmte Aktion oder einen Status zu informieren.<br \/>\nHier sind einige Merkmale von Toast Messages:<\/p>\n<ul>\n<li>Toast-Nachrichten erscheinen nur f\u00fcr einen kurzen Zeitraum auf dem Bildschirm, oft nur f\u00fcr einige Sekunden. Sie sollen den Benutzer nicht \u00fcberm\u00e4\u00dfig st\u00f6ren.<\/li>\n<li>Im Gegensatz zu gro\u00dfen, modaleren Benachrichtigungen st\u00f6ren Toasts nicht den aktuellen Arbeitsfluss des Benutzers. Sie sind eher subtil und st\u00f6ren die Sicht auf den Hauptinhalt der Anwendung nicht.<\/li>\n<li>Toasts erscheinen oft in der N\u00e4he des Bildschirmrandes, beispielsweise oben oder unten.<\/li>\n<\/ul>\n<p>Beispiele f\u00fcr Toast-Nachrichten sind Meldungen wie &#8222;Erfolgreich gespeichert&#8220;, &#8222;Nachricht gesendet&#8220; oder &#8222;Verbindung hergestellt&#8220;. Sie bieten eine einfache und effektive M\u00f6glichkeit, der Benutzerin Feedback zu geben, ohne dabei zu aufdringlich zu sein<\/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\/toast-messages-sind-nicht-barrierefrei\/#Technische_und_andere_Barrieren\" >Technische und andere Barrieren<\/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\/toast-messages-sind-nicht-barrierefrei\/#Toast-Messages_selten_sinnvoll\" >Toast-Messages selten sinnvoll<\/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\/toast-messages-sind-nicht-barrierefrei\/#Alternativen\" >Alternativen<\/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\/toast-messages-sind-nicht-barrierefrei\/#Zum_Weiterlesen\" >Zum Weiterlesen<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Technische_und_andere_Barrieren\"><\/span>Technische und andere Barrieren<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Auch wenn es grunds\u00e4tzlich m\u00f6glich ist, Toast-Messages zug\u00e4nglich zu machen, w\u00fcrde ich von deren Einsatz abraten, mit ein paar Ausnahmen, die unten genannt werden.<br \/>\nWenn die Toast-Message ein interaktives Element enth\u00e4lt, etwa das L\u00f6schen einer Nachricht r\u00fcckg\u00e4ngig machen wie bei GMail, ist das zwar nett, aber dann ist es keine Toast-Message, der Blinde wei\u00df nicht, wo die Nachricht aufpoppt im Accessibility Tree und kann nicht dorthin navigieren. Weiterhin kann es sein, dass der Blinde mit dem Ger\u00e4t interagiert, w\u00e4hrend die Message vorgelesen wird und dadurch die Ausgabe der Message abgebrochen wird. Es gibt aber meines Wissens keine M\u00f6glichkeit, sich die Message noch einmal ausgeben zu lassen. Das Gleiche Problem haben reine Tastatur-Nutzerinnen. F\u00fcr motorisch Behinderte ist es aufgrund der geringen Zeitspanne meistens nicht m\u00f6glich, das Element zu erreichen, um mit ihm zu interagieren, sofern es \u00fcberhaupt barrierefrei eingebunden ist.<br \/>\nF\u00fcr Sehbehinderte, die mit Bildschirm-Vergr\u00f6\u00dferung arbeiten ist es fast nicht m\u00f6glich, die Message wahrzunehmen. Das w\u00fcrde erfordern, dass sie sich genau dort aufhalten wo die Message aufpoppt und das ist sehr unwahrscheinlich. Meine alte Newsletter-Software hatte Fehlermeldungen als Toast-Messages oben rechts ausgegeben und ich habe sie einmal zuf\u00e4llig entdeckt. Das hat mich viele Fehlversuche gekostet. Fehlermeldungen sollten keine Toast-Messages sein.<br \/>\nToast-Messages versto\u00dfen eigentlich immer gegen das Erfolgskriterium 2.2.1 Timing Adjustable. Insbesondere Se- und kognitiv Behinderte haben nie gen\u00fcgend Zeit, die Nachricht zu lesen, die Anzeige-Dauer ist kurz, nicht anpassbar und die Nachricht kann nicht wieder aufgerufen werden, zumindest habe ich noch nie entsprechende M\u00f6glichkeiten gesehen.<br \/>\nToast-Messages verfehlen h\u00e4ufig die Mindest-Vorgaben f\u00fcr die Kontraste. Da sie unaufdringlich sein sollen, sind Farb-Kombinationen wie hellGrau auf dunkelGrau nicht selten. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Toast-Messages_selten_sinnvoll\"><\/span>Toast-Messages selten sinnvoll<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Es gibt einige wenige F\u00e4lle, in denen Toast-Messages unproblematisch sein k\u00f6nnen: Das gilt vor allem dann, wenn die Information nicht kritisch ist: Eine Mail wurde erfolgreich gel\u00f6scht zum Beispiel. Es ist also dann sinnvoll, wenn ihre Wahrnehmung im Grunde nicht relevant ist. Wenn zum Beispiel eine Nachricht verschwindet, nachdem man auf L\u00f6schen getippt hat, ist klar, dass die Nachricht erfolgreich gel\u00f6scht wurde. Wenn der Status eines Elements sich ver\u00e4ndert, nachdem es angeklickt wurde ist klar, dass etwas passiert ist, daf\u00fcr ben\u00f6tigt man keine Toast.<br \/>\nEs ist richtig, dass Toast-Messages grunds\u00e4tzlich technisch barrierefrei gemacht werden k\u00f6nnen. Beispielsweise k\u00f6nnte sie so gestaltet werden, dass sie von den Nutzerinnen aktiv geschlossen werden muss. Das erfordert allerdings nach wie vor, dass man als Sehbehinderte in die Rand-Bereiche der Anwendung geht, was bei hohem Zoom relativ unwahrscheinlich ist. Die Chance ist am h\u00f6chsten, dass der Sehbehinderte oben links, also im Kopf der Applikation regelm\u00e4\u00dfig nachschaut, normalerweise nicht der Ort f\u00fcr Toasts. Au\u00dferdem k\u00f6nnen im Laufe einer Sitzung massenhaft Toasts zusammenkommen, dann gibt es das Problem, relevante von nicht-relevanten Nachrichten unterscheiden zu k\u00f6nnen.<br \/>\nAuch die M\u00f6glichkeit, die Anzeigedauer zu verl\u00e4ngern klingt plausibel, ist aber nicht praktikabel. Hierzu muss man an prominenter Stelle der Anwendung entsprechnde Funktionalit\u00e4ten bereitstellen, also wieder ein Icon und eine Einstellung mehr, deren Existenz und Bedeutung man herausfinden muss. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Alternativen\"><\/span>Alternativen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wie oben gesagt finde ich Toasts unproblematisch, solange die Meldung f\u00fcr die Applikation unkritisch ist. Bei Single-Page-Applikationen gibt es ansonsten nur wenige Alternativen: Entweder verzichtet man komplett auf sie, in GMail finde ich sie zum Beispiel wenig hilfreich. Wenn das Mail-Fenster geschlossen wird darf ich davon ausgehen, dass die Mail verschickt wurde, die Toast-Message ist da redundant. Oder man setzt auf Dialogboxen, die eine Interaktion erfordern. Das w\u00fcrde ich &#8211; wie oben gesagt &#8211; bei kritischen Informationen wie Fehlermeldungen immer machen.<br \/>\nEs ist sinnvoll, die Message dort aufpoppen zu lassen, wo die Meldung getriggert wurde. In der Regel basieren Toasts auf einer bestimmten Aktion der Nutzerin und sollten entsprechend dort angezeigt werden k\u00f6nnen, wo diese Aktion durchgef\u00fchrt wurde. Wie oben gesagt halte ich es aber f\u00fcr ausreichend, wenn das angeklickte Element seinen Status dauerhaft oder f\u00fcr einen ausreichend langen Zeitumfang ver\u00e4ndert, was nat\u00fcrlich auch per ARIA kommuniziert werden sollte.<br \/>\nIm Endeffekt sind Toasts auch aus der Sicht der Usability und User Experience nicht sinnvoll. Auch Sehende m\u00fcssen ihren Blick von dem fortbewegen, wo sie sich gerade befinden, denken Sie daran, dass die Bildschirme in den letzten Jahren immer gr\u00f6\u00dfer geworden sind. Toasts ziehen die Aufmerksamkeit auf sich, ohne in der Regel einen gro\u00dfen Mehrwert zu liefern, wenn sie wichtig w\u00e4ren, sollten sie keine Toasts sein. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Zum_Weiterlesen\"><\/span>Zum Weiterlesen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/konsistente-gestaltung-von-navigation-und-ui-elementen\/\">Konsistente Navigation und Identifikation<\/a><\/li>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-kontrasten-haeufige-probleme-und-loesungen\/\">Kontraste &#8211; h\u00e4ufige Probleme und L\u00f6sungen<\/a><\/li>\n<li> <a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-von-placeholder-texten\/\">Barrierefreiheit von Placeholder in Formularen<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Toast Messages in digitalen Anwendungen beziehen sich auf kleine Benachrichtigungen oder Meldungen, die kurzzeitig auf dem Bildschirm erscheinen, um die Benutzerin \u00fcber eine bestimmte Aktion&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/toast-messages-sind-nicht-barrierefrei\/\">Weiterlesen<span class=\"screen-reader-text\">Toast-Messages sind nicht barrierefrei<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8802","post","type-post","status-publish","format-standard","hentry","category-allgemein","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/8802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"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=8802"}],"version-history":[{"count":8,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/8802\/revisions"}],"predecessor-version":[{"id":8812,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/8802\/revisions\/8812"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=8802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/categories?post=8802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/tags?post=8802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}