{"id":9994,"date":"2025-04-08T18:50:54","date_gmt":"2025-04-08T16:50:54","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=9994"},"modified":"2025-04-08T18:53:37","modified_gmt":"2025-04-08T16:53:37","slug":"barrierefreie-web-formulare-die-basics","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/barrierefreie-web-formulare-die-basics\/","title":{"rendered":"Barrierefreie Web-Formulare &#8211; die Basics"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/300-barrierefreie-web-formulare-die-basics\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe><br \/>\nBarrierefreie Web-Formulare folgen alten Regeln. Dennoch werden immer wieder die gleichen Fehler gemacht. In diesem Beitrag fasse ich die wesentlichen Anforderungen zusammen. <\/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\/konzeption\/barrierefreie-web-formulare-die-basics\/#Must_Haves\" >Must Haves<\/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\/konzeption\/barrierefreie-web-formulare-die-basics\/#Best_Practices\" >Best Practices<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Must_Haves\"><\/span>Must Haves<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die folgenden Anforderungen sind durch geltende Richtlinien wie WCAG und EN vorgeschrieben.<\/p>\n<ol>\n<li><strong>Verwenden Sie m\u00f6glichst native und einfache Elemente<\/strong><br \/>\n            Verzichten Sie auf komplexe UI-Komponenten wie Multi-Selects oder individuell gestaltete Steuerelemente. Stattdessen sollten Sie bew\u00e4hrte, barrierearme HTML-Elemente wie Checkboxen und Radio-Buttons einsetzen. Diese sind nicht nur f\u00fcr Screenreader-Nutzer*innen besser zug\u00e4nglich, sondern bieten auch in der Tastaturbedienung und auf mobilen Ger\u00e4ten eine deutlich verbesserte Nutzererfahrung.\n        <\/li>\n<li><strong>Alle interaktiven Elemente m\u00fcssen vollst\u00e4ndig per Tastatur erreichbar und bedienbar sein<\/strong><br \/>\n            Stellen Sie sicher, dass Nutzer*innen ohne Maus s\u00e4mtliche Funktionen der Website oder Anwendung \u00fcber die Tastatur nutzen k\u00f6nnen. Dazu geh\u00f6rt sowohl die Navigation als auch das Ausl\u00f6sen und Ver\u00e4ndern von Bedienelementen. Eine durchdachte Fokusf\u00fchrung und die Vermeidung von versteckten oder nicht fokussierbaren Elementen sind dabei essenziell.\n        <\/li>\n<li><strong>Alle interaktiven Elemente ben\u00f6tigen einen zug\u00e4nglichen Namen<\/strong><br \/>\n            Damit assistive Technologien wie Screenreader Inhalte korrekt vermitteln k\u00f6nnen, muss jedes Bedienelement eindeutig benannt sein. In der Regel erfolgt dies durch ein sichtbares <code>&lt;label&gt;<\/code>-Element. Alternativ k\u00f6nnen auch <code>aria-label<\/code> oder <code>aria-labelledby<\/code> verwendet werden, um einem Element einen barrierefreien Namen zuzuweisen. So wird sichergestellt, dass Nutzer*innen mit assistiven Technologien die Funktion und Bedeutung eines Elements klar erfassen k\u00f6nnen.\n        <\/li>\n<li><strong>Jedes Formularfeld ben\u00f6tigt eine feste, visuell erkennbare Beschriftung<\/strong><br \/>\n            Die Beschriftung sollte bei Eingabefeldern idealerweise links oder oberhalb des Feldes platziert sein, bei Checkboxen und Radio-Buttons rechts daneben. Platzhaltertexte (<em>placeholder<\/em>) d\u00fcrfen nicht als Ersatz f\u00fcr Labels verwendet werden, da sie weder dauerhaft sichtbar noch zuverl\u00e4ssig von assistiven Technologien erkannt werden. Nur feste Labels gew\u00e4hrleisten eine konsistente Zug\u00e4nglichkeit und Verst\u00e4ndlichkeit \u2013 sowohl visuell als auch technisch.\n        <\/li>\n<li><strong>Beschriftungen und Fehlermeldungen m\u00fcssen klar und verst\u00e4ndlich formuliert sein<\/strong><br \/>\n            Verwenden Sie einfache, eindeutige Sprache, damit alle Nutzer*innen \u2013 unabh\u00e4ngig von technischen Vorkenntnissen oder kognitiven F\u00e4higkeiten \u2013 die Bedeutung erfassen k\u00f6nnen. Fehlerhinweise sollten pr\u00e4zise erkl\u00e4ren, was falsch gelaufen ist, und idealerweise konkrete Hinweise zur Korrektur geben. Vermeiden Sie Fachjargon oder allgemeine Aussagen wie \u201eFehler beim Absenden\u201c.\n        <\/li>\n<li><strong>Verwenden Sie passende <code>autocomplete<\/code>-Attribute f\u00fcr nutzerbezogene Eingaben<\/strong><br \/>\n            Wenn Nutzer*innen pers\u00f6nliche Daten wie Name, E-Mail-Adresse oder Zahlungsinformationen eingeben, erleichtern korrekt gesetzte <code>autocomplete<\/code>-Attribute die Nutzung erheblich. Sie erm\u00f6glichen es Browsern und assistiven Technologien, Eingaben vorzuschlagen und automatisch zu vervollst\u00e4ndigen \u2013 das spart Zeit, reduziert Fehler und verbessert die Zug\u00e4nglichkeit f\u00fcr alle.\n        <\/li>\n<li><strong>Verwenden Sie <code>fieldset<\/code> und <code>legend<\/code>, um zusammengeh\u00f6rige Formularinhalte semantisch zu gruppieren<\/strong><br \/>\n            Wenn mehrere Eingabefelder thematisch zusammengeh\u00f6ren \u2013 etwa Auswahlm\u00f6glichkeiten innerhalb einer Kategorie \u2013 sollten sie mit einem <code>fieldset<\/code> gruppiert und durch ein <code>legend<\/code> beschrieben werden. Dies sorgt f\u00fcr eine klare semantische Struktur und hilft insbesondere Screenreader-Nutzer*innen, den Kontext und die Bedeutung der enthaltenen Elemente besser zu erfassen.\n        <\/li>\n<li><strong>Fehlermeldungen m\u00fcssen korrekt mit den betroffenen Feldern verkn\u00fcpft sein<\/strong><br \/>\n            Nutzen Sie <code>aria-describedby<\/code>, um Fehlermeldungen programmatisch mit dem entsprechenden Eingabefeld zu verbinden. So k\u00f6nnen Screenreader den Fehler direkt im Kontext des betroffenen Feldes ausgeben. Werden Fehlermeldungen dynamisch angezeigt (z.\u202fB. nach dem Absenden eines Formulars), sollten sie zus\u00e4tzlich mit <code>role=\"alert\"<\/code> oder <code>aria-live=\"assertive\"<\/code> versehen werden, damit assistive Technologien die neue Information unmittelbar ank\u00fcndigen.\n        <\/li>\n<li><strong>Pflichtfelder klar kennzeichnen und zu Beginn erl\u00e4utern<\/strong><br \/>\n            Um Fehler bei der Eingabe zu vermeiden, sollten Pflichtfelder eindeutig und konsistent markiert sein \u2013 beispielsweise durch ein Sternchen (*) und\/oder eine textuelle Erg\u00e4nzung wie \u201ePflichtfeld\u201c. Erl\u00e4utern Sie zu Beginn des Formulars, wie Pflichtfelder gekennzeichnet sind, damit Nutzer*innen von Anfang an wissen, worauf sie achten m\u00fcssen. Dies unterst\u00fctzt insbesondere Menschen mit kognitiven Einschr\u00e4nkungen oder assistiven Technologien bei der fehlerfreien Formularbearbeitung.\n        <\/li>\n<li><strong>Wichtige oder komplexe Eingaben sollten vor dem Absenden zusammengefasst werden<\/strong><br \/>\n            Bei sensiblen oder umfangreichen Formularen \u2013 etwa bei Vertr\u00e4gen, Bestellungen oder Antr\u00e4gen \u2013 sollte den Nutzer*innen am Ende eine Zusammenfassung ihrer Angaben angezeigt werden. So k\u00f6nnen sie alle Informationen noch einmal \u00fcberpr\u00fcfen und gegebenenfalls korrigieren, bevor sie das Formular endg\u00fcltig absenden. Das reduziert Fehler, st\u00e4rkt die Kontrolle \u00fcber eigene Daten und verbessert die Nutzerfreundlichkeit f\u00fcr alle \u2013 insbesondere bei kognitiven Einschr\u00e4nkungen.\n        <\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Best_Practices\"><\/span>Best Practices<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das Folgende sind Empfehlungen, ich finde es aber sinnvoll, sie tats\u00e4chlich auch umzusetzen. <\/p>\n<p>Pflichtfelder sollten auch im Code als Pflichtfelder markiert werden, etwa durch ARIA required. Das erleichtert die Pr\u00fcfung durch assistive Technologien.<br \/>\nWo immer m\u00f6glich sollten f\u00fcr Eingabefelder klare Datentypen festgelegt werden. Auch das hilft bei der Fehlervermeidung. Beispiele sind E-Mail, Geburtsdatum und so weiter.<br \/>\nSeien Sie so fehlertolerant wie m\u00f6glich: Oft gibt es zum Beispiel keinen Grund, eine Zeichenbegrenzung zu haben oder bestimmte Zeichen nicht zu erlauben.<br \/>\nSetzen Sie eine dynamische Validierung ein, die sofort nach dem Verlassen eines Eingabefeldes (z.\u202fB. durch Tastaturfokuswechsel) eine R\u00fcckmeldung gibt, ob die Eingabe korrekt ist. Diese Validierung sollte visuell und auch \u00fcber assistive Technologien zug\u00e4nglich sein. So k\u00f6nnen Nutzerinnen sofortige Hinweise erhalten und gegebenenfalls Fehler in ihren Eingaben direkt korrigieren. Achten Sie darauf, dass Fehlermeldungen klar und verst\u00e4ndlich sind und dass Nutzerinnen bei Bedarf die M\u00f6glichkeit haben, die Fehler schnell zu beheben.<\/p>\n<p>Wenn nach dem Absenden eines Formulars Fehler auftreten, sollte der Titel der Seite (\u00fcber das <title>-Tag im HTML) ge\u00e4ndert werden, um die Nutzerinnen sofort auf die Probleme aufmerksam zu machen. Dies kann durch einen Hinweis wie \u201eFehler bei der Formular\u00fcbermittlung\u201c erfolgen. Eine solche \u00c4nderung sorgt daf\u00fcr, dass Nutzerinnen \u2013 insbesondere diejenigen, die auf assistive Technologien angewiesen sind \u2013 sofort wissen, dass es ein Problem gibt, ohne die Seite manuell durchsuchen zu m\u00fcssen.<\/p>\n<p>Bei komplexen Formularen, die Fehler nach dem Absenden anzeigen, sollten diese Fehler direkt am Anfang des Formulars angezeigt und klar erl\u00e4utert werden, sobald die Seite neu geladen wird. So k\u00f6nnen Nutzerinnen schnell erkennen, welche Felder korrigiert werden m\u00fcssen, ohne das gesamte Formular erneut durchsuchen zu m\u00fcssen. Achten Sie darauf, dass die Fehlerbeschreibung pr\u00e4zise ist und die erforderlichen Korrekturen verst\u00e4ndlich erkl\u00e4rt werden. Dies hilft insbesondere Nutzerinnen, die auf assistive Technologien angewiesen sind, das Formular effizient zu bearbeiten.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Barrierefreie Web-Formulare folgen alten Regeln. Dennoch werden immer wieder die gleichen Fehler gemacht. In diesem Beitrag fasse ich die wesentlichen Anforderungen zusammen. Must Haves Die&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/barrierefreie-web-formulare-die-basics\/\">Weiterlesen<span class=\"screen-reader-text\">Barrierefreie Web-Formulare &#8211; die Basics<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":611,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9994","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/9994","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=9994"}],"version-history":[{"count":4,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/9994\/revisions"}],"predecessor-version":[{"id":9998,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/9994\/revisions\/9998"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/611"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=9994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}