28.04.2010
Viele Websites nutzen kleine Kalender in der Seitenspalte für eine Übersicht von Veranstaltungen oder auch Blog-Posts. Obwohl dieses Darstellungsformat für blinde und sehbehinderte Menschen nicht gerade ideal ist, kann es durch die richtige Auszeichnung zugänglicher werden.
Komplizierter wird es, wenn zusätzlich zu den Tagen Termin-Informationen angezeigt werden sollen. Einige neuere Umsetzungen von "Flyout-Kalendern" nutzen CSS und JavaScript, um Termin-Informationen dynamisch anzuzeigen. Wir werden uns zwei Beispiele näher ansehen.
Fast immer zeigen Kalender einen ganzen Monat in einer HTML-Tabelle mit sieben Spalten. Bei der Gestaltung gibt es viele Möglichkeiten, aber das Basisformat ist fest etabliert. Die Wochentage bilden die Tabellenüberschriften in der ersten Zeile. Die begrenzte Breite des Kalenders führt dazu, dass die Wochentage meist abgekürzt werden. Selbst die Verkürzung auf nicht eindeutige Anfangsbuchstaben kommt vor (M D M D F S S).
Üblicherweise sind Tage mit Terminen verlinkt zu einer näheren Beschreibung dieser Termine (oder zu einer Übersicht, falls es an einem Tag mehrere Termine gibt).
Die Vertrautheit mit dem Kalendergitter macht es sehenden Nutzern einfach, die verschiedenen Informationselemente zusammenzubringen. Die Spalte führt das Auge von der Datumszahl zum Wochentag, und ein Tooltip über dem Link gibt vielleicht schon einen Hinweis auf den Termin. Screenreader-Nutzer nehmen den Kalender dagegen als lineare Abfolge wahr, es sei denn, sie wählen den Tabellenmodus. Deshalb ist es wichtig, die Beziehungen zwischen Datumszahl, Wochentag und gegebenenfalls Termin durch das richtige Mark-up klar herzustellen.
Der Kalender soll mehr tun, als das Datum von heute hervorzuheben: er soll einen Überblick über Termine bieten. In das enge Gitter passen allerdings keine zusätzlichen Informationen hinein; es ist nur möglich, durch einen Wechsel der Farbe oder anderer Stileigenschaften anzuzeigen, ob es an einem Tag überhaupt einen Termin gibt oder nicht.
Genau genommen sind andere Formen (mit Überschriften strukturierter Text, Tabellen, oder Listen) besser geeignet für eine gute Termin-Übersicht. Also weg mit dem Kalender? Möglich. Doch gehen wir mal davon aus, dass sich der Kunde oder die Webentwicklerin in den Kalender verliebt hat und es nun mal als hübsches Detail auf der Seite haben will.
Da der Linktext in den Inhaltszellen nur eine nackte Zahl ist, muss ein Weg gefunden werden, die Termin-Information außerhalb des Tabellengitters anzuzeigen.
Entwickler, die Termin-Informationen anzeigen wollen, ohne die Seite zu verlassen, können dazu dynamische Elemente verwenden, die eingeblendet werden, wenn der entsprechende Tag den Fokus erhält. Wir werden uns jetzt zwei zugängliche Umsetzungen von Kalendern mit dynamischen Elementen anschauen.
Das erste Beispiel ist der Kalender auf der Website www.einfach-teilhaben.de, ein Informationsportal für Menschen mit Behinderungen, ihre Angehörigen, Verwaltungen und Unternehmen (siehe Abbildung 1). Mit Rücksicht auf die Zielgruppe war es besonders wichtig, das Angebot so zugänglich wie möglich zu machen. Das Frontend wurde mit Nutzern mit verschiedenen Behinderungen getestet und durch Auswertung der Ergebnisse weiter verbessert. (Aperto, die Agentur, die für das Frontend-Design verantwortlich ist, hat die Ergebnisse der Nutzer-Tests veröffentlicht: einfach-teilhaben.de im Usability-Test mit Menschen mit Behinderungen).
Abbildung 1: Kalender auf der Startseite des Informationsportals "einfach teilhaben" (www.einfach-teilhaben.de)
Nur eine Randbemerkung zu dem, was ‘hinter den Kulissen’ passiert: Beim Laden der Seite wird der Kalender dynamisch durch einen AJAX-Request geladen und mit WAI ARIA-Attributen versehen (in diesem Artikel beschäftigen wir uns jedoch nicht näher mit WAI ARIA). Die Navigation zu angrenzenden Monaten aktualisiert dann die Kalenderansicht, ohne dass die Seite neu geladen werden müsste.
Wenn Tastaturnutzer durch den Kalender durchtabben, springt der Fokus zu den Tagen mit Terminen (Links). Der Fokus wird durch Unterstreichung hervorgehoben. Das Drücken der ‘Enter’-Taste öffnet dann eine kleine Popup-Box mit einer Überschrift, etwa "Termine am 7. Mai", unter der dann die Termine des jeweiligen Tages aufgelistet sind. Bei mehr als drei Terminen wird die Liste abgekürzt und der dritte Linkeintrag (etwa, "alle Termine am 7. Mai") führt zu einem tabellarischen Termin-Überblick auf einer separaten Seite. Nach dem Durchtabbben der Links in der Popup-Box springt der Fokus zum nächsten Tag im Kalender, und die Box schließt sich automatisch.
Interessanterweise reagiert der Kalender auf den Mausfokus anders als auf den Tastaturfokus. Wenn man die Maus über einen Tag mit Termin bewegt, öffnet sich die Popup-Box sofort, während der Tastaturfokus nur zum nächsten Tag springt.
Unterhalb der h3-Überschrift "Veranstaltungen im April 2010" sind alle Tage mit Terminen (und nur diese) als h4-Überschriften eingetragen. Darunter folgt dann die Liste von Terminen an dem jeweiligen Tag. Die klare hierarchische Struktur bietet Nutzern, die mit einem eigenen Stylesheet oder ohne CSS unterwegs sind, einen guten Überblick, und erleichtert Screenreader-Nutzern den Zugang über die Überschriftennavigation.
Um für Screenreader-Nutzer und Nutzer ohne CSS aussagekräftigere Beschreibungen zu schaffen, setzt der Kalender unsichtbaren Text ein. Die sichtbare Überschrift über dem Kalender, etwa "April 2010" wird so erweitert zu "Termine / Veranstaltungen im April 2010". Die nackten Nummern im Kalendergitter werden erweitert, so dass statt "sieben" "siebenter April" oder, bei Tagen mit hinterlegten Terminen, etwa "Termine am dreizehnten April" vorgelesen wird.
Wen man nun bei diesem vorausgewählten Link die Enter-Taste drückt, wird der Screenreader noch einmal "Termine am dreizehnten April" (die Überschrift der Popup-Box) vorlesen und danach die verlinkten Termineinträge für diesen Tag. Diese Verdoppelung macht Sinn, da sie eine Bestätigung der Nutzerauswahl liefert. Sie ist nur etwas verwirrend für sehende Nutzer, die den Kalender mit abgeschaltetem CSS sehen (siehe Abbildung 2, "Termine an 13. April").
Abbildung 2: Ansicht des Kalenders bei abgeschaltetem CSS
Ohne CSS ist der funktioniert der Kalender zwar, aber seine visuelle Darstellung ist schlecht. Sie wäre sicherlich besser, wenn das Tabellengitter durch das Setzen des border–Attributs auf "1" sichtbar gemacht würde (dies wurde eventuell vermieden, um unerwünschte Darstellungen der Kalender-Tabelle in älteren Browsern zu verhindern).
Auch bei abgeschaltetem JavaScript ist der Kalender noch nutzbar. Bei Tastaturnutzung gibt es keinen Unterschied bei der Fokussierung, aber der Druck der Enter-Taste auf einem vorausgewählten Termin bringt jetzt keine Popup-Box mehr hervor, sondern führt direkt zu einer Terminansicht auf einer getrennten Seite.
Der Kalender auf 'einfach teilhaben' ist ein gutes Umsetzungsbeispiel für alle, die dieses Format wollen. Er ist gut strukturiert, die Termine sind gut eingebettet, und die Nutzung klappt gleichermaßen gut für Maus und Tastaturnutzer.
wuk.at ist die Website des Werkstätten- und Kulturhauses in Wien, ein Ort mit vielen Veranstaltungen. Die Site hatte im Jahr 2009 einen barrierefreien Relaunch (siehe Abbildung 3).
Bei sehr vielen Veranstaltungen an jedem Tag (manchmal über 30) hat der Kalender eine zentrale Funktion auf der Website. Er ist immer verfügbar - nicht nur auf der Startseite, sondern auch auf anderen Seiten, die Terminübersichten zeigen oder einzelne Veranstaltungen beschreiben.
Abbildung 3: Startseite des Werkstätten- und Kulturhauses Wien (www.wuk.at)
Abbildung 4: Der Mauszeiger über einem Datum zeigt eine dynamische Tabelle mit Veranstaltungen an dem ausgewählten Tag
The WUK-Kalender zeigt ein dynamisches Verhalten, das auf Mausnutzer ausgerichtet ist. Wenn der Mauszeiger über ein Datum bewegt wird, zeigt eine dynamische Tabelle links vom Kalender die Termine an dem ausgewählten Tag und verbirgt damit zeitweise den Seiteninhalt.
Beim Durchtabben des Kalenders mit der Tastatur werden dagegen die Veranstaltungstabellen gar nicht angezeigt. Die Veranstaltungstabelle selbst ist zwar (mit Ausnahme des Kästchens zum Schließen der Tabelle rechts oben) tastaturbedienbar, aber dies spielt wohl kaum eine Rolle, da sie sowieso nicht mittels der Tastatur aufgerufen werden kann.
Als Alternative für Tastaturnutzer springen die Links auf jedem Tag zu getrennten Seiten, die eine äquivalente Liste der Veranstaltungen des Tages anzeigen.
Der Tastaturfokus auf den Kalendertagen wird lediglich über den Systemfokus (gepunkteter Kranz) angezeigt und ist damit wesentlich schlechter sichtbar als der Mausfokus (invertierte Farben).
Sobald man durch das Bewegen des Mauszeigers über einem Tag die dazugehörige Veranstaltungstabelle aufgerufen hat, läuft ein Time-out, dass die Tabelle nach sechs Sekunden wieder schließt - gerade dann also, wenn man angefangen hat, sich die Veranstaltungen genauer anzusehen Abschalten lässt sich dieser Time-out nicht.
Ein anderes Problem betrifft eine kleine Zeitverzögerung, welche die gerade ausgewählte Termintabelle offen hält, falls sich Nutzer entschließen, mit der Maus hinüberzufahren, etwa um den Links zu den Veranstaltungen zu folgen. Ohne diese Zeitverzögerung würde der Mauszeiger bei seiner Bewegung über andere Tage sofort andere Veranstaltungstabellen aufrufen.
Während der Zeitverzögerungstrick für viele junge und kompetente Nutzer gut funktionieren mag, schafft er ein echtes Problem für ältere und unerfahrene Nutzer und Maus-Nutzer mit Bewegungseinschränkungen, die die Maus langsamer führen. Es wird frustrierend sein zu erleben, wie immer wieder die ausgewählte Veranstaltungstabelle durch eine andere ersetzt wird, und zwar gerade dann, wenn man versucht, sie näher zu erkunden. Das Argument, dass man ja auch ebenso gut einfach auf den Tag klicken könnte, um zu der statischen Veranstaltungsübersicht zu gelangen, greift nicht, denn die dynamische Anzeige der Tabelle ‚sättigt' sozusagen die Nutzer-Erwartung und wird oft dazu führen, dass die andere Option überhaupt nicht wahrgenommen wird.
Im Gegensatz zu dem Kalender auf einfach-teilhaben.de weicht die Ordnung der Kalender-Elemente bei Nutzung von CSS deutlich ab von der Reihenfolge in der Ansicht ohne CSS. Hier kommen erst mal die Veranstaltungstabellen für den gesamten Monat, dann folgt der Kalender selbst (der in dieser Ansicht nicht nutzbar ist, es sei denn, man schaltet auf JavaScript ab).
Bei eingeschaltetem CSS zeigt das Durchtabben die Veranstaltungstabellen ja nicht an. Diese sind mit der CSS-Eigenschaft display="none" versteckt, was bedeutet, dass sie von Screenreadern ignoriert werden. So besteht wahrscheinlich kein Unterschied zwischen dem, was dem Tastaturnutzer und dem Screenreader-Nutzer ausgegeben wird. Für sehende Nutzer, die eigene oder keine Styleshets benutzen (wahrscheinlich eine ziemlich kleine Gruppe) ist die lange Übersicht aus hintereinander aufgereihten Veranstaltungstabellen nicht gut strukturiert: es gibt keine Gliederung durch Überschriften (die jeweiligen Tage sind lediglich in den caption-Elementen der Tabellen enthalten).
Wenn im Browser JavaScript deaktiviert wird, wird der Kalender gar nicht angezeigt. Stattdessen teilt ein Statement Nutzern mit, dass zur Ansicht des Kalenders JavaScript benötigt wird, und bietet Links zur Tages-, Wochen-, und Monatsansicht der Veranstaltungen auf anderen Seiten.
Während es dem WUK-Kalender ganz gut gelingt, Maus-Nutzern eine schnelle dynamische Übersicht über die Veranstaltungen des Monats auf der Startseite zu geben, hätte diese Information auch in gleicher Weise für Tastaturnutzer angezeigt werden können. Zumindest gibt es für diese jedoch äquivalente Veranstaltungs-Informationen auf getrennten Seiten.
Die dynamisch eingeblendeten Veranstaltungstabellen schaffen erhebliche Probleme für ältere und unerfahrene Nutzer sowie Nutzer mit motorischen Einschränkungen. Da die Veranstaltungstabelle nicht unmittelbar an das ausgewählte Datum anschließt, ist eine Zeitverzögerungs-Skript notwendig, um den Spalt zu überbrücken: ein Trick, der bei vielen Nutzern nicht funktionieren wird. Das automatische Time-out auf den dynamisch eingeblendeten Veranstaltungstabellen ist nicht nachvollziehbar und sollte besser wegfallen.
Die folgenden Tipps geben Hinweise, wie Kalender zugänglich gestaltet werden können:
pre-Element die Formatierung der Tabellenmatrix übernimmt, sind nicht empfehlenswert, denn für Screenreader-Nutzer ist damit die Zuordnung von Tagen und Daten erschwert. th) und Inhalts-Zellen (td) für die richtige semantisches Auszeichnung. Die (abgekürzten) Wochentage in der ersten Zeile dienen als Überschriften der Daten darunter, deshalb gehören sie in th-Elemente, während die Daten in td-Elemente gehören. colspan undrowspan richtig zu interpretieren. caption-Elements. Eine konsistente Auszeichnung des caption-Elements mit CSS war oft schwierig zu erreichen, deshalb wurde es oft nicht benutzt. Es kann auch überflüssig sein, wenn bereits eine Überschrift über dem Kalender genutzt wird. Wenn auch noch das summary-Attribut, welches Screenreader in der Regel vorlesen, genutzt wird, könnte die gleiche Information am Ende drei Mal vorgelesen werden!abbr-Elements innerhalb der Spaltenüberschriften, wobei der ausgeschriebene Wochentag im title-Attribut des abbr-Elements Platz findet. Das Problem dabei ist, dass es auf individuelle Screenreader-Voreinstellungen der Nutzer ankommt, ob der Inhalt dieses title-Attributs anstelle der Abkürzung vorgelesen wird (es ist nicht die Standard-Einstellung).abbr-Attribut des th-Elements selbst unterzubringen, funktioniert leider nicht mit den aktuellen Versionen der Screeanreader Jaws und NVDA.Do<span class="invisible">nnerstag</span> zeigt die Abkürzung "Do" auf dem Bildschirm, liest aber "Donnerstag" für Screenreader-Nutzer. Der Vorteil ist, dass dies bei den üblichen Screenreadern das Standard-Verhalten ist. Dafür darf allerdings nicht die CSS-Eigenschaft display="none" benutzt werden, um den Text zu verstecken, sonst wird er auch von Screeneadern ignoriert. Stattdessen sollte der versteckte Text mit CSS außerhalb des Viewports positioniert werden.Eine englische Version dieses Artikels gibt es auf bitvtest.eu: Accessible flyout calendars.
Vielen Dank an Marco Zehe, Timo Wirth und Tiffany Wyatt für die hilfreichen Kommentare.
© 2012 DIAS GmbH | Impressum | Barrierefreiheit
bitvtest.de ist ein Webangebot des BIK-Projekts