{"id":9190,"date":"2024-06-20T16:14:29","date_gmt":"2024-06-20T14:14:29","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?p=9190"},"modified":"2025-01-29T09:28:30","modified_gmt":"2025-01-29T07:28:30","slug":"barrierefreiheit-ein-plaedoyer-fuer-disabled-buttons","status":"publish","type":"post","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-ein-plaedoyer-fuer-disabled-buttons\/","title":{"rendered":"Barrierefreiheit von Disabled Buttons"},"content":{"rendered":"<figure id=\"attachment_9191\" aria-describedby=\"caption-attachment-9191\" style=\"width: 150px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/silta-news-150x150.jpg\" alt=\"\" width=\"150\" height=\"150\" class=\"size-thumbnail wp-image-9191\" \/><figcaption id=\"caption-attachment-9191\" class=\"wp-caption-text\">Newsletter-Formular von Silta mit ausgegrautem Button<\/figcaption><\/figure>\n<p>Vor einigen Monaten gab es einen l\u00e4ngeren kritischen Artikel zur Barrierefreiheit von Disabled Buttons. Tenor war, dass diese Buttons vermieden werden sollten. Um den Artikel zu lesen, muss man ein Medium-Mitglied sein. deshalb habe ich auf die Lekt\u00fcre des Beitrags &#8222;Never, ever disable buttons \u2014 Requirements for an accessible solution&#8220; verzichtet, daf\u00fcr gibt es auch keinen Link. Allein der Titel ist Unsinn, es gibt wenige Standard-Elemente, die im Kontext der Barrierefreiheit nie eingesetzt werden sollten und f\u00fcr disabled buttons ist die Aussage zu pauschal.<\/p>\n<p>Disabled hei\u00dft in dem Kontext, dass Buttons zwar im User Interface vorhanden, aber nicht anklickbar sind, visuell sind sie in der Regel ausgegraut und in der Accessibility API werden sie als Element mit der richtigen Rolle, also zum Beispiel &#8222;Button&#8220;, aber als nicht aktivierbar ausgegeben. NVDA sagt zum Beispiel &#8222;nicht verf\u00fcgbar&#8220;.<\/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\/barrierefreiheit-ein-plaedoyer-fuer-disabled-buttons\/#Keine_technische_Herausforderung\" >Keine technische Herausforderung<\/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\/barrierefreiheit-ein-plaedoyer-fuer-disabled-buttons\/#Disabled_oder_Hidden\" >Disabled oder Hidden<\/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\/barrierefreiheit-ein-plaedoyer-fuer-disabled-buttons\/#Zum_Weiterlesen\" >Zum Weiterlesen<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Keine_technische_Herausforderung\"><\/span>Keine technische Herausforderung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Rein technisch gibt es mit der Barrierefreiheit kein Problem. Selbst Olles HTML bietet den State Disabled. Das Gegen-Argument lautet dass man erst am Ende eines Formulars feststellt, dass das Formular nicht verschickt werden kann. Allerdings ist meines Erachtens ein gewichtigeres Problem vorhanden, wenn der Button trotz Fehlern aktiviert werden kann. Die Screenreader-Nutzerin merkt erst nach dem Abschicken und dem Neu-Rendern der Seite durch den Screenreader, dass es ein Problem gab, \u00e4rgerlich vor allem bei umfangreichen Seiten. Stellen wir uns etwa ein Newsletter-Formular vor, welches relativ am Ende einer Unterseite ist. Auch besteht die Gefahr, dass die Nutzerin bei statischen Formularen gar nicht merkt, dass ein Fehler aufgetreten ist. Wie oft schickt man ein Formular ab und geht nicht noch mal sicher &#8211; oder bekommt keine Best\u00e4tigung &#8211; dass es geklappt hat? Aus meiner Sicht ist das ein Argument f\u00fcr Disabled Buttons und deren Zug\u00e4nglichkeit.<\/p>\n<p>Etwas anders ist die Situation bei dynamisch validierten Formularen. Hier kann man die Nutzerin bei Klick auf den Button mit einer Meldung auf das Problem hinweisen und den Fokus auf das eventuell falsche Formular-Element legen. Bei Newslettern ist das h\u00e4ufig die Checkbox zum Datenschutz.<\/p>\n<figure id=\"attachment_9192\" aria-describedby=\"caption-attachment-9192\" style=\"width: 150px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/db-bahn-150x150.jpg\" alt=\"\" width=\"150\" height=\"150\" class=\"size-thumbnail wp-image-9192\" \/><figcaption id=\"caption-attachment-9192\" class=\"wp-caption-text\">Formular der Deutschen Bahn zur Bestellung einer Mobilit\u00e4tshilfe.<\/figcaption><\/figure>\n<p>Das Problem beginnt hier buchst\u00e4blich gesprochen schon fr\u00fcher in schlechtem Formular-Design. Wenn Fehler automatisch festgestellt werden k\u00f6nnen, m\u00fcssen die Nutzerinnen sp\u00e4testens darauf hingewiesen werden, wenn sie das jeweilige Formular-Element verlassen. Ich bin ja generell kein Fan des User-Interfaces der Deutschen Bahn, aber zumindest kriegen sie das gut hin. Sie machen das in dem Interface, in welchem man eine Mobilit\u00e4tshilfe online anfordern kann.<br \/>\nVerl\u00e4sst man ein Pflichtfeld ohne oder mit falscher Angabe, wird man sofort darauf hingewiesen. Entscheidend ist also nicht der Disabled Button, sondern ein gutes Fehlermanagement im Formular. Dazu geh\u00f6rt die dynamische Validierung von Eingabenund die korrekte Ausweisung von Pflichtfeldern. Das erreicht man, indem man zum Beispiel &#8222;Pflichtfeld&#8220; in das Label schreibt und ARIA required verwendet.<\/p>\n<p>Nat\u00fcrlich wird es immer noch Leute geben, die das Formular falsch ausf\u00fcllen. Aber wie oben gesagt kann man das durch ein vern\u00fcnftiges Fehler-Management reduzieren und dann ist der Button nicht mehr disabled, wenn man ihn erreicht.<\/p>\n<p>Auch spricht nichts dagegen, vor bzw. auf dem Disabled Button Informationen dazu zu geben, warum der Button nicht aktiviert werden kann. F\u00fcr Sehende kann das durch eine eingeblendete Meldung, f\u00fcr Blinde durch ein ARIA Label passieren.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Disabled_oder_Hidden\"><\/span>Disabled oder Hidden<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Es gibt auch die M\u00f6glichkeit, Elemente f\u00fcr assistive Technologie komplett auszublenden, entweder \u00fcber ARIA Hidden oder display:none. Generell halte ich das Verstecken solcher Elemente nicht f\u00fcr sinnvoll. Das Problem ist, dass Blinde dann nicht lernen k\u00f6nnen, welche Optionen zur Verf\u00fcgung stehen und wo sie sich befinden, sofern sie aktuell nicht angezeigt werden.<\/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\/fehler-management-in-der-digitalen-barrierefreiheit\/\">Fehler-Management bei Formularen<\/a><\/li>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-von-placeholder-texten\/\">Barrierefreiheit von Placeholder-Texten<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Vor einigen Monaten gab es einen l\u00e4ngeren kritischen Artikel zur Barrierefreiheit von Disabled Buttons. Tenor war, dass diese Buttons vermieden werden sollten. Um den Artikel&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-ein-plaedoyer-fuer-disabled-buttons\/\">Weiterlesen<span class=\"screen-reader-text\">Barrierefreiheit von Disabled Buttons<\/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-9190","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\/9190","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=9190"}],"version-history":[{"count":10,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/9190\/revisions"}],"predecessor-version":[{"id":9197,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/9190\/revisions\/9197"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=9190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/categories?post=9190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/tags?post=9190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}