Navigation und Service

Einfach teilhaben (Link zur Startseite)


Anleitung

Diese Anleitung beschreibt, wie Sie eine Webseite so gestalten, dass alle Funktionen durch eine Tastatur bedienbar sind. Das Thema Sichtbarkeit des Tastaturfokus wird ebenfalls in diesem Abschnitt behandelt. Vertiefende Informationen über Navigationskonzepte und Orientierung finden Sie im Abschnitt "Navigation und Orientierung innerhalb einer Internetseite" und zum Thema Wahrnehmbarkeit von Links finden Sie Informationen im Abschnitt "Trennung von Vorder- und Hintergrund"

Tastaturbedienbarkeit

Sorgen Sie immer dafür, dass jede Funktion einer Webseite, die mit der Maus bedient wird, auch durch die Tastatur bedient werden kann. Wenn Sie HTML-Standard-Elemente wie Links, Schaltflächen, Textfelder, Kontrollkästchen, Optionslisten und -schaltflächen verwenden ist, eine Tastaturbedienbarkeit in der Regel gegeben, dafür sorgen Browser und Betriebssystem.

Wenn Sie das Standardverhalten der HTML-Elemente verändern oder erweitern möchten, werden sie in der Regel Event-Handler verwenden. Event-Handler sind das Bindeglied zwischen HTML und JavaScript. Mit einem Event-Handler können Sie auf festgelegte Ereignisse oder bestimmte Nutzeraktionen reagieren und zum Beispiel JavaScript-Funktionen aufrufen. Wenn Sie solche Event-Handler nutzen möchten, sollten Sie darauf achten, dass Sie möglichst solche nutzen, die unabhängig vom Eingabegerät sind. Zu den unabhängigen Event-Handler gehören:

  • onfocus: Wird aufgerufen, wenn ein Element den Fokus erhält. Der Aufruf erfolgt unabhängig davon, ob das Element den Tastaturfokus durch Drücken der "Tab"-Taste erhält oder durch Anklicken mit der Maus.
  • onblur: Wird aufgerufen, wenn das Element den Fokus wieder verliert. Der Aufruf erfolgt unabhängig davon, ob der Fokus durch ein erneutes Drücken der "Tab"-Taste zum nächsten Element wechselt oder ob ein anderes Element mit der Maus angeklickt wurde.
  • onclick: Wird aufgerufen, wenn ein Element angeklickt wird. Auch wenn der Name etwas anderes suggeriert, ist der onclick-Handler zumindest bei Links und Schaltflächen unabhängig von der Mausbedienung, denn er wird auch ausgelöst, wenn ein Link oder eine Schaltfläche den Tastaturfokus hat und die "Enter"-Taste gedrückt wird.
  • onchange: Wird aufgerufen, wenn sich der Inhalt eines Elements verändert. Zum Beispiel, wenn ein Element aus einer Liste ausgewählt wird oder wenn der Text in einem Textfeld durch die Nutzerin oder den Nutzer verändert wurde.

Wenn Sie spezielle Maus-Handler nutzen wollen, sollten Sie möglichst auch einen gleichwertigen Tastatur-Handler nutzen. Ein onmousedown-Handler sollte zum Beispiel mit einem onkeydown-Handler kombiniert werden. Wenn ein direkter Tastatur-Gegenpart nicht existiert oder nicht verwendet werden kann, müssen Sie die Funktion, die durch die Maus gesteuert wird, durch HTML-Elemente nachbilden. Haben sie zum Beispiel eine Liste entwickelt, in der die Elementreihenfolge durch "anklicken und ziehen" (Englisch: "Drag and Drop") verändert werden kann, können Sie zusätzlich zu jedem Element Schaltflächen anbieten, mit denen das Element eine Position nach oben und unten verschoben wird.

Falls Sie die Maus- und Tastatur-Events aus JavaScript oder einem JavaScript-Framework verwenden, gelten dieselben Regeln, wie für die Maus- und Tastatur-Handler in HTML. Zunächst möglichst eingabeunabhängige Events nutzen, dann Kombinationen aus Maus- und Tastatur-Event und falls dies auch nicht geht, muss die Funktion mittels anderer Elemente nachgebildet werden.

Sichtbarer Tastaturfokus

