Das von Ihnen erstellte Formular ist für Personen gedacht. Nutzer verwenden unterschiedliche Geräte. Manche verwenden eine Maus, einige ein Touch-Gerät, wieder andere die Tastatur oder ein Gerät, das durch Augenbewegungen gesteuert wird. Manche verwenden einen Screenreader, wieder andere einen kleinen Bildschirm, wieder andere nutzen Textvergrößerungssoftware. Jeder möchte das Formular verwenden. Hier erfahren Sie, wie Sie Ihr Formular für alle barrierefrei zugänglich und nutzbar machen.
Sicherstellen, dass Nutzer den Zweck eines Formularfelds verstehen
Ihnen stehen viele Formularsteuerelemente zur Auswahl.
Was haben sie alle gemeinsam?
Jedem Formularsteuerelement muss ein <label>-Element zugeordnet sein.
Das <label>-Element beschreibt den Zweck einer Formularsteuerung.
Der <label>-Text ist dem Formularsteuerelement visuell zugeordnet und wird von Screenreadern vorgelesen.
Wenn Sie auf <label> tippen oder klicken, wird außerdem das zugehörige Formularsteuerelement hervorgehoben, sodass es zu einem größeren Ziel wird.
Aussagekräftigen HTML-Code verwenden, um auf integrierte Browserfunktionen zuzugreifen
Theoretisch können Sie ein Formular nur aus <div>-Elementen erstellen.
Du kannst es sogar wie eine native <form> aussehen lassen.
Welches Problem entsteht bei der Verwendung nicht semanischer Elemente?
Integrierte Formularelemente bieten viele integrierte Funktionen. Sehen wir uns ein Beispiel an.
Optisch sehen die <input> (die erste im Beispiel) und <div> gleich aus.
Sie können sogar Text für beide einfügen, da <div> ein contenteditable-Attribut hat.
Es gibt jedoch viele Unterschiede zwischen der Verwendung eines geeigneten <input>-Elements und einem <div>-Element, das wie ein <input> aussieht.
Ein Screenreader-Nutzer erkennt <div> nicht als Eingabeelement und kann das Formular nicht ausfüllen.
Der Screenreader-Nutzer hört nur „Name“, ohne dass das Element ein Formularsteuerelement zum Hinzufügen von Text ist.
Durch Klicken auf <div>Name</div> wird die zugehörige <div> nicht fokussiert. <label> und <input> werden hingegen über die Attribute for und id miteinander verbunden.
Nachdem das Formular gesendet wurde, werden die im <div> eingegebenen Daten nicht mehr in der Anfrage berücksichtigt.
Die Daten können zwar mit JavaScript angehängt werden, aber das ist in <input> standardmäßig möglich.
Integrierte Formularelemente haben weitere Funktionen.
Bei geeigneten Formularelementen und dem richtigen inputmode oder type werden beispielsweise auf einer Bildschirmtastatur die entsprechenden Zeichen angezeigt. Dies ist nicht möglich, wenn das Attribut inputmode für eine <div> verwendet wird.
Sicherstellen, dass Nutzer das erwartete Datenformat kennen
Sie können verschiedene Validierungsregeln für eine Formularsteuerung definieren.
Angenommen, ein Formularfeld sollte immer mindestens acht Zeichen lang sein.
Sie verwenden das Attribut minlength, das die Validierungsregel für Browser angibt.
Wie können Sie dafür sorgen, dass Nutzer auch über die Validierungsregel informiert sind? Sagen Sie es ihnen.
Fügen Sie direkt unter dem Steuerelement für das Formular Informationen zum erwarteten Format hinzu.
Verwenden Sie zur Verdeutlichung für Hilfsgeräte das Attribut aria-describedby im Formularsteuerelement und ein id in der Fehlermeldung mit demselben Wert, um beide zu verbinden.
Nutzern helfen, die Fehlermeldung für eine Formularsteuerung zu finden
In einem vorherigen Modul zum Thema Validierung haben Sie gelernt, wie Fehlermeldungen bei ungültigen Dateneinträgen angezeigt werden.
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
Wenn ein Feld beispielsweise ein required-Attribut hat und ungültige Daten eingegeben werden, zeigt der Browser beim Senden des Formulars eine Fehlermeldung neben der Formularsteuerung an. Die Fehlermeldung wird auch von Screenreadern angesagt.
Sie können auch eine eigene Fehlermeldung definieren:
In diesem Beispiel sind weitere Änderungen erforderlich, um die Fehlermeldung mit der Formularsteuerung zu verbinden.
Ein einfacher Ansatz besteht darin, für die Formularsteuerung das Attribut aria-describedby zu verwenden, das mit dem id im Fehlermeldungselement übereinstimmt.
Verwenden Sie dann aria-live="assertive" für die Fehlermeldung.
Nutzer von ARIA-Live-Regionen informieren Nutzer von Screenreadern über einen Fehler, sobald er angezeigt wird.
Das Problem bei diesem Ansatz bei Formularen mit mehreren Feldern besteht darin, dass aria-live normalerweise nur den ersten Fehler ausgibt, wenn mehrere Fehler vorliegen.
Wie in diesem Artikel über mehrere aria-live-Ankündigungen für dieselbe Aktion beschrieben, können Sie alle Fehler verketten, um eine einzelne Nachricht zu erstellen. Ein anderer Ansatz wäre, über Fehler anzukündigen und dann einzelne Fehler anzukündigen, wenn das Feld hervorgehoben ist.
Sicherstellen, dass Nutzer Fehler erkennen
Manchmal färben Designer den ungültigen Zustand mithilfe der Pseudoklasse :invalid rot.
Um Fehler oder Erfolge zu kommunizieren,
sollten Sie sich jedoch nie nur auf Farbe verlassen.
Bei Menschen mit rot-grüner Farbenblindheit sehen
Grün und roter Rahmen fast gleich aus.
Es ist unmöglich zu sehen, ob die Meldung mit einem Fehler zusammenhängt.
Verwenden Sie neben einer Farbe auch ein Symbol oder stellen Sie Ihren Fehlermeldungen den Fehlertyp voran.
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
Nutzern die Navigation im Formular erleichtern
Sie können die visuelle Reihenfolge der Formularsteuerelemente in CSS ändern. Eine Trennung zwischen visueller Reihenfolge und Tastaturnavigation (DOM-Reihenfolge) ist für Nutzer von Screenreadern und Tastaturen problematisch.
Nutzer können die aktuell fokussierte Formularsteuerung leichter finden
Gehen Sie mit Ihrer Tastatur durch dieses Formular.
Haben Sie erkannt, dass sich der Stil der Formularsteuerelemente geändert hat, nachdem sie aktiv waren?
Dies ist der standardmäßige Fokusstil.
Sie können sie mit der CSS-Pseudoklasse :focus überschreiben.
Unabhängig von den Stilen, die Sie in :focus verwenden, muss der visuelle Unterschied zwischen dem Standardstatus und dem Fokusstatus immer erkennbar sein.
Weitere Informationen zum Entwerfen von Fokusindikatoren
Achten Sie darauf, dass das Formular nutzbar ist
Sie können viele häufige Probleme erkennen, indem Sie das Formular mit verschiedenen Geräten ausfüllen. Verwenden Sie nur Ihre Tastatur, einen Screenreader (z. B. NVDA unter Windows oder VoiceOver auf einem Mac) oder zoomen Sie die Seite auf 200%. Testen Sie Ihre Formulare immer auf verschiedenen Plattformen, insbesondere auf Geräten oder Einstellungen, die Sie nicht täglich verwenden. Kennen Sie jemanden, der einen Screenreader oder Textvergrößerungssoftware verwendet? Bitten Sie sie, Ihr Formular auszufüllen. Rezensionen zur Barrierefreiheit sind toll, Tests mit echten Nutzenden sind noch besser.
Weitere Informationen zur Überprüfung der Barrierefreiheit und Tests mit echten Nutzern