Formulare

Ein Formular ist ein Element, mit dem Nutzer Daten in ein Feld oder eine Gruppe von Feldern eingeben können. Formulare können so einfach wie ein einzelnes Feld oder so kompliziert wie ein mehrstufiges Formularelement mit mehreren Feldern pro Seite, Eingabevalidierung und manchmal einem CAPTCHA sein.

Formulare gelten als eines der schwierigsten Elemente, die in Bezug auf Barrierefreiheit richtig umgesetzt werden müssen, da sie Kenntnisse aller bereits behandelten Elemente sowie zusätzliche Regeln erfordern, die nur für Formulare gelten. Mit etwas Verständnis und Zeit können Sie ein barrierefreies Formular erstellen, das für Sie und Ihre Nutzer geeignet ist.

Formulare ist das letzte komponentenspezifische Modul in diesem Kurs. In diesem Modul liegt der Schwerpunkt auf den formularspezifischen Richtlinien. Alle anderen Richtlinien, die Sie in den vorherigen Modulen kennengelernt haben, wie Inhaltsstruktur, Tastaturfokus und Farbkontrast, gelten auch für Formularelemente.

Felder

Das Rückgrat von Formularen sind Felder. Felder sind kleine interaktive Muster, z. B. Eingabe- oder Optionsfelder, mit denen Nutzer Inhalte eingeben oder eine Auswahl treffen können. Es gibt eine Vielzahl von Formularfeldern zur Auswahl.

Wir empfehlen standardmäßig, bewährte HTML-Muster zu verwenden, anstatt benutzerdefinierte Elemente mit ARIA zu erstellen, da bestimmte Funktionen und Merkmale wie Feldstatus, Eigenschaften und Werte in die HTML-Elemente integriert sind. Bei benutzerdefinierten Feldern müssen Sie die ARIA-Angaben 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>

Achten Sie darauf, die für Ihre Nutzer am besten zugänglichen Muster für Formularfelder auszuwählen. Geben Sie Ihren Feldern gegebenenfalls auch HTML-Autocomplete-Attribute. Durch das Hinzufügen von Attributen für die automatische Vervollständigung können User-Agents und Hilfstechnologien den Zweck genauer definieren oder identifizieren.

Mit Autocomplete-Attributen können Nutzer visuelle Präsentationen personalisieren, z. B. ein Geburtstagskuchensymbol in einem Feld anzeigen, dem das Autocomplete-Attribut „Geburtstag“ (bday) zugewiesen ist. Im Allgemeinen erleichtern Autocomplete-Attribute das Ausfüllen von Formularen. Das ist besonders hilfreich für Menschen mit kognitiven und Lesestörungen sowie für Nutzer von Hilfstechnologien 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 vornehmen, wenn sie den Fokus erhalten oder Nutzereingaben erhalten, 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 ein Nutzer dem Feld Inhalte hinzufügt.

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 die Formularfelder für Nutzer korrekt beschreiben.

Eine der Grundvoraussetzungen für barrierefreie Formulare ist die klare und korrekte Verknüpfung eines Felds mit seinem Label. Das gilt sowohl visuell als auch programmatisch. Ohne diesen Kontext versteht ein Nutzer möglicherweise nicht, wie er die Felder im Formular ausfüllen soll.

<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 wie eine Postanschrift programmatisch und visuell gruppiert werden. Eine Möglichkeit besteht darin, ähnliche Elemente mithilfe des Feldsatz- und Legendenmusters zu gruppieren.

Textzeilen

Feldbeschreibungen ähneln Labels insofern, als dass sie dazu dienen, mehr Kontext zu den Feldern und Anforderungen zu liefern. Feldbeschreibungen sind für die Barrierefreiheit nicht erforderlich, wenn die Labels oder Formularanweisungen aussagekräftig genug sind.

Es gibt jedoch Situationen, in denen zusätzliche Informationen hilfreich sind, um Formularfehler zu vermeiden. So können Sie beispielsweise Informationen zur Mindestlänge der Eingabe für ein Passwortfeld weitergeben oder einem Nutzer mitteilen, welches Kalenderformat er verwenden soll (z. B. TT.MM.JJJJ).