Damit eine Webseite mit der Tastatur bedient werden kann, ist es wichtig, dass der Tastaturfokus jederzeit sichtbar ist. Ein körperbehinderter Mensch muss immer erkennen können, welcher Link oder welches Formularelement gerade aktiv ist und den Tastaturfokus hält. In der Regel stellt das Betriebssystem des Computers oder der Browser eine sichtbare Markierung für ein aktives Element zur Verfügung.

Beispiel-Screenshots: sichtbarer Tastaturfokus: von links nach rechts: Rahmen um einen Link, blinkender Cursor in einem Textfeld, blau markierter Text in einem Textfeld, blauer Rahmen um ein Textfeld (Betriebssystem Mac-OS) Beispiel-Screenshots: sichtbarer Tastaturfokus: von links nach rechts: Rahmen um einen Link, blinkender Cursor in einem Textfeld, blau markierter Text in einem Textfeld, blauer Rahmen um ein Textfeld (Betriebssystem Mac-OS)

Die Abbildung oben zeigt vier verschiedene Methoden, wie der Tastaturfokus von Browser und Betriebssystem angezeigt werden kann:

  • Ein Link, der den Tastaturfokus erhalten hat, wird in der Regel durch einen gepunkteten oder gestrichelten Rahmen hervorgehoben.
  • Wird ein Textfeld aktiv, wird dies immer durch einen blinkenden Eingabecursor angezeigt.
  • Wird ein einzeiliges Textfeld durch die Tastatur aktiviert, wird der Inhalt, falls einer vorhanden ist, farbig markiert.
  • Manche Betriebssysteme heben aktive Formularelemente sehr deutlich hervor, im Beispiel oben durch einen breiten blauen Rahmen (Betriebsystem MacOS).

Wenn Sie diese Hervorhebungen nicht durch Ihr Design verhindern, erfüllen Sie im Prinzip schon die BITV-Bedingung "2.4.7 Sichtbarer Fokus".

Häufig ist es jedoch so, dass der Tastaturfokus, der vom Browser vorgegeben wird, nicht besonders gut sichtbar ist. Es empfiehlt sich deshalb, den Fokus durch weitere Maßnahmen besser hervorzuheben. Wenn Sie die Vorgaben von Betriebssystem oder Browser verändern oder gar ganz unterbinden möchten, dann müssen Sie dafür Sorge tragen, dass der Tastaturfokus auf eine andere Art und Weise sichtbar wird. Die Verwendung von CSS-Eigenschaften bietet sich hierzu an. Im CSS ist es zum Beispiel möglich durch die Verwendung der Pseudo-Klassen :focus, :hover und :active das Aussehen für Tastatur- und Mausfokus sowie für aktive Formularelemente zu bestimmen.

Tastaturfallen

Tastaturnutzerinnen oder Nutzer können mit der "Tab"-Taste oder der Kombination "Umschalt"-Taste und "Tab"-Taste vorwärts beziehungsweise rückwärts von Link zu Link und von Formularelement zu Formularelement springen. Achten Sie immer darauf, dass dabei alle Elemente erreicht werden und dass der Tastatur-Fokus dabei nicht in einem oder einer Gruppe von Elementen hängen bleibt. Folgende drei Tastaturfallen sind nicht unüblich und kommen auf manchen Webseiten vor:

Die Flash-Falle: Sie haben ein Flash-Objekt auf Ihre Webseite eingebunden. Da Ihre Webseite barrierefrei sein soll, haben Sie dafür gesorgt, dass das Flash-Objekt in der Reihenfolge des Tastaturfokus eingebunden wurde. Wird nun mittels der "Tab"-Taste von Link zu Link gesprungen wird irgendwann auch das Flash-Objekt aktiv und kann ausgewählt werden. Innerhalb des Flash-Objekts kann nun wieder mit der "Tab"-Taste von Element zu Element gesprungen werden. Leider existiert aber keine Möglichkeit, das Flash-Objekt wieder mit der Tastatur zu verlassen. Zum Verlassen ist ein Klick mit der Maus nötig. Der Tastaturfokus ist gefangen.

