So geschah es, dass ich eines Tages von jemandem ein Mail erhielt, in dem ich aufgefordert wurde in Doodle meine Daten für einen möglichen Termin einzugeben. Ich klickte auf den Link und landete in Doodle. Ich fand eine Tabelle mit Daten und Uhrzeiten sowie unzählig untereinander gereihten Kontrollkästchen. Zu erwähnen sei hier vielleicht noch, dass ich mit dem Screenreader JAWS und einer Braillezeile arbeite. Ich nahm also an, dass ich eines dieser Kontrollkästchen aktivieren muss, um einen vorgeschlagenen Termin zu bestätigen. Tja, aber wie soll das gehen, wenn bei jeder Anwahl eines Kontrollkästchens JAWS nur «Kontrollfeld nicht aktiviert» sagt?
Was hier für jemanden, der ohne JAWS ganz gut zurecht kommt, auch völlig problemlos zu bedienen ist, ist für einen JAWS-Anwender problematisch. Um es gleich hier an einem Beispiel zu zeigen, habe ich in Doodle einen Testeintrag erstellt:
[Beispiel in neuem Fenster öffnen]
JAWS stellt dies auf der Zeile wie folgt dar:
Tabelle mit 9 Spalten und 4 Reihen
Aug. 07
Mo
6
Mi
8
Fr
10
08:00
14:00
08:00
10:00
13:00
15:00
17:00
14:00
Ihr Name (Eingabefeld)
Kontrollfeld nicht aktiviert
Kontrollfeld nicht aktiviert
Kontrollfeld nicht aktiviert
Kontrollfeld nicht aktiviert
Kontrollfeld nicht aktiviert
Kontrollfeld nicht aktiviert
Kontrollfeld nicht aktiviert
Kontrollfeld nicht aktiviert
Tabellen ende
Dass JAWS jedes Element, jeden Link und jede Zelle in einer separaten Zeile anzeigt, ist zur Orientierung sehr hilfreich. Dafür müssen aber Inhalte entsprechend beschrieben oder gekennzeichnet werden. Bei diesem Beispiel habe ich folgende Lösung entwickelt.
Title-Attribut für Checkbox
Beim Lesen des Quellcodes habe ich entdeckt, dass der Programmierer von Doodle das Datum und die Uhrzeit bereits im «name-Attribut» verwendet hat. Doch leider liest JAWS dieses Attribut nicht aus. So habe ich die Werte kopiert und ein «title-Attribut» erstellt.
Originalquellcode von Doodle:
<INPUT type=checkbox value=X name=2007-08-0608:00>
Meine Ergänzung:
title="06.08.2007, 08:00"
Ergebnis:
<INPUT type=checkbox value=X name=2007-08-0608:00 title="06.08.2007, 08:00">
[Ergebnis in neuem Fenster öffnen]
Das im Attribut «Title» enthaltene Datum sowie die Uhrzeit wird nach dieser Ergänzung von JAWS per Sprache und über die Breillezeile nun ausgegeben. Visuell ist aber keine Änderung festzustellen. Der JAWS-Nutzer könnte so die Terminvorschläge sicher und mühelos angeben.
Labels statt Title
Eine weitere Lösung ist, die Kontrollkästchen mit unsichtbaren Labels zu versehen. So könnte dann der Code aussehen:
<INPUT id=200708060800 type=checkbox value=X name=2007-08-0608:00>
<label for=200708060800><span class="unsichtbar">06.08.2007, 08:00</span></label>
Die zweite Variante ist zwar etwas komplizierter, entspricht aber den WCAG-Richtlinien (WCAG = Web Content Accessibility Guidelines). Hinweise zum Erstellen von unsichtbaren Links finden Sie im Blog-Beitrag vom 14.02.2007
