Barrierefreiheit

Das Formular, das Sie erstellen, ist für Menschen. Nutzer verwenden unterschiedliche Geräte. Manche nutzen eine Maus, wieder andere ein Touch-Gerät, andere die Tastatur, ein Gerät, das durch Augenbewegungen gesteuert wird. Einige verwenden einen Screenreader, andere ein kleines Display, andere Software zur Textvergrößerung. Alle möchten Ihr Formular verwenden. Hier erfahren Sie, wie Sie Ihr Formular für alle zugänglich und nutzbar machen.

Sicherstellen, dass Nutzer den Zweck eines Formularfelds verstehen

Es gibt viele Formularsteuerelemente, aus denen Sie auswählen können. Was haben sie alle gemeinsam? Jedem Formularsteuerelement muss ein <label>-Element zugewiesen sein. Mit dem <label>-Element wird der Zweck eines Formularsteuerelements beschrieben. Der <label>-Text wird visuell mit dem Formularsteuerelement verknüpft und von Screenreadern vorgelesen.

Wenn Sie auf das <label> tippen oder klicken, wird außerdem die zugehörige Formularsteuerung hervorgehoben. es zu einem größeren Ziel machen.

Verwenden Sie aussagekräftiges HTML, um auf integrierte Browserfunktionen zuzugreifen

Theoretisch könnte ein Formular nur aus <div>-Elementen erstellt werden. Sie können es sogar wie eine native <form> aussehen lassen. Worin besteht das Problem bei nicht semantischen Elementen?

Integrierte Formularelemente bieten viele integrierte Funktionen. Sehen wir uns ein Beispiel an.

Optisch sehen das <input> (das erste im Beispiel) und das <div> gleich aus. Sie können sogar Text für beide einfügen, da <div> über ein contenteditable-Attribut. Es gibt jedoch viele Unterschiede zwischen der Verwendung eines geeigneten <input>-Elements und eines <div>-Elements. sieht aus wie ein <input>.

Ein Nutzer eines Screenreaders erkennt <div> nicht als Eingabeelement. und das Formular nicht ausfüllen kann. Der Screenreader-Nutzer hört nur "Name", ohne den Hinweis, dass das Element ein Formularsteuerelement zum Hinzufügen von Text ist.

Durch Klicken auf <div>Name</div> wird das zugehörige <div> nicht hervorgehoben, während das <label> und Die <input> sind mithilfe der Attribute for und id verbunden.

Nachdem Sie das Formular gesendet haben, werden die in <div> eingegebenen Daten nicht in der Anfrage berücksichtigt. Das Anhängen der Daten mit JavaScript ist zwar möglich, Ein <input> macht dies standardmäßig.

Integrierte Formularelemente haben weitere Funktionen. Beispiel: Mit den entsprechenden Formularelementen und dem richtigen inputmode oder type Bildschirmtastatur die passenden Zeichen anzeigt. Attribut inputmode für <div> verwenden können wir das nicht.

Sicherstellen, dass Nutzende das erwartete Datenformat kennen

Sie können verschiedene Validierungsregeln für ein Formularsteuerelement definieren. Beispiel: Ein Formularfeld sollte immer mindestens acht Zeichen haben. Sie verwenden das Attribut minlength, um Browsern die Validierungsregel anzugeben. Wie können Sie sicherstellen, dass Nutzer auch über die Validierungsregel informiert werden? Sag es ihnen.

Fügen Sie Informationen zum erwarteten Format direkt unter dem Formularsteuerelement hinzu. Um es für Hilfsgeräte klar zu machen, das Attribut aria-describedby im Formularsteuerelement verwenden, und ein id in der Fehlermeldung mit demselben Wert, um beide zu verbinden.

Nutzern helfen, die Fehlermeldung für ein Formularsteuerelement zu finden

In einem vorherigen Modul zur Validierung haben Sie gelernt, wie Fehlermeldungen bei ungültigen Dateneingaben angezeigt werden.

<label for="name">Name</label>
<input type="text" name="name" id="name" required>