Die Validierungs-Falle: Sie haben ein oder mehrere Formular-Elemente auf Ihrer Seite eingebunden. Die Elemente sind nicht Teil des Hauptinhalts, zum Beispiel haben Sie in einem Seitenbereich ein kleines Formular eingebunden, mit dem eine interessierte Nutzerin oder ein Nutzer einen Newsletter abonnieren kann. Bevor der Tastaturfokus den Absende-Knopf erreicht, wird der Inhalt der Eingabefelder bereits durch ein Script überprüft. Zum Beispiel wird festgestellt, ob die angegebene E-Mail-Adresse korrekt formatiert wurde. Bei einem Fehler wird eine Meldung ausgegeben und der Tastaturfokus wird zurück auf das fehlerhaft ausgefüllte Feld gesetzt. Wenn die Nutzerin oder der Nutzer jetzt keine E-Mail-Adresse eingeben möchte, bleibt der Tastatur-Fokus in dem Seitenbereich gefangen.

Die Lightbox-Falle: Sie nutzen eine sogenannte Lightbox, mit der das Verhalten einer Dialogbox emuliert wird. Zum Beispiel haben Sie eine Bildergalerie, bei der nach der Auswahl eines Bildes das Bild angezeigt wird und der Hintergrund abgedunkelt wird. Ein Beenden der Lightbox ist in Ihrem Fall nur möglich, wenn außerhalb des Bildes mit der Maus geklickt wird. Bei einer ausschließlichen Verwendung der Tastatur kann die Lightbox nicht geschlossen werden.

Solche Tastatur-Fallen müssen Sie vermeiden. Sorgen Sie dafür, dass Flash-Objekte den Tastatur-Fokus wieder freigeben. Dass eine Überprüfung einer Nutzereingabe entweder nur die Fehler anzeigt, aber den Tastatur-Fokus nicht programmatisch verändert oder dass die Überprüfung erst unmittelbar vor dem Absenden der Daten erfolgt. Achten Sie auch darauf, dass Dialogboxen und Lightboxen auch mit der Tastatur beendet werden können.

Reihenfolge

Die Reihenfolge, in der mit der Tastatur von Element zu Element gesprungen werden kann, muss sinnvoll sein. Eine nicht-logische Reihenfolge kann unter anderem zu Fehleingaben führen. Werden zum Beispiel Formular-Elemente tabellenartig angeordnet, kann folgende Situation entstehen.

Beispiel-Screenshot: Zwei kurze Formulare. Durch die tabellenartige Anordnung kommt es auf der linken Seite zu einer falschen Tastatur-Reihenfolge. Beispiel-Screenshot: Zwei kurze Formulare. Durch die tabellenartige Anordnung kommt es auf der linken Seite zu einer falschen Tastatur-Reihenfolge.

Die linke Seite zeigt eine Reihenfolge, die entstehen kann, wenn das Formular zeilenweise aufgebaut wurde. In der Reihenfolge, in der die Felder durch Drücken der Tab-Taste aktiv werden, liegt der "Absende"-Knopf zwischen Vor- und Nachname. Eine Nutzerin oder ein Nutzer, der diese Seite linear bedienen muss, zum Beispiel mit einem Screenreader, würde den "Absende"-Knopf vor dem "Nachname"-Feld erreichen. Ein vorzeitiges Absenden des Formulars ist somit vorauszusehen. Die rechte Seite zeigt die Tab-Reihenfolge, wie sie die Bedeutung und die Bedienbarkeit des Inhalts erfordert.

Neben den falschen Reihenfolgen, wie sie durch das Layout entstehen, existieren auf modernen Webseiten weitere Probleme. Durch Scripting werden Webseitenbereiche ausgetauscht, entfernt und hinzugefügt. Auch hierbei ist es wichtig, dass die Tab-Reihenfolge für die Tastaturnutzung immer sinnvoll und nachvollziehbar bleibt. Wird zum Beispiel eine Dialogbox (zum Beispiel eine "Lightbox") programmiert, die als Ebene über der verdunkelten Webseite gelegt wird, muss darauf geachtet werden, dass sich der Tastaturfokus nur in dieser Dialogbox bewegt. Der Fokus darf nicht in die inaktive Webseite im Hintergrund wechseln. Eine weitergehende Untersuchung zur Barrierefreiheit von Lightboxen von Oliver Siemoneit finden Sie auf den Webseiten von Einfach für alle.

© Bundesministerium für Arbeit und Soziales, 2016