Fokus auf die Tastatur

Mit 2 Tasten durch’s Web

Seit nun fast 3 Jahren wird bei der Neugestaltung von ORF.at-Angeboten auch immer auf eine möglichst barrierefreie Umsetzung geachtet und nach den WCAG 2.0 vorgegangen. Ein wichtiger Punkt ist dabei die Tastaturbedienbarkeit zu gewährleisten.

Während in den vergangenen Artikeln das CMS Mojo vorgestellt wurde, möchte ich nun ein Detail der Frontend-Umsetzung näher beschreiben. Von Anfang an war klar, dass mit der Umstellung auf Mojo auch auf eine möglichst barrierefreie Umsetzung im Frontend zu achten ist. Dazu gehört auch der Tastaturfokus. Die WCAG 2.0 legen hierfür zwei wichtige Richtlinien fest:

• Richtlinie 2.1 – Per Tastatur zugänglich: Sorgen Sie dafür, dass alle Funktionalitäten per Tastatur zugänglich sind.
• Richtlinie 2.4 – Navigierbar: Stellen Sie Mittel zur Verfügung, um Benutzer dabei zu unterstützen zu navigieren, Inhalte zu finden und zu bestimmen, wo sie sich befinden.

Leider findet man im Web noch immer zahlreiche Anleitungen zum Entfernen vom gepunkteten Outline, der beim Anklicken eines Links rund um diesen angezeigt wird. Dabei wird vergessen, dass der User so auch eine visuelle Bestätigung des Klicks bekommt. Aber auch für User, die nur mit Hilfe einer Tastatur durch die Webseite navigieren, ist der Tastaturfokus eine wichtige Hilfe, um den aktuellen Standort innerhalb der Seite erkennen zu können. Das muss nicht unbedingt ein Mensch mit Behinderung sein: Zahlreiche aktuelle Mobiltelefone bieten einzig den Cursor zur Navigation an.

Mit der Tastatur navigieren

Wer einmal mit der Tastatur durch’s Web surfen will, der braucht dazu nur 2 wichtige Tasten: Tabulator zum Weiterspringen und Enter, wenn man eine Aktion ausführen will. Das war’s. Hinweis für alle Mac-User: Safari tut sich schwer mit der Tastaturnavigation, am Besten nehmt ihr einen Firefox und stellt manuell den Tabmodus ein. Unter Windows funktioniert das Tabben im Firefox, Internet Explorer, Opera und Chrome problemlos.

Der Tastaturfokus

Grundsätzlich gilt: Alle Links und Formularelemente einer Webseite können den Tastaturfokus erlangen. Dazu muss man entweder auf das Element klicken oder sie mit der Tabulatortaste ansteuern. Mit dem Attribut „tabindex“ können auch alle anderen HTML-Elemente mit einem Tastaturfokus ausgestattet werden.

• tabindex="0" fügt das Element an der aktuellen Position der Tabulatorreihenfolge hinzu. News.ORF.at und sport.ORF.at benutzen diese Variante, um das Bild-Grid mit der Tastatur navigierbar zu machen.
• tabindex="1 … n" fügt das Element an der angegebenen Position der Tabulatorreihenfolge hinzu. ORF.at setzt nummerierte Tabindex-Werte nicht ein und ich würde jedem raten den Seitenaufbau zu überdenken, bevor man zu diesem Mittel greift.
• tabindex="-1" fügt das Element nicht der Tabulatorreihenfolge hinzu, es kann aber durch einen Aufruf der JavaScript-Funktion el.focus(); den Fokus erhalten. Dies ist besonders bei Widgets sehr sinnvoll (z.B. Baumnavigationen oder JavaScript-basierten Menüs), um Screenreader-Nutzern die Navigation zu erleichtern bzw. überhaupt erst zu ermöglichen.

Hervorhebung mit CSS

Mit der CSS-Pseudoklasse „:focus“ kann das fokusierte Element gestaltet werden. Dies geschieht analog zur Pseudoklasse „:hover“, die bei Mouse-Over-Events angewandt wird. Die Reihenfolge der Pseudoklassen spielt dabei eine entscheidende Rolle, denn „:focus“ sollte vor „:hover“ definiert werden. Ansonsten würde der Hover- den Fokus-Zustand überschreiben. Pseudoklassen können übrigens auch kombiniert werden: „a:focus:hover“ wäre der Selektor für einen Link, der den Fokus erhalten hat und währenddessen mit der Maus überfahren wird.

Sprungmarken / Skiplinks

