Ein Formular ist ein Element, mit dem Nutzer Daten für ein Feld oder eine Gruppe von Feldern angeben können. Formulare können so einfach wie ein einzelnes Feld oder so kompliziert sein wie ein mehrstufiges Formularelement mit mehreren Feldern pro Seite, Eingabevalidierung und manchmal auch ein CAPTCHA.
Formulare gelten im Hinblick auf die Barrierefreiheit als eines der schwierigsten Elemente, da sie sowohl alle bereits behandelten Elemente als auch zusätzliche Regeln speziell für Formulare kennen müssen. Mit etwas Verständnis und Zeit können Sie ein barrierefreies Formular erstellen, das zu Ihnen und Ihren Nutzern passt.
Google Formulare ist das letzte komponentenspezifische Modul in diesem Kurs. In diesem Modul konzentrieren wir uns auf die formularspezifischen Richtlinien. Alle anderen Richtlinien, die Sie in den vorherigen Modulen kennengelernt haben, wie Inhaltsstruktur, Tastaturfokus und Farbkontrast, gelten aber auch für Formularelemente.
Felder
Das Herzstück von Formularen sind Felder. Felder sind kleine interaktive Muster wie ein Eingabe- oder Optionsfeld, über das Nutzer Inhalte eingeben oder eine Auswahl treffen können. Es gibt eine breite Auswahl an Formularfeldern.
Standardmäßig wird empfohlen, etablierte HTML-Muster zu verwenden, anstatt mit ARIA benutzerdefinierte Elemente zu erstellen, da bestimmte Merkmale und Funktionalitäten wie Feldstatus, Eigenschaften und Werte bereits in die HTML-Elemente integriert sind, während Sie benutzerdefinierte ARIA-Werte manuell hinzufügen müssen.
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<form id="sundae-order-form"> <!-- form content --> </form>
Zusätzlich zur Auswahl der am besten zugänglichen Formularfeldmuster sollten Sie Ihren Feldern auch Attribute für die automatische HTML-Vervollständigung hinzufügen. Durch das Hinzufügen von Attributen zur automatischen Vervollständigung können User-Agents und Assistive Technologien (AT) eine detailliertere Definition oder Identifizierung des Zwecks ermöglichen.
Mit Autocomplete-Attributen können Nutzer visuelle Präsentationen personalisieren und beispielsweise ein Geburtstagskuchensymbol in einem Feld anzeigen, dem das Attribut für die automatische Vervollständigung von Geburtstagen (bday) zugewiesen ist. Im Allgemeinen machen Attribute für die
automatische Vervollständigung das Ausfüllen von Formularen einfacher und schneller. Dies ist besonders hilfreich für Menschen mit kognitiven und Lesestörungen sowie für Menschen, die ATs wie Screenreader verwenden.
<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 erzeugen, wenn sie Fokus- oder Nutzereingaben erhalten, es sei denn, der Nutzer wurde vor der Verwendung der Komponente über das Verhalten gewarnt. Beispielsweise sollte ein Formular nicht automatisch gesendet werden, wenn ein Feld fokussiert wird oder wenn ein Nutzer dem Feld Inhalte hinzufügt.
Labels
Labels informieren Nutzer über den Zweck eines Felds, wenn das Feld erforderlich ist, und können auch Informationen zu den Feldanforderungen enthalten, z. B. das Eingabeformat. Labels müssen jederzeit sichtbar sein und das Formularfeld für Nutzer korrekt beschreiben.
Einer der Grundprinzipien für barrierefreie Formulare besteht darin, eine klare und genaue Verbindung zwischen einem Feld und seinem Label herzustellen. Dies gilt sowohl visuell als auch programmatisch. Ohne diesen Kontext verstehen die Nutzenden möglicherweise nicht, wie die Felder im Formular ausgefüllt werden 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 zugehörige Formularfelder, z. B. eine Postanschrift, programmatisch und visuell gruppiert werden. Eine Methode besteht darin, ähnliche Elemente mit dem Muster „fieldset/legend“ zu gruppieren.
Beschreibungen
Feldbeschreibungen ähneln Beschriftungen insofern, als sie verwendet werden, um dem Feld und den Anforderungen mehr Kontext zu geben. Feldbeschreibungen sind für die Barrierefreiheit nicht erforderlich, wenn die Labels oder Formularanweisungen aussagekräftig genug sind.
Es gibt jedoch Situationen, in denen das Hinzufügen zusätzlicher Informationen nützlich ist, um Formularfehler zu vermeiden, z. B. wenn Informationen über die Mindestlänge der Eingabe für ein Passwortfeld weitergeleitet oder einem Nutzer mitgeteilt werden, welches Kalenderformat verwendet werden soll (z. B. MM-TT-JJJJ).
Es gibt viele verschiedene Methoden, um Ihren Formularen Feldbeschreibungen hinzuzufügen. Eine der besten Methoden besteht darin, dem Formularelement zusätzlich zum <label>-Element das Attribut aria-describedby hinzuzufügen. Der Screenreader liest sowohl die Beschreibung als auch das Label vor.
Wenn Sie Ihrem Element das Attribut aria-labelledby hinzufügen, überschreibt der Attributwert den Text in <label>. Testen Sie den endgültigen Code wie immer mit allen ATs, die Sie unterstützen möchten.
Fehler
Beim Erstellen barrierefreier Formulare gibt es viele Möglichkeiten, um zu verhindern, dass Nutzer Formularfehler machen. Zu Beginn dieses Moduls haben wir uns bereits damit beschäftigt, Felder klar auszuzeichnen, Labels zur Identifizierung zu erstellen und nach Möglichkeit detaillierte Beschreibungen hinzuzufügen. Aber unabhängig davon, wie klar Ihrer Meinung nach Ihr Formular ist, irgendwann wird ein Nutzender einen Fehler machen.
Wenn ein Nutzer auf einen Formularfehler stößt, besteht der erste Schritt darin, den Fehler bekannt zu machen. Das Feld, in dem der Fehler aufgetreten ist, muss klar identifiziert und der Fehler selbst dem Nutzer in Textform beschrieben werden.
Es gibt verschiedene Methoden zum Anzeigen von Fehlermeldungen, z. B.:
- Ein modales Pop-up-Fenster in der Nähe des Fehlers.
- Eine Sammlung von Fehlern, die oben auf der Seite in einer größeren Meldung zusammengefasst sind
Achten Sie beim Ankündigen von Fehlern unbedingt auf den Tastaturfokus und die ARIA-Live-Regionsoptionen.
Bieten Sie dem Nutzer nach Möglichkeit detaillierte Vorschläge zum Beheben des Fehlers. Es gibt zwei Attribute, mit denen Nutzer über Fehler informiert werden können.
- Sie können das HTML-Attribut required verwenden. Der Browser zeigt eine allgemeine Fehlermeldung an, die auf den angegebenen Validierungsparametern basiert.
- Alternativ können Sie das Attribut aria-required verwenden, um eine benutzerdefinierte Fehlermeldung an ATs zu senden. Nur ATs erhalten die Nachricht, es sei denn, Sie fügen zusätzlichen Code hinzu, um die Nachricht für alle Nutzer sichtbar zu machen.
Wenn der Nutzer der Meinung ist, dass alle Fehler behoben sind, erlaube ihm, das Formular noch einmal einzureichen und Feedback zu den Ergebnissen der Einreichung zu geben. Eine Fehlermeldung informiert den Nutzer, dass er weitere Aktualisierungen vornehmen muss, während eine Erfolgsmeldung bestätigt, dass er alle Fehler behoben und das Formular erfolgreich gesendet hat.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über barrierefreie Formulare
Welche der folgenden Antworten ist die barrierefreiste Formulareingabe?
Email address: <input type="email" required><label>Email address: <input type="email" required></label><label>Email address: <input type="email" required autocomplete="email"></label><label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>