Wenn es darum geht, ein Online-Formular auszufüllen, wollen wir alle im Grunde dasselbe: klare Anweisungen, einen schnellen Ablauf und ein reibungsloses Erlebnis.
Für Menschen mit Behinderungen wird eine solche positive Erfahrung erst dann möglich, wenn jemand die Arbeit geleistet hat, das Formular barrierefrei zu gestalten.
Als Experte für Barrierefreiheit denke ich beim Ausfüllen eines Online-Formulars immer über die Benutzererfahrung nach. Wie leicht waren die Anweisungen zu befolgen, und wie klar und unkompliziert war der Ablauf? Würde jemand mit einer Seh- oder motorischen Behinderung dieselbe Erfahrung machen wie ich?
Erst neulich habe ich versucht, ein Formular auf einer Reise-Website auszufüllen. Ich war von der Qualität dieser Erfahrung begeistert. Mithilfe einer Hilfssoftware gelang es mir, alle Angaben auf dieser Reise-Website innerhalb von fünf Minuten auszufüllen, ohne dass es dabei zu Verwirrung oder Fehlern kam.
Weißt du, was das möglich gemacht hat?
Der Grund dafür war, dass das Formular einheitliche und stets vorhandene beschreibende Beschriftungen enthielt. Das Formular kennzeichnete alle Pflichtfelder, bot leicht verständliche Anweisungen, gruppierte relevante Formularfelder so, dass deren Zweck klar erkennbar war, und verwendete nur wenige Platzhalter, die die notwendigen Hinweise gaben. Vor allem aber übermittelte das Formular die Rolle, den Namen und den Status der Formularsteuerelemente an die von mir verwendete assistive Technologie.
In diesem Beitrag werden wir einige Techniken kennenlernen, mit denen sich solche barrierefreien Erlebnisse gestalten lassen. Bevor wir jedoch loslegen, empfehle ich Ihnen, zwei unserer bereits veröffentlichten Beiträge zu diesem Thema zu lesen:
- Die Anatomie barrierefreier Formulare: Das Problem mit Platzhaltern
- Die Struktur barrierefreier Formulare: Pflichtfelder in Formularen
Im heutigen Beitrag werden wir alle Aspekte der Erstellung eines barrierefreien Formulars durchgehen, das allen Nutzern die bestmögliche Benutzererfahrung bietet. Wir werden jeden Aspekt der Erstellung eines barrierefreien Formulars beleuchten, verstehen, warum ein bestimmter Schritt wichtig ist, und erläutern, wie er sich auf Menschen mit Behinderungen oder Nutzer im Allgemeinen auswirkt.
Verwenden Sie natives HTML
Die erste Regel für die Erstellung eines wirklich barrierefreien Formulars lautet, so weit wie möglich native HTML-Formularsteuerelemente zu verwenden. Die meisten davon sind standardmäßig mit allen assistiven Technologien zugänglich und semantisch korrekt.
Schauen wir uns einige Beispiele für native Formularelemente an:
<input type=”text”> <input type=”radio”> <input type=”checkbox”> <button>Submit</button>
Da wir die nativen HTML-Steuerelemente verwenden, werden Name, Rolle und Status der Elemente standardmäßig allen assistiven Technologien zur Verfügung gestellt. Wenn wir jedoch ein benutzerdefiniertes Steuerelement unter Verwendung von WAI-ARIA-Techniken erstellen, müssen all diese Elemente manuell mithilfe verschiedener ARIA-Attribute wie „aria-label“, „aria-checked“ und „role=“radio““ angegeben werden.
Eine gut sichtbare Beschriftung anbringen
Der nächste Schritt in diesem Prozess besteht darin, für jedes Formularsteuerelement eine sichtbare Beschriftung bereitzustellen. Ohne sichtbare Beschriftungen sind Formularsteuerelemente für keinen Nutzer bedienbar, geschweige denn für Menschen mit einer Behinderung. Eine sichtbare Beschriftung ist einfach ein Text, der sich in unmittelbarer Nähe des Formularsteuerelements befindet, das er bezeichnet.
<strong>First Name</strong> <input type=”text”> <strong>Terms & Conditions</strong> <input type=”checkbox”>
Im obigen Beispielcode habe ich die Beschriftungen mit einem „strong“-Tag hervorgehoben, damit die Benutzer sie leicht unterscheiden können.
Da wir gerade über sichtbare Beschriftungen sprechen, sollten wir auch auf Platzhalterattribute eingehen.
Bei einigen Eingabetypen können wir das „placeholder“-Attribut verwenden – dies ist jedoch nicht dasselbe wie die Angabe einer sichtbaren Beschriftung! Der Platzhalter verschwindet, sobald der Benutzer Daten in das Formular eingibt. Um mehr über die Fallstricke bei der Verwendung von „placeholder“-Attributen zu erfahren, lesen Sie den Artikel „The Anatomy of Accessible Forms: The Problem with Placeholders“.
Programmatische Beschriftungen einfügen
Nachdem wir nun verstanden haben, warum wir sichtbare Beschriftungen benötigen, müssen wir diese auch programmgesteuert den entsprechenden Formularfeldern zuordnen. Ohne diese programmgesteuerte Zuordnung können Nutzer von assistiver Technologie den Zweck des Formularfeldes nicht erkennen.
Wenn der Fokus eines Benutzers auf ein Textfeld wechselt, wird dieses als „Bearbeitungsfeld“ vorgelesen, ohne dass der ihm zugewiesene barrierefreie Name genannt wird. Um sicherzustellen, dass der sichtbare barrierefreie Name den Benutzern mitgeteilt wird, müssen wir die sichtbare Beschriftung programmgesteuert einem Formularfeld zuordnen.
<label for=”firstname”>First Name</label> <input type=”text” name=”firstname” id=”firstname”> <label for=”lastname”>Last Name</label> <input type=”text” name=”lastname” id=”lastname”>
Im obigen Beispiel haben wir die Methode „for and id“ verwendet, um das Formularfeld mit seiner sichtbaren Beschriftung zu verknüpfen. Es gibt zwar mehrere Möglichkeiten, diese Verknüpfung programmgesteuert herzustellen, doch wird die Verwendung der „id“-Methode empfohlen.
Beschreibende Beschriftungen anbringen
Nachdem wir nun sichtbare Beschriftungen erstellt und diese den jeweiligen Formularfeldern zugeordnet haben, besteht der nächste Schritt darin, zu prüfen, ob die Formularbeschriftungen aussagekräftig genug sind. Wird der Benutzer in der Lage sein, die Beschriftung zu lesen, den Zweck zu verstehen und die gewünschte Aktion erfolgreich auszuführen? Zum Beispiel:
<label>Name</label> <input type=”text”> <input type=”text”>
Im obigen Beispiel ist zu sehen, dass für beide Formularfelder die sichtbare Beschriftung „name“ lautet. Dies ist für die Benutzer nicht aussagekräftig genug, um die erforderlichen Maßnahmen zu ergreifen. Jedes Formularfeld sollte eine eigene sichtbare Beschriftung enthalten, die aussagekräftig ist. Wir können das obige Beispiel verbessern, indem wir für beide Formularfelder sichtbare Beschriftungen hinzufügen und angeben, wo der Vorname und der Nachname eingegeben werden sollen:
<label for=”fname”>First Name</label> <input type=”text” name=”firstname” id=”fname”> <label for=”lname”>Last Name</label> <input type=”text” name=”lastname” id=”lname”>
Steuerelemente in Gruppen
Manchmal gibt es eine Reihe von Formularsteuerelementen, die zu einer Gruppe gehören und mit einer auf Gruppenebene sichtbaren Beschriftung versehen sind, um den Kontext zu verdeutlichen. Die auf Gruppenebene sichtbare Beschriftung vermittelt den Benutzern die notwendigen Informationen, damit sie entsprechende Maßnahmen ergreifen können. Betrachten wir dies anhand eines Beispiels:
<p>Do you have a passport</p> <input type=”radio” name=”passport” id=”yes”> <label for=”yes”>Yes</label> <input type=”radio” name=”passport” id=”no”> <label for=”no”>No</label>
Im obigen Beispiel ist zu sehen, dass „Haben Sie einen Reisepass?“ die primäre sichtbare Beschriftung auf Gruppenebene für die Gruppe der Optionsfelder ist. Wenn Nutzer von assistiver Technologie jedoch zu diesen Optionsfeldern navigieren, entgeht ihnen die wichtige Information, die durch die primäre sichtbare Beschriftung auf Gruppenebene bereitgestellt wird, da diese keinen Tab-Fokus über die Tastatur erhält.
Zudem ergeben die Elemente „Ja“ und „Nein“ keinen Sinn, wenn sie von assistiver Technologie einzeln vorgelesen werden. Um dieses Problem in HTML zu beheben, verwenden wir die Attribute „fieldset“ und „legend“, um die Formularsteuerelemente auf Gruppenebene miteinander zu verknüpfen. Diese Attribute werden Nutzern assistiver Technologien wie erwartet angesagt. Hier ist dasselbe Beispiel mit „fieldset“ und „legend“:
<fieldset> <legend>Do you have a passport</legend> <input type=”radio” name=”passport” id=”yes1”> <label for=”yes1”>Yes</label> <input type=radio” name=”passport” id=”no1”> <label for=”no1”>No</label> </fieldset>
Im obigen Beispiel ist zu sehen, dass das `fieldset`-Element die Formularsteuerelemente zu einer Gruppe zusammenfasst und das `legend`-Attribut als primäre, sichtbare Bezeichnung auf Gruppenebene dient, die angezeigt wird, wenn der Nutzer einer assistiven Technologie den Fokus entweder per Tabulatortaste oder per Umschalt+Tab-Navigation auf das erste Optionsfeld verschiebt.
Anweisungen geben
Für einige Formularfelder sind zusätzliche Anweisungen erforderlich, damit die Daten erfolgreich eingegeben werden können. Diese Anweisungen müssen den Benutzern jederzeit als sichtbare Beschriftungen zur Verfügung stehen. Wir können die Anweisungen mithilfe des Attributs „aria-describedby“ mit den Formularfeldern verknüpfen.
<label for=”dob”>Date of Birth</label> <input type=”text” aria-described=”dob1” id=”dob”> <span id=”dob1”>MM/DD/YYYY</span>
Im obigen Beispiel befindet sich die Anleitung unterhalb des Formularfelds und ist über das Attribut „aria-describedby“ mit dem Textfeld verknüpft. Ist die Anleitung nicht mit den Formularfeldern verknüpft, könnten Nutzer von assistiver Technologie, die die Tabulatortaste zur Navigation verwenden, wichtige Informationen übersehen.
Zweck der Formularfelder ermitteln
Die korrekte Eingabe von Informationen in Formularfelder kann schwierig sein, insbesondere für Menschen mit kognitiven Beeinträchtigungen. Der Zweck eines Textfeldes, in dem benutzerspezifische Daten erfasst werden, lässt sich mithilfe des HTML-Attributs „autocomplete“ programmgesteuert ermitteln. Diese Technik kann auch dazu beitragen, die Benutzeroberfläche zu personalisieren, indem Formularbeschriftungen durch Begriffe aus einem definierten Vokabular oder sogar durch grafische Symbole ersetzt oder ergänzt werden.
<label for=”fname”>First Name</label> <input type=”text” name=”firstname” id=”fname”> autocomplete=”given-name”>
Im obigen Beispiel hilft das „autocomplete“-Attribut im Eingabefeld des Formulars dem User-Agent dabei, den Vornamen abzurufen. Dies erleichtert das Ausfüllen von Formularen und verringert die Fehlerwahrscheinlichkeit, insbesondere für Menschen, denen es möglicherweise schwerfällt, sich an Informationen genau zu erinnern, diese zu lesen oder einzugeben.
Barrierefreien Namen angeben
Manche Formularfelder benötigen möglicherweise einen programmatischen Namen, um den Zweck des Feldes besser verständlich zu machen und Aktionen unabhängig von den sichtbaren Textbeschriftungen auszuführen. Allerdings müssen wir sicherstellen, dass der programmatische Name die sichtbare Textbeschriftung nicht vollständig ersetzt. Er soll vielmehr die Benutzererfahrung ergänzen und verbessern, insbesondere für Nutzer mit Spracheingabe, die versuchen, die sichtbare Textbeschriftung als Navigations- oder Auswahlhilfe bei der Interaktion mit Formularfeldern zu verwenden:
<label for=”bday”>Date of Birth (MM/DD/YYYY)</label> <input type=”text” aria-label=”Birthday” id=”bday”>
Im obigen Beispiel erhält der Benutzer nicht nur keine wichtigen Anweisungen, sondern ist wahrscheinlich auch verwirrt darüber, welche Eingabe für dieses Formularfeld vorgesehen ist. Wir müssen die sichtbare Textbezeichnung als Teil des barrierefreien Namens einbeziehen, und es hat sich bewährt, mit einer sichtbaren Bezeichnung zu beginnen.
<label for=”search”>Search</label> <input type=”text” aria-label=”Search by City, State or Zipcode” id=”search”>
Im obigen Beispiel ergänzt der barrierefreie Name die sichtbare Textbeschriftung und hilft den Nutzern, den Zweck des Formularfelds besser zu verstehen und zu erkennen, welche Informationen eingegeben werden sollen.
Zusammenfassung
Wenn Sie die oben genannten Best Practices befolgen, können Sie ein Formular erstellen, das für alle Nutzer benutzerfreundlich und barrierefrei ist. Und denken Sie daran: Natives HTML ist der Schlüssel zu einer positiven Nutzererfahrung!
