Ein Formular ist ein Element, mit dem ein Nutzer Daten in ein Feld oder eine Gruppe von Feldern eingeben kann. Formulare können ein einzelnes Feld oder ein komplexes, mehrstufiges Formular mit mehreren Feldern pro Seite, Eingabevalidierung und CAPTCHA sein.
Formulare gehören aus Barrierefreiheitssicht zu den schwierigsten Elementen, da sie Kenntnisse aller bereits behandelten Elemente sowie zusätzlicher Regeln erfordern, die nur für Formulare gelten. Mit etwas Verständnis und Zeit können Sie ein barrierefreies Formular erstellen, das Ihren Anforderungen und den Anforderungen Ihrer Nutzer entspricht.
Formulare sind das letzte komponentenspezifische Modul in diesem Kurs. In diesem Modul werden formulareigene Richtlinien behandelt. Die vorherigen Richtlinien aus früheren Modulen, z. B. zur Inhaltsstruktur, zum Tastaturfokus und zum Farbkontrast, gelten jedoch auch für Formular elemente.
Felder
Die Grundlage von Formularen sind Felder. Felder sind kleine interaktive Muster wie ein Eingabe- oder Optionsfeld, mit denen Nutzer Inhalte eingeben oder eine Auswahl treffen können. Es gibt eine Vielzahl von Formularfeldern, aus denen Sie wählen können.
Die Standardempfehlung ist, etablierte HTML-Muster zu verwenden, anstatt etwas mit ARIA zu erstellen, da bestimmte Funktionen wie Feldstatus, Eigenschaften und Werte in die HTML-Elemente integriert sind. Bei benutzerdefinierten Feldern müssen Sie ARIA manuell hinzufügen.
Nicht empfohlen: Benutzerdefiniertes HTML mit ARIA
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
Empfohlen: Standard-HTML
<form id="sundae-order-form">
<!-- form content -->
</form>
Neben der Auswahl der barrierefreiesten Formularfeldmuster sollten Sie Ihren Feldern gegebenenfalls auch HTML-Attribute für die automatische Vervollständigung hinzufügen. Durch das Hinzufügen von Attributen für die automatische Vervollständigung können Sie den Zweck für User-Agents und unterstützende Technologien genauer definieren oder identifizieren.
Mit Attributen für die automatische Vervollständigung können Nutzer visuelle Darstellungen personalisieren, z. B. ein Geburtstagskuchensymbol in einem Feld mit dem Attribut für die automatische Vervollständigung des Geburtstags (bday) anzeigen. Im Allgemeinen erleichtern und beschleunigen Attribute für die automatische Vervollständigung das Ausfüllen von Formularen. Das ist besonders hilfreich für Personen mit kognitiven und Lesestörungen sowie für Nutzer von unterstützenden Technologien wie Screenreadern.
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
Außerdem sollten Formularfelder keine kontextbezogenen Änderungen verursachen, wenn sie den Fokus erhalten oder Nutzereingaben machen, es sei denn, der Nutzer wurde vor der Verwendung der Komponente über das Verhalten informiert. Ein Formular sollte beispielsweise nicht automatisch gesendet werden, wenn ein Feld den Fokus erhält oder wenn ein Nutzer Inhalte in das Feld eingibt.
Labels
Labels informieren Nutzer über den Zweck eines Felds, ob das Feld erforderlich ist, und können auch Informationen zu den Feldanforderungen enthalten, z. B. zum Eingabeformat. Labels müssen jederzeit sichtbar sein und das Formularfeld für Nutzer genau beschreiben.
Einer der grundlegenden Grundsätze für barrierefreie Formulare ist die Einrichtung einer klaren und genauen Verbindung zwischen einem Feld und seinem Label. Das gilt sowohl visuell als auch programmatisch. Ohne diesen Kontext wissen Nutzer möglicherweise nicht, wie sie die Felder im Formular ausfüllen sollen.
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
Außerdem müssen zusammengehörige Formularfelder wie eine Postanschrift programmatisch und visuell gruppiert werden. Eine Methode besteht darin, das Muster „fieldset“ und „legend“ zu verwenden, um ähnliche Elemente zu gruppieren.
Textzeilen
Feldtextzeilen ähneln Labels in Bezug auf den Zweck, da sie verwendet werden, um mehr Kontext zum Feld und zu den Anforderungen zu liefern. Feldtextzeilen sind für die Barrierefreiheit nicht erforderlich, wenn die Labels oder Formularanweisungen beschreibend genug sind.
Es gibt jedoch Situationen, in denen das Hinzufügen zusätzlicher Informationen nützlich ist, um Formularfehler zu vermeiden, z. B. Informationen zur Mindestlänge der Eingabe für ein Passwortfeld oder Informationen zum zu verwendenden Kalenderformat (z. B. MM-TT-JJJJ).
Es gibt viele verschiedene Methoden, um Ihren Formularen Feldtextzeilen hinzuzufügen. Eine der besten Methoden besteht darin, dem Formularelement zusätzlich zu einem <label> Element ein
aria-describedby
Attribut hinzuzufügen. Der Screenreader liest sowohl die Beschreibung als auch das Label vor.
Wenn Sie Ihrem Element das
aria-labelledby
-Attribut hinzufügen, überschreibt der Attributwert den Text in Ihrem
<label>. Testen Sie den endgültigen Code wie immer mit allen unterstützenden Technologien, die Sie unterstützen möchten.
Fehler
Beim Erstellen barrierefreier Formulare können Sie viel tun, um zu verhindern, dass Nutzer Formularfehler machen. Weiter oben in diesem Modul haben wir behandelt, wie Sie Felder klar kennzeichnen, identifizierende Labels erstellen und nach Möglichkeit detaillierte Beschreibungen hinzufügen. Aber egal, wie klar Ihr Formular ist, irgendwann wird ein Nutzer einen Fehler machen.
Wenn ein Nutzer einen Formularfehler findet, muss der Fehler zuerst bekannt gemacht werden. Das Feld, in dem der Fehler aufgetreten ist, muss klar identifiziert werden und der Fehler selbst muss dem Nutzer in Textform beschrieben werden.
Es gibt verschiedene Methoden zum Anzeigen von Fehlern meldungen, z. B.:
- Ein modales Fenster, inline in der Nähe des Fehlers
- Eine Sammlung von Fehlern, die in einer größeren Meldung oben auf der Seite gruppiert sind
Achten Sie beim Ankündigen von Fehlern auf den Tastaturfokus und ARIA-Live-Bereich-Optionen.
Bieten Sie dem Nutzer nach Möglichkeit einen detaillierten Vorschlag zur Behebung des Fehlers. Es gibt zwei Attribute, mit denen Nutzer über Fehler informiert werden können.
- Sie können das HTML required Attribut verwenden. Der Browser liefert eine allgemeine Fehlermeldung basierend auf den Parametern für die Dateivalidierung.
- Alternativ können Sie das Attribut „aria-required“ verwenden, um eine benutzerdefinierte Fehlermeldung an unterstützende Technologien zu senden. Nur unterstützende Technologien erhalten diese Meldung, es sei denn, Sie fügen Code hinzu, um die Meldung für alle Nutzer sichtbar zu machen.
Sobald ein Nutzer der Meinung ist, dass alle Fehler behoben wurden, können Sie das Formular noch einmal senden und Feedback zu den Ergebnissen der Einreichung geben. Eine Fehlermeldung informiert den Nutzer darüber, dass weitere Aktualisierungen erforderlich sind, während eine Erfolgsmeldung bestätigt, dass alle Fehler behoben wurden und das Formular erfolgreich gesendet wurde.
Zusätzliche Erfolgskriterien
Mit WCAG 2.2 wurden die folgenden Erfolgskriterien eingeführt, die sich auf barrierefreiere Formulare konzentrieren: