Technikwürze – Web Standards Podcast

Wir entschuldigen uns für die unregelmäßigen Tonstörungen in Sylvias Audiostream, leider haben wir die Quelle der Störung nicht ausmachen können!

Klassische barrierefreie Formulare

Startpunkt: BIENE 2009 manufactum.de

Wir sehen uns ein klassisches barrierefreies Formular an – ein Formular, um einen Newsletter zu bestellen.
(Soundbeispiel: JAWS)
Screenreader: JAWS NVDA

• setzt man Webstandards in Formularen ein, ist das die beste Voraussetzung für ein barrierefreies Formular

** LABEL (for/id Verknüpfung) und Formfeld eindeutig verbinden (Sound JAWS ohne LABEL, NVDA ohne Verknüpfung mit for/id, NVDA mit for/id-Verknüpfung)

• Verwendung von FIELDSET und LEGEND für inhaltlich abgrenzbare Bereiche des Formulars (Spezial: verschachtelte FIELDSETS)

** Buttons – Bei type=”image” immer darauf achten, das ALT-, name, und value-Attribut zu befüllen (optional title-Attribut) – Probleme mit Schriftgrafiken

• das Formular muss komplett mit der Tastatur bedienbar sein

** Wichtig, weil wird immer wieder vergessen: der Fokus des aktuellen angetabbten Feldes soll erkennbar sein – den Fokus per CSS hervorheben

• Fehlerbehandlung und -kennzeichnung ist wichtig

** fehlerhaftes Feld markieren, nicht nur mit Farbe

** am Anfang des Formulars eine Hinweis auf Fehler anbringen und eine Möglichkeit zu einem oder zu allen Fehlern zu springen

** man muss Fehler schnell erkennen und auch erreichen können

** Wichtig: immer auch einen serverseitigen Fallback vorsehen in der Validierung des Formulars

• Strittige Punkte (historisch gewachsen)

** Tabindex nicht mehr nötig

** Accesskeys nicht mehr nötig

** Felder nicht mehr vorbelegen

** Umsichtig mit dem TITLE-Attribut umgehen

• Screenreader Formmodus: Es werden Informationen ausserhalb von Formularelementen nicht immer vorgelesen

Links

• >>Reine Formsache<< Formularserie auf Einfach für Alle (2007)
• Formulare sind Gespräche: Mitmachbarrieren im Web 2.0 abbauen – Timo Wirth (Vortrag auf dem Best of Accessibility Symposium 2009 PDF-Datei)

WCAG 2 und Formulare

Die WCAG 2 (Web Content Accessibility Guidelines 2.0) bieten ein dreistufiges Verfahren an, für welche Stufe – der barrierefreie Konformitätsgrad ist ansteigend – AAA ist die höchste Stufe, die zu erreichen ist – was erreicht werden soll.

• Der oben angesprochene Einsatz von LABEL (for/id), FIELDSET und LABEL ist zwingend (Level A)
• Verknappung von standardisierten Elementen wie Suchfeldern (TITLE-Attribut nutzen) und Formularfeldern in Datentabellen ist erlaubt, LABEL kann man weglassen.
• clienseitige Validierung ist sogar erwünscht, wenngleich der serverseitige Fallback zwingend ist.

** Fokus auf das erste fehlerhafte Formularfeld und auch wieder zurück zur Fehlerliste

** Es soll ein Mechanismus angeboten werden, dass der Nutzer auf die Fehler direkt zugreifen kann

• Fehlerbehandlung als stufiger Prozess

** Fehlererkennung (Level A) – es muss ein Fehler erkennbar sein ( mit Hilfe von Text, Farbe, Semantik)

** Fehlererläuterung (Level AA) – Fehler sollten erläutert werden mit Beispielen oder Hilfen (Hinweise nah am Formularfeld)

** Fehlerprävention (rechtliche/finanzielle Transaktionen Level AA, sonst Level AAA)

*** Formulare in Schritten genau kennzeichnen

*** Bestätigungsseiten anbieten (mit Checkbox zum letztmaligen Bestätigen am Ende)

Links

• WCAG 2.0, deutsche Übersetzung: Richtlinien für barrierefreie Webinhalte (WCAG) 2.0
• Accessible Forms using WCAG 2.0 (2008)

HTML 5 Formulare

HTML 5 bietet auch viele neue Elemente und Attribut für Fomulare an, die Browserunterstützung ist noch nicht hoch (Opera, Safari). Mit www.findmebyip.com/ kann man auswählen, welche Formelemente schon im genutzten Browser unterstützt werden.

• neue Typen: Email, URL, Datums-Feld, Suchfeld etc.
• neue Attribute: required, autofocus, placeholder z.B.

** autofocus: Fokus springt sofort in das Feld mit dem autofocus-Attribut

*** Screenreader im Formmodus liest dann nicht mehr den Text, der vor dem Formular steht

** placeholder: Vorbelegung von Formularfeldern (funktioniert schon in Chrome und Safari)

• Problem: assistive Technologien lesen das alles noch nicht aus, die haben noch mit der Implementierung von WAI-ARIA zu tun …

Links

• HTML 5 Forms W3C
• The accessibility of HTML 5 autofocus – Bruce Lawson
• HTML 5 Serie: Tipphilfen – Stefanie Rückert Webkrauts
• A Form of Madness
• Have a Field Day with HTML5 Forms – 24 ways
• HTML5: Tool of Satan, or Yule of Santa? – Bruce Lawson  24 ways
• Beispiele

** bei CSS-Gallery

** aus dem 24 ways Artikel

** von Bruce Lawson

WAI-ARIA (Accessible Rich Internet Applications Suite) und Formulare

“WAI-ARIA ist eine Spezifikation, die Hilfen anbietet Rollen, Zustände und Eigenschaften von selbst entwickelten Widgets zu beschreiben, um sie so für Nutzer assistiver Technologien erkenn- und benutzbar zu machen.” (Quelle: Einführung in WAI-ARIA)
Wir bieten nur einen knappen Einblick, wie man WAI-ARIA in Formularen nutzen kann. Screenreader-Anwender erhalten dann viele Zusatzinformationen, die das Ausfüllen eines Formulars wirklich smooth macht. 🙂
Folgende Attribute lassen sich schnell und einfach einsetzen:

• Pflichtfelder kennzeichnen mit aria-required=”true”
• Fehlermeldung: Statusänderungen mit aria-invalid=”true” (Sound JAWS)
• weitere Statusänderungen: aria-checked (u.a. für Checkboxen, Radios), aria-selected (u.a. für Selects)
• Formularfelder eindeutig zu einem Label zuordnen (u.a. für komplexe Formularstrukturen): aria-labelledby

** Der Inhalt des Attributs können eine oder mehrere IDs sein, die den Inhalt des Labels enthalten, der Screenreader liest die Inhalte dann in der Reihenfolge der IDs vor. (Sound JAWS, Sound NVDA)

• Wenn kein Label möglich ist, kann man mit aria-label=”Inhalt des Labels” im Formularfeld ein Beschreibung hinzufügen (vgl. TITLE-Attribut)
• Um zusätzliche Infos oder Hilfen in Formularen für Screenreader zum Formularfeld vorlesbar zu machen: aria-describedby:

** Der Wert ist eine ID, der Screenreader holt sich dann sofort die Inhalte des Elements mit dieser ID und liest die direkt im Formularfeld ein. (Sound JAWS)

Links

• WAI-ARIA Spezifikation
• Einführung in WAI-ARIA – Stefan Walter
• Marco Zehes Easy ARIA Tips
• Martin Kliems Artikel und Demos of Flickr