Wenn eine Website nicht mit der Maus, sondern per Tastaturbedienung gesteuert werden soll – oder muss -, führen oft unbedachte Kleinigkeiten im Webdesign zu großen Hindernissen. Da Barrierearmut im Web viel damit zu tun hat, möglichst unabhängig von nutzenden Geräten zu sein, ist eine Bedienung per Tastatur ein wichtiges Kriterium für alle, die Ihre Webseiten „zugänglicher“ gestalten wollen. Denn viele mobile Geräte verfügen über keine Maus und bieten nur unzureichenden Ersatz. Zudem ermöglichen assistive Werkzeuge für Websurfer mit Behinderungen die Bedienung oft dadurch, dass eine Tastaturbedienung emuliert wird. Auch diese Werkzeuge scheitern, wenn die Webseite nicht oder nur schlecht ohne Maus zu benutzen ist.

Generell ist (fast) jede Webseite grundätzlich tastaturbedienbar, solange sie sich z. B. gewöhnlicher Links bedient. Der Browser ermöglicht per TAB-Taste einen Wechsel zwischen verschiedenen „klickbaren Zielen“ wie Links und Schaltern oder Eingabefeldern; die Eingabetaste folgt einem so aktivierten Link oder „klickt“ auf die Schaltfläche. Warum sollte man sich also Gedanken darüber machen, ob eine Seite nun gut oder schlecht per Tastatur bedient werden kann? Weil der Teufel eben im Detail steckt. Wie gut oder schlecht die tatsächliche Bedienung ohne Maus funktioniert, probiert man daher am besten in mehreren Schritten selbst aus.

Tastaturbedienung selbst testen

Normalbetrieb: Legen Sie zunächst einmal die Maus zur Seite und versuchen Sie allein mittels TAB und ENTER, Ihre Website zu bedienen, indem Sie sich durch die Navigation hangeln, Detailseiten aufrufen und Links verfolgen, die direkt im Text untergebracht sind. Das geht doch eigentlich ganz gut, oder? Vielleicht ist hier oder da die Reihenfolge unlogisch, alles in allem aber scheint die Site (hoffentlich) bedienbar.

Kleiner Viewport: Verkleinern Sie doch mal das Browserfenster auf Maße jenseits der üblichen Dimensionen, so dass die sonst ganz praktische Breite von z. B. 1000 Pixeln deutlich unterschritten wird. Zweck der Übung ist es, einen horizontalen Scrollbalken zu erzwingen; also einen Teil der Seite nach rechts aus dem unmittelbar sichtbaren Bild zu schieben, wenn dies das Design Ihrer Website nicht durch stets „volle Breite“ verhindert. Wie sieht es jetzt mit der Bedienbarkeit aus? In der Regel kommt es nun zu ersten Verwirrungen durch TAB-Sprünge auf „unsichtbare“ Ziele… oder einen ständig hin und her ruckelnden Bildschirm.

CSS aus: Nicht nur einige mobile Geräte, sondern vor allem Screenreader & Co. zeigen nicht unbedingt das, was mühselig per HTML und CSS in die gewünschte Reihenfolge gebracht wurde. Wiederholen Sie also den Test mit deaktiviertem CSS-Layout, indem Sie z. B. ANSICHT – WEBSEITEN-STIL – KEIN STIL in Firefox wählen. Wenn hier nun die Reihenfolge der Inhalte und auch der Links ganz anders daher kommt als beim ersten Test, liegt das entweder an Tabellen, die für die Herstellung des Layouts verwendet wurden, und / oder an CSS-Techniken wie Float oder absolute Positionierung, die es erlauben, Informationen am Bildschirm und im Quellcode vollkommen unterschiedlich anzuordnen.

Typische Probleme und Lösungen

Üblicherweise scheitert die zügige Bedienung in der Regel an drei verschiedenen Dingen, die Sie in der einen oder anderen Form ggf. beim Test selbst festgestellt haben:

• falsche Reihenfolge von Links / Linkblöcken oder auch Eingabefeldern in Formularen
• unlogische Anordnung der Inhalte
• „lange Wege“ aufgrund von ständig gleichen Kopfbereichen der Seiten bis zum Hauptinhalt

Außerdem erscheint die Bedienung per Tastatur oft unnötig schwerfällig im Vergleich zu einer Desktopanwendung, da es dort erlernbare Hotkeys gibt, die eine zügige Aktivierung bestimmter Kommandos begünstigen.

Je nachdem, wie viel Wert Sie auf eine bessere Tastaturbedienung legen und aus welchem Grund Sie dies tun, können Sie verschiedenste Mittel zur Verbesserung einsetzen. Ob aber echte Barrierefreiheit, bessere Konsumierbarkeit mittels mobiler Geräte, ein allgemein leichterer Zugang für Menschen mit Behinderungen oder was auch immer Ihre Motivation ist – oder weil Ihre Website eine echte Anwendung darstellt, die viel und täglich genutzt werden soll -, die Grundlage für gute Ergebnisse und möglichst wenig Aufwand ist ein Seitenquellcode, der möglichst aufgeräumt ist und die natürliche Reihenfolge des Inhalts beibehält. Und wenn Sie sich auch bei Formularen darum bemühen, möglichst ohne Tabellen auszukommen, stimmt in der Regel auch die logische Reihenfolge der Felder.

Für den Fall, dass speziell bei Formularen diese Reihenfolge nicht stimmt, setzen Sie das Attribut tabindex ein. Das kann z. B. dadurch zu Stande kommen, dass Sie einen mehrspaltigen Aufbau des Formulars mittels float hergestellt haben. Bei Links hingegen sollte dieses Attribut kaum erforderlich sein, solange Sie für Haupt- und Unternavigation auf Listen gesetzt haben, die ebenso per CSS nach Wunsch ausgerichtet werden. Wenn Sie dennoch Links per tabindex in eine gewünschte Reihenfolge bringen wollen, testen Sie die Auswirkungen unbedingt selbst und in mehr als einem Browser, indem Sie vorwärts (TAB)  und rückwärts (UMSCHALT+TAB) durch die Links wandern. Gerade dort, wo Links und Anker auch zur internen Navigation auf einer Seite eingesetzt werden, wird nicht immer das gewünschte Ergebnis mit tabindex erzielt…

Für eine zügige Bedienung ist es zudem wünschenswert, einzelne Abschnitte wie einen Kopfbereich überspringen oder direkt zu bestimmten Abschnitten einer Seite springen zu können. Dazu dienen z. B. Skiplinks, die in sichtbarer oder verdeckter Form auf der Seite möglichst weit oben im Quellcode untergebracht werden.

Um einzelne Links auch direkt bedienbar zu gestalten, ohne dass diese per TAB „annavigiert“ werden müssen, kann das Attribut accesskey verwendet werden. Hierüber können Sie sowohl bestimmte Standardinhalte wie Startseite, Kontaktformular, Impressum etc. jederzeit per Tastatur zugänglich machen als auch spezielle Links mit „Abkürzungen“  versehen. Auch die oben angesprochenen Skiplinks können mit möglichst auf allen Seiten konstanten Accesskeys versehen werden, so dass der Benutzer auf jeder Seite immer mit der gleichen Tastenkombination zur Navigation oder dem Hauptinhalt, der Sucheingabe etc. springen kann. Das Hauptproblem ist hierbei, dass diese Hotkeys für Websites auch kommuniziert werden müssen, damit der Besucher diese verwenden kann. Dem Einsatz von Accesskeys widmet sich daher ein separater Beitrag.