Es gibt viele verschiedene Methoden, mit denen Sie Ihren Formularen Feldbeschreibungen hinzufügen können. Eine der besten Methoden ist es, dem Formularelement zusätzlich zu einem <label>-Element das Attribut aria-describedby hinzuzufügen. Der Screenreader liest sowohl die Beschreibung als auch das Label vor.

Wenn Sie dem Element das Attribut aria-labelledby hinzufügen, wird der Text in <label> durch den Attributwert überschrieben. Wie immer solltest du den finalen Code mit allen ATs testen, die du unterstützen möchtest.

Fehler

Wenn Sie barrierefreie Formulare erstellen, können Sie viel tun, um zu verhindern, dass Nutzer Fehler machen. Zuvor in diesem Modul haben wir besprochen, wie Sie Felder klar kennzeichnen, identifizierende Labels erstellen und nach Möglichkeit detaillierte Beschreibungen hinzufügen. Aber egal, wie klar Sie Ihr Formular finden, irgendwann macht ein Nutzer einen Fehler.

Wenn ein Nutzer einen Formularfehler feststellt, muss er ihn melden. Das Feld, in dem der Fehler aufgetreten ist, muss klar gekennzeichnet sein und der Fehler selbst muss dem Nutzer in Textform beschrieben werden.

Es gibt verschiedene Methoden, um Fehlermeldungen anzuzeigen, z. B.:

  • Ein modales Dialogfeld, das in der Nähe des Fehlers eingeblendet wird
  • Eine Reihe von Fehlern, die oben auf der Seite in einer größeren Meldung zusammengefasst sind

Achten Sie beim Ansagen von Fehlern auf den Tastaturfokus und die ARIA-Optionen für Live-Regionen.

Bieten Sie dem Nutzer nach Möglichkeit einen detaillierten Vorschlag zur Fehlerbehebung. Es gibt zwei Attribute, mit denen Nutzer über Fehler informiert werden können.

  • Sie können das HTML-Attribut required verwenden. Der Browser gibt eine generische Fehlermeldung basierend auf den eingereichten Validierungsparametern aus.
  • Sie können auch das Attribut aria-required verwenden, um ATs eine benutzerdefinierte Fehlermeldung zu senden. Die Nachricht wird nur an ATs gesendet, es sei denn, Sie fügen zusätzlichen Code hinzu, damit die Nachricht für alle Nutzer sichtbar ist.

Wenn der Nutzer der Meinung ist, dass alle Fehler behoben wurden, muss er das Formular noch einmal einreichen und Feedback zu den Ergebnissen seiner Einreichung geben. Eine Fehlermeldung informiert den Nutzer darüber, dass er weitere Änderungen vornehmen muss, während eine Erfolgsmeldung bestätigt, dass er alle Fehler behoben und das Formular erfolgreich gesendet hat.

Zusätzliche Erfolgskriterien

In WCAG 2.2 wurden die folgenden Erfolgskriterien eingeführt, die sich auf barrierefreiere Formulare konzentrieren:

Wissenstest

Ihr Wissen über barrierefreie Formulare testen

Welche der folgenden Eingabemöglichkeiten für Formulare ist am barrierefreisten?

Email address: <input type="email" required>
Es gibt kein Label, das „E-Mail-Adresse“ mit der Eingabe verknüpft.
<label>Email address: <input type="email" required></label>
Das Attribut „autocomplete“ fehlt, das eine Definition oder Zweckbestimmung für User-Agents und Hilfstechnologien bietet.
<label>Email address: <input type="email" required autocomplete="email"></label>
Dies ist ein barrierefreies Feldlabel, aber nicht das barrierefreiste in dieser Liste.
<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>
Das Attribut „aria-describedby“ fügt einem Fehler, der dem Nutzer angezeigt wird, wenn das Feld nicht richtig ausgefüllt ist, zusätzlichen Kontext hinzu. Dieses Attribut ist zwar nicht erforderlich, kann aber für Nutzer von Hilfstechnologien nützlich sein.