Fast immer findet man auf Webseiten, bei denen Barrierefreiheit zumindest in Grundzügen berücksichtigt wurde, am Beginn sogenannte Sprungmarken. Sie sind herkömmliche Links, die auf wichtige Bereiche (Navigation, Hauptinhalt, Footer) der Webseite verweisen und so die Navigation für blinde und sehbehinderte Menschen erleichtern sollen. Daher werden sie mit CSS-Anweisungen aus dem sichtbaren Bereich geschoben. Allerdings wird hier häufig auf die Tastaturbenutzer vergessen: Benutzt man nun den Tabulator zur Navigation, so sind auch diese Links in der Tabulatorreihenfolge. Dabei sind Sprungmarken auch für sie wichtige Navigationselemente. Erhalten sie den Fokus, müssen sie eingeblendet werden. Bei ORF.at geschieht dies in der linken oberen Ecke.

Tastatursteuerung für Flash-Videoplayer

Seit einem Jahr verwendet iptv.ORF.at einen eigenentwickelten Flash-Videoplayer. Damit dieser auch ohne Probleme mit der Tastatur bedient werden kann, wurden bestimmte Funktionen des Players auch dem clientseitigen JavaScript zugänglich gemacht und können mit Klicks auf einen Link aufgerufen werden. Wie bei Sprungmarken wird die Steuerung mit CSS eingeblendet, sobald der Link den Fokus erhält. Übrigens bietet auch der YouTube Player eine JavaScript-API an.

Der Navigationsfluss

Greift man mit „tabindex“ in das Fokusverhalten ein, so muss der logische Navigationsfluss erhalten bleiben. Da wir von links nach rechts bzw. von oben nach unten lesen, sollte der Fokus auch in dieser Reihenfolge durch die Seite wandern. Ein gutes Beispiel hierfür ist das Bild-Grid von news.ORF.at und sport.ORF.at. Alle Elemente können mit Hilfe der Tabulatortaste ausgewählt werden und werden dafür entsprechend sortiert.

Sackgassen sind ein Problem, das beim sorgfältigen Umgang mit dem Tastaturfokus in Kombination mit semantischem Markup nicht auftreten sollte. Dennoch bin ich schon über viele Seiten gestolpert, bei denen der Tastaturuser in einem Widget gefangen wird oder auch manche Formulare nicht absenden kann, da der Button aus einem div-Element besteht und nur mit einem Mausklick ausgelöst werden kann. Dagegen hilft nur eines: Testen!

Ein Problem bleibt meist: Werbebanner. Leider wird hier häufig sehr schlampig gearbeitet, was sich fatal auf die Barrierefreiheit auswirkt. Denn auch Flash-Banner können barrierefrei gestaltet werden, wenn man das nötige Wissen besitzt. Meist sind aber nicht einmal die grundlegenden Funktionen des Banners mit der Tastatur erreichbar. Hierzu könnte ich wahrscheinlich eine ganze Artikelserie starten - mit vielen Negativbespielen. Aber das Problem lässt sich folgendermaßen zusammenfassen: Solange nicht die ganze Online-Werbebranche mitzieht und ihre Adserver modernisiert, wird sich wenig ändern. Zumindest langfristig sollte aber dank CSS3 und HTML5 Besserung eintreten. Der Apple iAd Producer lässt hier schon einen Blick in die HTML-Bannerzukunft zu.

Fazit

Es gibt viele Gründe, warum User mit einer Tastatur durch eine Webseite navigieren. Gerade die steigende Nutzung mobiler Browser, die häufig nur mit einem Mini-Joystick bedient werden, liefert ein gewichtiges Argument für eine optimierte Tastatursteuerung. Schon mit sehr kleinen CSS-Anpassungen kann man viel erreichen. Oft fehlt nur die :focus-Pseudoklasse vor der :hover-Definition. Wer eigene User Interface Widgets einsetzt, der kommt am tabindex-Attribut kaum vorbei. Standardbibliotheken wie jQuery UI liefern diese Optimierung schon seit einigen Versionen von Haus aus mit und können (fast) bedenkenlos eingesetzt werden.

In den vergangenen Jahren hat sich einiges im Bereich der Barrierefreiheit getan. Mit WAI-ARIA Landmark Roles bzw. auch HTML5 werden Sprungmarken zunehmend an Bedeutung verlieren. Dennoch sind sie heute noch aktueller denn je, wenn man sie richtig und vorallem konsistent einsetzt. In den WCAG 2 finden sich einige ergänzende Punkte zu dieser Thematik.