Auf jeder Webseite sind sie zu finden: Formulare. In der vorherigen und dieser Technikwürze wollen Sylvia Egger, Sascha Postner und Daniel Jagszent das Thema von allen Seiten beleuchten. In dieser Folge geht es um barrierefreie Formulare, mit Einblicken in HTML5 und WAI-ARIA.

Diese Folge jetzt anhören

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
  • 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

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

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

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

Diese Folge jetzt anhören

Tags: , , , ,

Dieser Beitrag wurde am Sonntag, 27. Dezember 2009 um 08:00 Uhr in der Kategorie Podcast, Technikwürze Total veröffentlicht.
Du kannst einen Kommentar hinterlassen, oder einen Trackback von deiner Seite aus senden.

Kommentare

  • Avatarbild von David David
    am 27. Dezember 2009, 13:34 Uhr

    Wieder einmal eine sehr informativer Podcast. Vorallem ist mir heute mal wieder bewusst geworden, dass ich trotz Beschäftigung mit Webstandards und Barrierefreiheit noch das ein oder andere besser machen kann.

    Die MP3 im RSS-Feed ist übrigens nicht korrekt. Ist ein Screenreader-Beispiel.

  • Avatarbild von Sascha Postner Sascha Postner
    am 27. Dezember 2009, 15:01 Uhr

    @David: Wir wollten die Beispiele im Textverlinken und da hat Wordpress die Links irgendwie in den Feed geschoben. Der Feed sollte bereits gefixt sein. Trotzdem Danke für den Hinweis!

  • Avatarbild von Masterk Masterk
    am 27. Dezember 2009, 19:19 Uhr

    Öhh – das was ich per iTunes runtergeladen habe, war nicht wirklich informativ…. “Tab Eingabeliste, Tab”

  • Avatarbild von Sascha Postner Sascha Postner
    am 27. Dezember 2009, 19:31 Uhr

    Wie erwähnt gab es heute morgen ein Problem mit dem RSS-Feed, mittlerweile sollte aber alles wieder im Lot sein. Sorry für die Schwierigkeiten…

  • Avatarbild von ts ts
    am 28. Dezember 2009, 10:48 Uhr

    Die Tonstörungen hören sich nach kaputten Headset an. Das headset ist neu soweit ich weiss tja… defektes Kabel, Wackelkontakt löst gerne die Geräusche aus. Ich will ja nicht pingelig sein aber erst Geld einsammeln für Audioequip und dann so eine Folge raushauen….

    Guten Rutsch…

  • Avatarbild von Sylvia Egger Sylvia Egger
    am 28. Dezember 2009, 10:58 Uhr

    @ts

    Ich habe den Ton bei der Aufnahme nicht gehört, das hatten mir nur die anderen rückgemeldet. Das Headset ist neu und ich hatte das angetestet und es schien in Ordnung. Ich werde der Ursache auf den Grund gehen. Das tut mir leid. Wenn es so stört, muss die Sendung halt rausgenommen werden.

    Aber dem Team das vorzuwerfen, ist nicht wirklich fair, weil das eben live ist und ich das nicht nachvollziehen konnte und das ja über verschiedene Stationen zusammengeführt wird. Wie gesagt, ich bin dafür, die Sendung rauszunehmen. Kein Problem.

  • Avatarbild von Sascha Postner Sascha Postner
    am 28. Dezember 2009, 11:02 Uhr

    @ts: Es gibt sicherlich einige Dinge die diese Störungen ausgelöst haben könnten. Leider ließ sich das auf die Schnelle nicht beheben. An dieser Stelle aber die Spendenaktion einzubeziehen ist vielleicht etwas “unüberlegt”.
    Zum einen handelt es sich wie du ja selbst erwähnt hast um ein neues Gerät, das einfach a priori defekt war. Zum anderen handelt es sich bei dem Equipment der meisten Co-Moderatoren nun einmal um Eigenmaterial.

  • Avatarbild von mischa gerloff mischa gerloff
    am 28. Dezember 2009, 12:50 Uhr

    (Sorry, das wird etwas länger)

    Hurra, hurra! Das TW-Team füttert einen Troll.
    Hallo??? Da stellt ihr eine zweiteilige, hochinformative Sendung über ein wichtiges Thema kostenfrei ins Netz, in der es zugegeben kurze unschöne Störungen gab, die ihr im Vorfeld schon entschuldigt habt. Aber kaum nörgelt irgendein Heini rum, wird sofort alles in Frage gestellt und ihr haltet es für nötig, euch ggü. ts (= trübe schüssel?) zu rechtfertigen …

    Bitte einfach mal mehr Standing entwickeln :-) 158 Technikwürzen belegen, daß dieser Podcast wichtig ist. Ich will jetzt nicht mit anderen Podcasts kommen, deren Audioqualität z.T. unterirdisch ist (einige sehr renommierte US-Sendungen sind akustisch eher heftig), aber das nimmt man halt in Kauf (bzw. eben nicht in Kauf, weil ja kostenfrei).

    Merksatz für die deutschsprachige Öffentlichkeitsarbeit: “Willst Du Trolle: Spendenrolle.” Kaum drückt mal jemand Geld ab – oder noch besser: Wird nur mal um Spenden angefragt -, kommt mit 150%iger Sicherheit irgendein Dödel daher, der einfach nur rumpampt, weil er vielleicht 2 EUR gespendet hat. Ätzend. Ich will hier auch gar nicht wirklich auf die “Chris-Heilmann-Affaire” eingehen. Aber wenn sich da in der dt. Szene nicht bald der Wille zum Kommentarlöschen einstellt und zum freundlicheren Umgangston einstellt, sehe ich für die Stimmung auf Seiten der Macher schwarz. Ab und an ein herzliches “Geh sterben!” an solche Schlechtelauneverbreiter wäre sicher gut für euch und die gesamte Kommunikationskultur. Wer mir in meiner Wohnung in die Ecke speibt, fliegt halt raus. Zumal diese Art von Speiben nichts, aber auch gar nichts bringt.

    Viele weitere TWs wünscht sich
    mischa – und euch ein tolles 2010!

  • Avatarbild von Sascha Postner Sascha Postner
    am 28. Dezember 2009, 14:30 Uhr

    Schön gesagt und ich musst beim lesen mehrfach grinsen! :) Du hast sicherlich größtenteils recht. Bei mir ist der Frustfaktor allerdings nicht noch nicht sonderlich hoch und IMHO ist eine freundliche und trotzdem bestimmte Antwort letztlich besser als einen Kommentar kommentarlos zu löschen! ;)
    Dir auf jeden Fall Danke für das positive, ausführliche und dadurch beflügelnde Feedback!

  • Avatarbild von macx macx
    am 28. Dezember 2009, 14:31 Uhr

    Ich denke auch, dass Inhalt hier im Vordergrund stehen sollte. Dennoch: Das neue Equipment, welches wir über die Spenden finanziert haben, steht in unserem Hauptstudio in Hannover. Nur halten sich dort Marcel und ich auf. Alle anderen TW-Moderatoren erstellen Ihre Beiträge weiterhin von ihren Heimatorten aus und die sind weit verstreut.

  • Avatarbild von mischa gerloff mischa gerloff
    am 28. Dezember 2009, 17:55 Uhr

    Hallo, Macx, wenn es vorproduzierte Beiträge der TW-Moderatoren wären, die ständig mit solchen Störungen ins Netz gestellt würden, dann würde ich das Motzen ja verstehen (Verständnis hätte ich dann wahrscheinlich immer noch nicht, hihi). Aber das war eine Liveaufzeichnung per Skype, mit einem Soundfehler den ich so noch nie gehört habe (ich arbeite zeitweise als Tonmann für EB-Teams). Dessen Fehlerquelle sollte sicher noch mal mit Sylvia in einem Testlauf untersucht werden.

    Ich habe schon für einige Projekte gespendet, aber nie für mich in Anspruch genommen, daß die jetzt aber mal sofort alles so machen sollen, wie ich das will. Und man höre und staune: Ich zahle sogar freiwillig GEZ (und finde vielleicht 20% im TV gut – aber das Radio! Oh, ich schweife ab …). Und wenn einem nach so einer Sendung, für dessen Intensität ich euch noch mal loben möchte, nur einfällt, über den Tonfehler zu meckern, dann weiß ich auch nicht.
    Daß anderen sonst nicht viel einfällt, wundert mich aber auch nicht :-) Das war für mich fast ein Webinar, das ich erst mal verdauen muß. Aber die doch zahlreichen Tweets zeigen, daß es keine schlechte Sendung gewesen sein kann (um jetzt mal typisch dt. tiefzustapeln – in den US würde wahrscheinlich “awesome” benutzt, hihi)
    Viele Grüße,
    mischa – der natürlich nicht den ersten, lobenden Kommentar von David übersehen hat.

  • Avatarbild von ts ts
    am 2. Januar 2010, 07:43 Uhr

    Erstmal frohes neues Jahr 2010. Ich wollt mich nochmal für mein unüberlegten Kommentar entschuldigen. Genervt sollte man nicht kommentieren. Den Content wollte ich nicht in Zweifel ziehen.

    Vielen Dank für die vielen informativen Podcasts die ihr produziert habt.

  • Avatarbild von Sascha Sascha
    am 2. Januar 2010, 23:05 Uhr

    @ts: Na dann ist ja alles geklärt.
    Frohes Neues!

    @tw-team: Gute Arbeit. Freue mich schon auf die nächste Ausgabe.

  • Avatarbild von rockpianist rockpianist
    am 3. Januar 2010, 19:15 Uhr

    Danke für diese informative Sendung. Ich bin der Meinung, gerade bei den Formularen wachsen Barrierefreiheit und Usability für gesunde Menschen zusammen.
    Es gibt immer noch genügend Formulare, bei denen man wegen einer falschen Eingabe gleich den Formularinhalt gelöscht bekommt.
    Unklare Anforderungen für Passwörter usw sind schon fast die Regel.
    Gruß rp

  • Avatarbild von Sven Sven
    am 6. Januar 2010, 07:53 Uhr

    Danke für die Soundbeispiele der Screenreader (ist ja furchtbar, was man hören müsste, wenn man manche Formulare im Netz sieht). Ich hab grad noch Links zum Thema entdeckt: http://www.bbc.co.uk/blogs/webdeveloper/2010/01/always-read-the-label.shtml und http://wiki.github.com/fnagel/jQuery-Accessible-RIA zum Thema WAI-ARIA mit jQuery

Und was hast du zum Thema zu sagen?

Fülle bitte alle mit *-gekennzeichneten Felder aus.


Du darfst Textile verwenden, um deinen Beitrag auszuzeichen.