Navigation

Darstellung anpassen

Service-Menü

Sprachversionen

Suche



Inhalt

Infothek

Dynamische Inhalte
Barrierefreie Kalender

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.

Das Kalender-Gitter

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.

Informationen zu Ereignissen anzeigen

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.

Beispiel 1: Der Kalender auf einfach-teilhaben.de

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).

Kalender auf einfach-teilhaben.de, Grundzustand und mit dynamisch angezeigter Box

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.

Maus- und Tastatur-Nutzung

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.

Aussagekräftige Reihenfolge (Ansicht ohne CSS)

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.

Die Nutzung von verstecktem Text

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").

einfach-teilhaben Kalernder in der Ansicht ohne CSS

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).

Graceful degradation

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.

Zusammenfassung

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.

Beispiel 2: Der Kalender auf wuk.at

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.

Startseite des Werkstätten- und Kulturhauses Wien

Abbildung 3: Startseite des Werkstätten- und Kulturhauses Wien (www.wuk.at)

WUK-Kalender mit angezeigter dynamischer Veranstaltungs-Tabelle

Abbildung 4: Der Mauszeiger über einem Datum zeigt eine dynamische Tabelle mit Veranstaltungen an dem ausgewählten Tag

Maus- und Tastatur-Nutzung

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).

Timing-Probleme

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.

Aussagekräftige Reihenfolge (Ansicht ohne CSS)

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).

Graceful degradation

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.

Zusammenfassung

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.

Tipps für die Umsetzung barrierefreier Kalender

Die folgenden Tipps geben Hinweise, wie Kalender zugänglich gestaltet werden können:

  • Nutze eine richtige Datentabelle. Umsetzungen die eine Tabelle mit nur zwei Zellen nutzen, in denen das pre-Element die Formatierung der Tabellenmatrix übernimmt, sind nicht empfehlenswert, denn für Screenreader-Nutzer ist damit die Zuordnung von Tagen und Daten erschwert.
  • Nutze Überschriften-Zellen (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.
  • In vielen Fällen gibt es über dem Kalender Navigationslinks zu vergangenen und zukünftigen Monaten. Solche Navigationslinks (oder auch Überschriften wie "April 2010") sollten nicht in eine verbundene Zelle der ersten Tabellenzeile gesteckt werden. Dadurch wird die Tabelle komplexer, und Screenreader haben es schwer, Tabellen mit colspan undrowspan richtig zu interpretieren.
  • Gebe dem Kalender eine klare Überschrift. Manche Quellen (etwa Accessible Calendars for Blogs and Websites) empfehlen dafür die Nutzung des 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!
  • Setze Abkürzungen sinnvoll ein. Es gibt verschiedene Ansätze für die Abkürzungen der Wochentage in der Kopfzeile des Kalenders:
    • Eine Option ist die Verwendung des 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).
    • Die eigentlich elegantere Option, den ausgeschriebenen Wochentag im abbr-Attribut des th-Elements selbst unterzubringen, funktioniert leider nicht mit den aktuellen Versionen der Screeanreader Jaws und NVDA.
    • Vielleicht die beste Option ist die Nutzung von verstecktem Text: 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.
  • Nutze versteckten Text, um die Ausgabe für Screenreader zu verbessern. Wie schon im vorangehenden Beispiel gezeigt, ist versteckter Text ein guter Weg, die Ausgabe für Screenreader-Nutzer verständlicher zu machen. "Dreizehnter Mai" (oder, falls auch Überschriften vorgelesen werden, "Donnerstag, dreizehnter Mai") enthält mehr Kontext und wird vielen angenehmer sein als bloß "dreizehn". Die größere Wortfülle ist natürlich auch ein Nachteil, aber wahrscheinlich für Screenreader-Nutzer, die häufig geübt sind, nicht relevante Ausgaben schnell zu überspringen, kein wirkliches Problem. Der Zusatz etwa von "Termine am" als versteckter Linktext, so dass als voller Linktext "Termine am dreizehnten Mai" ausgegeben wird, macht das Ziel des Links in sich eindeutig.
  • Falls dynamische Container für die Anzeige von Veranstaltungs-Informationen eingesetzt werden, sorge dafür, dass alle Container-Elemente auch über die Tastatur zugänglich sind und sinnvoll innerhalb der Fokusreihenfolge des Kalenders Platz finden. Sorge dafür, dass sich dynamische Container automatisch wieder schließen, wenn der Fokus sie durchlaufen hat.

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.