Finden und Beheben von Barrierefreiheitsproblemen in Formularen mithilfe von Accessibility Insights for Web

5 Minuten

Eine der wichtigsten Möglichkeiten, die Benutzern zur Interaktion mit einer Webanwendung zur Verfügung steht, ist die Verwendung von Formularen zum Übermitteln von Informationen. Bei der Erstellung Ihrer Formulare sind einige wichtige Aspekte zu beachten, damit alle Benutzer sie durchgehen, ausfüllen und übermitteln können.

Grundsätzlich sollten Sie HTML in dem Sinne verwenden, wie es entworfen wurde. Standardmäßige HTML-Formularelemente sind für Barrierefreiheit vorgesehen, aber diese Barrierefreiheitsfeatures können unbewusst leicht mit der neuesten JavaScript-Bibliothek oder überschlauem CSS überschrieben werden.

Bezeichnungen

Jedem Eingabetag in Ihren Formularen sollte ein <label>-Tag zugeordnet sein, um es zu identifizieren. Dieses Tag unterscheidet sich davon, einfach Text auf dem Bildschirm neben dem Eingabeelement zu platzieren, da Bezeichnungen den Eingabeelementen programmgesteuert zugeordnet werden. Sprachausgaben lesen z. B. den Bezeichnungstext, wenn das Eingabeelement im Fokus steht.

Durch das Auswählen einer Bezeichnung wird die Eingabe aktiviert und die Interaktion vereinfacht. Davon profitieren auch Benutzer von Touchscreengeräten. Sie müssen nicht mehr ein winziges Kontrollkästchen auf einem Smartphone treffen, sondern können stattdessen einfach auf die Bezeichnung tippen.

Hier sehen Sie ein Beispiel eines Eingabetextfelds mit zugeordneter Bezeichnung:

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

Überprüfung und Fehlermeldungen

Pflichtfelder

Wir beginnen mit dem einfachsten Fall: Pflichtfelder. Anstatt auf diese Felder mithilfe einer Farbcodierung oder anderer benutzerdefinierter Benutzeroberflächenelemente hinzuweisen, können Sie das required-Attribut für das HTML-Eingabeelement verwenden. Sprachausgaben können dieses Attribut verarbeiten, und Benutzer in allen Browsern sehen die Pflichtfeldinteraktion auf der Standardbenutzeroberfläche für ihre Plattform.

<input type="text" id="name" required>

Wenn Sie für obligatorische Elemente ein stärker visuell ausgerichtetes Design einbeziehen möchten, können Sie den CSS-Pseudoselektor für erforderliche Elemente verwenden. Es ist in Ordnung, andere Stile bereitzustellen, aber die Verwendung des required-Attributs ist ein allen Benutzern zugänglicher Hinweis. Mit dem folgenden CSS-Stil wird die Rahmenfarbe für Textpflichtfelder auf Rot festgelegt:

input:required
{
  border-color: red;
}

Eingabetypen

HTML-Formularelemente bieten umfassende Validierungsunterstützung für gängige Eingabetypen. Anstatt beispielsweise benutzerdefiniertes JavaScript und HTML zum Anzeigen einer Datumsauswahl zu verwenden, können Sie einfach diesen Code verwenden:

<input type="date" id="birthday">

Dieser Code stellt ein natives Popupfenster für die Datumsauswahl für Browser und Betriebssystem des Benutzers bereit. Die Datumsauswahl wird auf Barrierefreiheit getestet und behandelt die Validierung für Sie. Es wird eine Vielzahl von Eingabetypen unterstützt, für die bisher eine benutzerdefinierte RegEx-Validierung, Benutzeroberflächenelemente und JavaScript erforderlich waren:

Email
Date
Month (Monat)
Woche
Time
Range
URL
Color

Jetzt können Sie also weniger Code schreiben und dabei die Barrierefreiheit verbessern. Es ist eine Win-Win-Situation!

Aktivierreihenfolge

Benutzer, die über eine Tastatur oder die Sprachausgabe durch Ihr Formular navigieren, verlassen sich auf die Aktivierreihenfolge. Dies funktioniert, solange Ihr Formulardesign nicht zu kompliziert ist, oder Sie etwas zu Ausgefallenes ausprobieren. Auf den meisten Formularen kann die Aktivierreihenfolge kaum durcheinander gebracht werden. Es ist jedoch wichtig dieses Feature zu Testen.

Sie können die Aktivierreihenfolge testen, indem Sie die TAB-TASTE auf der Tastatur auswählen und die Interaktion überprüfen. Wie wir jedoch in der nächsten Übung sehen, kann Accessibility Insights für Web diese Tests viel einfacher machen.

Formularübermittlung

Wenn ein Benutzer das Formular fertig ausgefüllt hat und es übermitteln möchte, ist nichts frustrierender als ein zu komplizierter Prozess. Die Formularübermittlung können Sie am besten mit einem einfachen <input type="submit">-Element unterstützen:

<form>
  <input type="text" id="name" required>
  <input type="date" id="birthday">
  <input type="submit">
</form>

Sie haben das Schema wahrscheinlich bereits verstanden: Wenn Sie das integrierte HTML-Formularverhalten verwenden, anstatt benutzerdefiniertes JavaScript und Benutzeroberfläche miteinander zu verbinden, ist Ihr Formular besser für verschiedene Browseroberflächen nutzbar.

Accessibility Insights for Web

Accessibility Insights for Web ist eine Erweiterung für Google Chrome und Microsoft Edge. Wir werden Accessibility Insights for Web in den folgenden Übungen verwenden, um Probleme mit der Barrierefreiheit in unserer Beispielanwendung zu identifizieren und zu beheben.

Die Erweiterung unterstützt die folgenden primären Tools:

FastPass ist ein einfacher, zweistufiger Prozess, mit dem Entwickler häufige Probleme mit der Barrierefreiheit mit großen Auswirkungen in weniger als fünf Minuten identifizieren können. Für dieses Szenario übernimmt das Tool folgende Aufgaben:
- Das Tool überprüft automatisch die Konformität mit ungefähr 50 Barrierefreiheitsanforderungen.
- Es bietet klare Anweisungen und ein visuelles Hilfsprogramm, mit dem Sie kritische Probleme mit der Barrierefreiheit im Zusammenhang mit dem Tastaturzugriff leicht erkennen können. Zu diesen Problemen gehören fehlende Tabstopps, Tastaturfallen und eine falsche Aktivierreihenfolge.
Assessment: Mit diesem Tool kann jeder Benutzer mit HTML-Kenntnissen überprüfen, ob eine Web-App oder Website den Richtlinien für die Barrierefreiheit von Webinhalten (Web Content Accessibility Guidelines, WCAG) der Version 2.1, Level AA entspricht. Für dieses Szenario übernimmt das Tool folgende Aufgaben:
- Das Tool überprüft automatisch die Konformität mit ungefähr 50 Barrierefreiheitsanforderungen.
- Enthält Schrittanleitungen, Beispiele und Leitfäden zur Problembehandlung für ca. 20 manuelle Tests. Viele Tests werden unterstützt durchgeführt, d. h. das Tool identifiziert die Testinstanzen oder stellt ein visuelles Hilfsprogramm zur Verfügung.
Andere Tools bieten schnellen Zugriff auf Visualisierungen, mit denen Sie Probleme hinsichtlich der Barrierefreiheit identifizieren können

Da Sie nun mit den Grundlagen vertraut sind, können wir in der nächsten Übung die Website der Pizzeria korrigieren.

Überprüfen Sie Ihr Wissen

Weiter