Wenn ein Feld beispielsweise das Attribut required hat und ungültige Daten eingegeben werden, zeigt der Browser Eine Fehlermeldung neben dem Formularsteuerelement wird angezeigt, wenn das Formular gesendet wird. Screenreader melden die Fehlermeldung ebenfalls.

Sie können auch Ihre eigene Fehlermeldung definieren:

In diesem Beispiel sind weitere Änderungen erforderlich, um die Fehlermeldung mit dem Formularsteuerelement zu verknüpfen.

Ein einfacher Ansatz ist die Verwendung von aria-describedby im Formularsteuerelement, das mit dem id im Fehlermeldungselement übereinstimmt. Verwenden Sie dann aria-live="assertive" für die Fehlermeldung. ARIA-Live-Regionen melden Nutzern von Screenreadern einen Fehler, sobald der Fehler angezeigt wird.

Das Problem bei diesem Ansatz bei Formularen mit mehreren Feldern ist, dass aria-live normalerweise nur bei mehreren Fehlern den ersten Fehler meldet. Wie in diesem Artikel über mehrere aria-live-Ankündigungen für dieselbe Aktion erläutert, können Sie eine einzelne Nachricht erstellen, indem Sie alle Fehler verketten. Ein anderer Ansatz besteht darin, erst ankündigen zu lassen, dass Fehler vorliegen, und dann die einzelnen Fehler anzukündigen, wenn das Feld fokussiert wird.

Sicherstellen, dass Nutzer Fehler erkennen

Manchmal färben Designer den ungültigen Status rot, mithilfe der Pseudoklasse :invalid. Um einen Fehler oder Erfolg zu kommunizieren, sollten Sie sich nie nur auf Farbe verlassen. Für Menschen mit Rot-Grün-Farbenblindheit ein grüner und ein roter Rahmen fast gleich aussehen. Es kann nicht festgestellt werden, ob die Meldung mit einem Fehler zusammenhängt.

Verwenden Sie zusätzlich zur Farbe ein Symbol oder stellen Sie den 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 von Formularsteuerelementen mit CSS ändern. Eine Trennung zwischen visueller Reihenfolge und Tastaturnavigation (DOM-Reihenfolge) ist für Nutzer von Screenreadern und Tastaturen problematisch.

Weitere Informationen dazu, wie Sie die visuelle Reihenfolge auf der Seite folgt der DOM-Reihenfolge.

Nutzern helfen, das derzeit fokussierte Formularsteuerelement zu erkennen

Verwenden Sie die Tastatur zur Navigation. dieses Formular aus. Wussten Sie, dass sich der Stil der Formularsteuerelemente geändert hat, nachdem sie aktiv waren? Dies ist der standardmäßige Fokusstil. Sie können sie mit dem :focus CSS-Pseudoklasse. Egal welche Stile Sie in :focus verwenden, Achten Sie immer darauf, dass der visuelle Unterschied zwischen dem Standard- und dem Fokuszustand gut erkennbar ist.

Weitere Informationen über Entwicklung von Fokusindikatoren.

Sicherstellen, dass das Formular nutzerfreundlich ist

Viele häufige Probleme lassen sich erkennen, wenn Sie das Formular auf verschiedenen Geräten ausfüllen. Verwenden Sie nur die Tastatur, einen Screenreader (z. B. NVDA unter Windows oder VoiceOver auf einem Mac) oder die Seite auf 200 % zoomen. Testen Sie Ihre Formulare immer auf verschiedenen Plattformen, insbesondere Geräte oder Einstellungen, die Sie nicht täglich nutzen. Kennen Sie jemanden, der einen Screenreader verwendet, oder jemand, der Software zur Textvergrößerung verwendet? Bitten Sie die Person, das Formular auszufüllen. Die Überprüfungen der Barrierefreiheit sind großartig, Tests mit echten Nutzenden sind noch besser.

Weitere Informationen zum Ausführen eines Prüfung der Barrierefreiheit und wie Sie mit echten Nutzern testen können.

Ressourcen