Formulare gehören zu den wichtigsten Elementen der meisten Websites; ohne sie könnten wir uns nicht anmelden, registrieren, Einkäufe tätigen, Kommentare abgeben, Beiträge veröffentlichen oder viele andere Dinge online erledigen, die wir tagtäglich als selbstverständlich ansehen. Angesichts der Bedeutung von Formularen ist es ziemlich schockierend, dass man auf fast jeder Website eines Fortune-100-Unternehmens – einschließlich vieler Websites von Finanzdienstleistern – Formulare findet, die die grundlegendsten Probleme hinsichtlich der Barrierefreiheit aufweisen. Aus diesem Grund habe ich bei unserem kürzlich stattgefundenen jQuery Accessibility Summit darauf bestanden, eine Sitzung zum Thema Formulare und Formularvalidierung anzubieten, und als sich niemand anderes bereit erklärte, diese zu halten, beschloss ich, die Präsentation selbst zu übernehmen.
Dieser Blogbeitrag wurde ursprünglich auf meinem persönlichen Blog „Unobfuscated“ veröffentlicht.
Sie können die Folien der Präsentation auf Slideshare einsehen; sie sind außerdem am Ende dieses Beitrags eingebettet. Ich werde hier eine Reihe von Blogbeiträgen veröffentlichen, in denen ich die Details ergänze, die in den Folien nicht vermittelt werden können. Dieser erste Beitrag der Reihe befasst sich mit…
Die WCAG 2.0-Richtlinien der Stufe AA, gegen die in Formularen häufig verstoßen wird
Zunächst möchte ich darauf hinweisen, dass ALLE WCAG-2-Richtlinien potenziell auf Formulare anwendbar sind, es jedoch einige gibt, die häufiger zum Tragen kommen. Diese sind:
-
Wahrnehmbar
-
1.3.1 (A) Beschriftungen programmgesteuert ihren Eingabefeldern zuordnen
-
1.3.1 (A) Fehlermeldungen programmgesteuert ihren Eingabefeldern zuordnen
-
1.4.1 (A) Verwenden Sie nicht ausschließlich Farben, um Unterschiede zwischen Feldern (Pflichtfelder, Fehler usw.) zu kennzeichnen.
-
1.4.3 (AA) Achten Sie auf einen ausreichenden Kontrast zwischen Vordergrund und Hintergrund (Beschriftungen, Anweisungen, Fehlermeldungen usw.).
-
Bewährte Vorgehensweise: Beschriftungen, Anweisungen und Fehlermeldungen visuell mit den entsprechenden Eingabefeldern verknüpfen
-
-
Funktionsfähig
-
2.1.1 (A) Wenn Sie Maßnahmen ergreifen, damit Mausbenutzer Fehlerfelder leicht erkennen können, muss für Benutzer, die ausschließlich die Tastatur verwenden, eine gleichwertige Alternative bereitgestellt werden.
-
2.1.1 (A) Alle Funktionen müssen ausschließlich über die Tastatur bedienbar sein
-
2.1.2 (A) Keine Tastaturfalle
-
2.4.3 (A) Fehlermeldungen, die angezeigt werden und für das gesamte Formular gelten, sollten automatisch angesagt werden
-
2.4.3 (A) Anweisungen, die sich ändern oder dynamisch erscheinen, müssen automatisch angesagt werden
-
2.4.3 (A) Die Reihenfolge der Elemente im Formular muss mit der visuellen Reihenfolge übereinstimmen
-
2.4.7 (AA) Es muss eine visuelle Fokusanzeige vorhanden sein, die Tastaturbenutzern jederzeit anzeigt, wo sich der Fokus befindet.
-
-
Verständlich
-
3.2.1 (A) Ereignisse im Fokus sollten keine Aktionen auslösen, die den Benutzer verwirren oder desorientieren könnten
-
3.2.2 (A) Änderungen, die aufgrund von Benutzereingaben erfolgen, sollten den Benutzer nicht verwirren oder desorientieren
-
3.3.3 (AA) Fehlermeldungen sollten, soweit dies möglich ist und die Sicherheit nicht beeinträchtigt, Vorschläge zur Behebung der Fehler enthalten.
-
3.3.4 (AA) Befindet sich das Formular auf einer Finanz- oder Test-Website oder hat es rechtliche Auswirkungen, muss dem Nutzer die Möglichkeit gegeben werden, seine Eingaben vor dem Absenden zu überprüfen.
-
-
Robust
-
4.2.1 (A) Rolle, Wert, Name und Status aller Formularelemente sollten in allen dynamischen Zuständen des Formulars korrekt sein
-
Ihr könnt mir auf Twitter unter @dylanbarrell folgen
