Informationen


Tastaturbedienbarkeit
[Materialsammlung]

Bedeutung der Tastatur für die Barrierefreiheit

Wer auf Grund visueller oder motorischer Beeinträchtigungen die Maus nicht bedienen kann, muss trotzdem in der Lage sein, zu Seitenbereichen effizient zu navigieren und Seitenelemente zu bedienen. Sehbehinderte können in der Regel eine gewöhnliche Tastatur verwenden. Bei motorischen Beeinträchtigungen der Hände können unter Umständen Spezialtastaturen erforderlich sein.

So dienen Navigationsmechanismen vor allem der Bedienbarkeit mit der Tastatur. Das Scrollen mit dem Mausrad, das Wischen am Smart Phone und ein Klick auf ein Element benötigen weniger gesonderten Überlegungen zur Navigierbarkeit einer Webseite. Allerdings können Seitenkomponenten, die das Überspringen von Blöcken erlauben, auch am Smart Phone hilfreich sein.

Anwendungsbereiche der Tastaturbedienbarkeit

HTML-Elemente und zu erwartende Tastaturbedienbarkeit

Die Tastaturbedienbarkeit wird bei einfachen Überschriften, Links und Formularelementen, die mit HTML sauber realisiert wurden, ganz gut von den Browsern und Assistierenden Technologien sichergestellt. Auch die einfache Navigation, etwa das Scrollen, wird vom Browser mit den Pfeiltasten ermöglicht. Wer HTML5-Elemente nach der jeweiligen Spezifikation einsetzt, braucht sich also um deren Tastaturbedienbarkeit in der Regel keine zusätzlichen Gedanken machen.

Wenn jedoch Scripts verwendet werden, kann es zu Problemen kommen. Meines Wissens nach ist es bekannt, dass onMouse-Befehle die Tastatur ausschließen. Dies kann im Code alleine als Problem gefunden werden. Komplexere Scripts hingegen sollten in der Regel von erfahrenen Usern Assistierender Technologien manuell getestet werden. Der Test von komplexen Seitenelementen bedarf nämlich erfahrungsgemäß solider Kenntnisse über die Funktionalitäten der Assistierenden Technologien und möglicher Problembereiche der komplexen Anwendungen.

Auch bestimmte Attribute können in den HTML-Elementen zu Problemen führen. So sollte auf target= "_blank" in der Regel verzichtet werden und die Tastaturreihenfolge mit tabindex nur sehr sorgfältig manipuliert werden.

Ausnahmen für die Tastaturbedienbarkeit

Grundsätzlich müssen alle Inhalte und Funktionalitäten auf Webseiten und Webanwendungen ohne Zeitdruck alleine mit der Tastatur, also ohne Maus oder Wischen auf dem Display, bedienbar sein. Ausgenommen sind davon etwa ausgeklügelte Malprogramme, die schlichtweg der Maus vorbehalten bleiben und Flugsimulatoren, die für das Pilotentraining gedacht sind.

Fokus wahrnehmbar für bedienbare Elemente

Bedeutung des Fokus

In Textverarbeitungsprogrammen zeigt uns gewöhnlich ein blinkender Cursor an, wo ich im Textbereich gerade etwas editieren kann. Auf Webseiten finden wir diesen Cursor am Bildschirm nicht. Dabei gibt es auch auf Webseiten Bereiche zum Editieren, etwa in Formularen, und Links, die uns interessieren könnten.

Bei der Bedienung mit der Maus merkt niemand das Verschieben des Fokus. Ein Klick auf einen Link öffnet eine neue Seite und ein Klick auf ein Formularelement ändert dessen Zustand oder öffnet einen Editierbereich, in dem meist sogar ein Cursor blinkt.

Für die Tastaturbedienung muss der Fokus auch auf Webseiten wahrnehmbar gemacht werden. Ich muss wissen, was passiert, wenn ich jetzt mit ENTER einen Link oder mit der Leertaste ein Formularelement aktiviere. Für Screen Reader genügt dazu in der Regel ein korrektes Markup. Alle anderen müssen am Bildschirm erkennen, wo sie gerade umgehen.

Screen Reader und Fokus

Screen Reader sind keine reinen Vorleseprogramme, die den Bildschirminhalt von links oben nach rechts unten an eine Sprachausgabe ausgeben. Sie liefern zahlreiche Informationen und Funktionalitäten, die allein durch das HTML-Markup verfügbar sind oder durch ARIA-Befehle speziell für Assistierende Technologien vorgesehen werden.

Screen Reader bieten einen virtuellen Cursor zum Navigieren des Fokus, der bei der Bedienung meines Wissens am Bildschirm nicht wahrnehmbar ist. Bei dieser Art der Navigation wird vom Screen Reader nicht nur der Text des fokussierten Elements wiedergegeben, sondern vielfach auch der Typ und gegebenenfalls der Zustand des jeweiligen Elements.

Beispiel für Name, Rolle und Zustand

Screen Reader liefern für ein Kontrollkästchen zum Speichern eines Passwortes etwa folgende Informationen an die Sprachausgabe:

Passwort speichern Kontrollfeld nicht aktiviert

Was visuell intuitiv wohl umgehend verstanden wird, kann bei der erfahrenen Benutzung von Screen Readern als Information über die Bezeichnung des Elements, den Typ des Formularelements (Rolle) und den Zustand folgendermaßen wahrgenommen werden:

Informationsschicht Wert
Bezeichnung (name): Passwort speichern
Elemententyp (type): Kontrollfeld
Zustand (state): Nicht aktiviert

Es ist daher wichtig, dass das Markup korrekt verwendet wird und im Bedarfsfall ARIA-Befehle eingesetzt werden, damit für den Screen Reader klar ist, auf welchem Element sich der Fokus befindet, in welchem Zustand sich vielleicht das Element befindet und was damit gegebenenfalls getan werden kann.

Fokus sichtbar machen

Bedeutung eines sichbaren Fokus

Browser verfügen in der Regel über einen sehr dezenten visuellen Effekt auf dem Element, auf dem sich der Fokus befindet. Links werden etwa mit gepunkteten Linien umrandet.

Meines Erachtens sind die visuellen Fokuseffekte von Browsern kaum ausreichend. Versuchen Sie einmal auf einer Webseite immer den Fokus zu finden, indem Sie die Tabulator–Taste drücken. Sie werden sehen, dass Ihnen das oft nur mühsam oder gar nicht gelingt.

Aus diesem Grund empfehle ich, Fokuseffekte bewusst vorzusehen. Für Links und Formularelemente genügen dabei CSS-Anweisungen. Für Grafiklinks empfehlen sich darüber hinaus visuelle Effekte, die mit JavaScripts realisiert werden.

Techniken für sichtbare Fokuseffekte

Für textuelle Links und Formularelemente werden zur Verbesserung der Fokussichtbarkeit zweckmäßigerweise in zentralen CSS-Dateien Anweisungen vergeben.

Die Anweisungen für Fokuseffekte müssen sich unter den Anweisungen für Hover-Effekte befinden. Ansonsten kann es passieren, dass ein Fokuseffekt nicht sichtbar wird, weil sich zufällig gerade die Maus auf dem Element befindet.

Die jeweiligen CSS-Anweisungen werden folgendermaßen eingeleitet:

Elemente für CSS Fokuseffekte
Element Code
Link a:focus
Eingabefeld input[type=text]:focus
Suchformular input[type=search]:focus
Bild input[type=image]:focus
Submit - Schalter input[type=submit]:focus
Zurücksetzen der Formulareingaben input[type=reset]:focus

Mechanismen zur Erleichterung der Navigation mit der Tastatur

Blöcke umgehen

Bei der Bedienung ohne Maus müssen wiederkehrende und damit möglicherweise schon bekannte Seitenbereich, wie etwa die Hauptnavigation, mit Tastaturbefehlen übersprungen werden können.

Typischerweise werden etwa Einsprunglinks verwendet, die direkt zum Hauptinhalt innerhalb der Seite verlinken.

Überschriften

Semantisch korrekt gekennzeichnete Überschriften lassen sich mit einem Screen Reader einfach mit einem Tastaturbefehl anspringen oder in einem eigenen Dialogfeld auflisten. Diese Mechanismen sind meines Erachtens die effizientesten sowohl zum Erarbeiten unbekannter, als auch zur Bedienung vertrauter Webauftritte bei der Verwendung von Screen Readern.

Üblicherweise wird allein durch Drücken der Taste H die nächste Überschrift angesprungen. Durch Drücken der Zifferntasten 1 bis 6 ist es sogar möglich, eine entsprechende Überschriftenebene anzuspringen. Durch gleichzeitiges Drücken der SHIFT-Taste wird die Suchrichtung nach oben gekehrt.

HTML5 Regionen

In HTML5 gibt es für einige signifikante Seitenbereiche die Möglichkeit einer semantischen Kennzeichnung (header, article, aside, …). Screen Reader bieten teilweise Funktionalitäten, die zur Navigation zwischen diesen Regionen dienen. So springt in JAWS durch Drücken der Taste R der Fokus zur nächsten Region. Auch dies kann zur Erarbeitung und Navigation innerhalb einer Webseite zweckmäßig sein.

Accesskeys (Kurztasten)

Bedeutung von Accesskeys

Betriebssysteme und Anwendungsprogramme bieten eine Vielzahl von Tastaturbefehlen, die einen raschen Zugriff auf Funktionalitäten eröffnen. Die Tastaturbefehle sind für alle hilfreich, für blinde und in der Handmotorik beeinträchtigte Menschen sogar notwendig.

Es scheint daher fein und nahe liegend, solche Funktionalitäten auch auf Webseiten anzubieten.

Links und Schalter können in HTML Kurztasten erhalten. Wer die Kurztasten kennt, kann mit deren Hilfe rasch zu Seitenbereichen navigieren oder Mechanismen auslösen.

Man muss die Kurztastenbefehle wahrnehmen können und sich merken und as für jeden Webauftritt neu. Wenn sie sparsam eingesetzt werden, können sie für einige Wenige hilfreich sein. Hilft es nichts, so schadet es kaum.

Technischer Einsatz von Accesskeys

In HTML kann durch das Attribut accesskey einem Link oder Formularelement eine Kurztaste zugewiesen werden. Häufig werden Accesskeys durch Einsprunglinks zugeordnet. Der Code kann etwa folgendermaßen aussehen:

<a href="#main" accesskey="0">Zum Hauptinhalt (Kurztaste: 0)</a>

Anmerkungen

  • Das Vorhandensein von Kurztastenbefehlen muss natürlich wahrnehmbar sein. Ich empfehle, dies im Linktext zu gewährleisten.
  • Eine Kurztaste sollte jedenfalls auf Grund des derzeitigen Browserverhaltens jeweils nur einmalig vergeben werden.
  • Das Verhalten von Browsern beim Einsatz eines Kurztastenbefehls ist unterschiedlich. Einige lösen die Funktionalität unmittelbar aus, während andere nur den Fokus auf das Element verschieben und die Funktionalität erst durch ENTER ausgelöst werden muss. Das Verhalten kann sich sogar innerhalb der Elemente (Link, Schalter oder Formularelement) ändern.

Funktionstasten für Accesskeys in unterschiedlichen Browsern

Die Funktionstasten, die Kurztastenbefehle auslösen variieren in den unterschiedlichen Betriebssystemen und Browsern. Der Befehl wird jeweils durch gleichzeitiges Drücken der Funktionstaste und des Accesskeys ausgelöst.

Funktionstasten für Accesskeys in unterschiedlichen Browsern
Browser Funktionstaste
Internet Explorer für Windows Alt
Firefox für Windows Shift + Alt
Firefox für Mac STRG + Option
Safari für Mac STRG + Option
Safari für Windows Alt
Chrome für Windows Alt
(teilweise in Verbindung mit Shift)
Chrome für Mac STRG + Option

Problematik von Accesskeys

Reihenfolge der Elemente

Bedeutung der Reihenfolge für die Tastaturbedienung

Die Reihenfolge, in der fokussierbare Elemente technisch und visuell angeordnet sind, muss bedeutungsvoll und bedienbar sein. Sowohl die Wahrnehmung der Tabulatorreihenfolge durch den Screen Reader, als auch die visuelle Wahrnehmung am Bildschirm müssen intuitiv verständlichssein. Notwendige fokussierbare Elemente müssen von beiden Zielgruppen natürlich auch mit Tastaturbefehlen erreicht und bedient werden können.

tabindex – Manipulation der Reihenfolge für die Tabulatorbedienung

Mit dem HTML-Attribut tabindex lassen sich fokussierbare Elemente, wie Links oder Formularelemente, in der Reihenfolge der Navigation festlegen. Sie dürfen jedoch nur in Ausnahmefälle und nach eingehenden Reflexionen und Tests eingesetzt werden.

Folgendes Verhalten wäre zu erwarten:

Auswirkungen von tabindex
Wert Auswirkung
0 (Null) oder fehlend Die Tabulatorreihenfolge entspricht dem Vorkummen des fokussierbaren Elements im HTML-Code.
Negativer Zahlenwert (-1, ...) Das Element ist mit der Taste Tabulator nicht fokussierbar und daher auch nicht bedienbar.
Positiver Zahlenwert Die TAB-Reihenfolge beginnt mit den positiven Werten von 1 aufwärts.

Allerdings habe ich beobachtet, dass Browser sich in diesen Punkten nicht zuverlässig verhalten. Sie können mit der Testdatei in der folgenden Linksammlung selbst experimentieren:

CSS Anweisungen zur Platzierung von Seitenelementen

Mit CSS-Anweisungen lassen sich Seitenbereiche visuell unabhängig von der Reihenfolge im HTML-Code anordnen.

Die visuelle Anordnung sollte jedoch auf keinen Fall die visuelle Wahrnehmung des Fokus bei der Tabulator-Bedienung erschweren. Die Positionierung der Seitenbereiche sollte daher den Erwartungshaltungen bei der Tastaturbedienung entsprechen, also möglichst von links oben nach rechts unten, entsprechend einem verständlichen HTML-Code.

Permanente visuelle Darstellung

Mit der CSS Anweisung position:fixed lassen sich Elemente permanent an einen Bildschirmbereich anheften. Sie bleiben also immer an der gleichen Stelle sichtbar.

Leider passiert es erfahrungsgemäß häufig, dass dadurch andere Seitenbereiche überdeckt werden. Wenn beim Scrollen ein Element immer an der selben Stelle zu sehen ist, werden ohne große Sorgfalt andere relevante Elemente visuell nicht mehr wahrnehmbar und damit oft auch nicht mehr bedienbar.

Eine permanente Positionierung sollte daher nur nach sorgfältigen Überlegungen und visuellen Prüfungen erfolgen.

Screen Reader Wahrnehmung der Reihenfolge

Screen Reader lesen durch Drücken der Pfeiltasten den BODY einer Webseite von links oben nach rechts unten aus. Es ist daher wichtig, dass die Elemente im Code linear verständlich und den Erwartungen entsprechend angeordnet sind. Auch Funktionalitäten, wie die Auflistung von Überschriften durch den Screen Reader erfolgen nach der Anordnung im Code.

Die technische Anordnung der Seitenelemente im Code ist selten ein Problem, weil vernünftige HTML Codes gewöhnlich linear konsistent angeordnet sind. Allerdings sollte die Verständlichkeit der Anordnung von Überschriften redaktionell gut reflektiert werden.

Tastaturfallen

Als Tastaturfalle wird eine Webanwendung bezeichnet, zu deren Funktionalitäten man zwar alleine mit der Tastatur gelangt, aus der man jedoch mit Tastaturanweisungen nicht mehr herauskommt. Dadurch ist das Erreichen der Anwendung zwar mit der Tastatur bedienbar, Inhalte und Funktionalitäten außerhalb der Anwendung auf der Webseite werden jedoch unzugänglich.

WCAG Erfolgskriterium 2.1.2: Keine Tastaturfallen (Level A)

Änderung des Kontextes

Bedeutung der Änderung des Kontextes

Wenn sich beim Klick auf ein Link ohne Vorwarnung ein neues Fenster im Browser, vielleicht sogar in einem neuen Design öffnet, kann das zu Verwirrungen führen. Man muss sich möglicherweise visuell auf ein anderes Darstellungsdesign einstellen und ist mit dem Screen Reader als blinde Person möglicherweise mit komplett überraschend veränderten Konzepten zur Navigation oder Bedienung konfrontiert.

Ähnlich kann es bei der Bedienung von Formularelementen für Verwirrung sorgen, wenn sich bei der Eingabe gleich der Kontext ändert. Dies trifft jedoch etwa nicht zu, wenn in einem Eingabefeld eines Formulars Vorschläge erscheinen.

Öffnet sich die Zieldatei ohne Vorwarnung in einem neuen Fenster, können etwa gewohnte Funktionalitäten in Browsern verloren gehen. So gelangt man etwa durch Drücken der ←-Taste auf die vorherige Webseite. Dies gelingt jedoch nicht, wenn sich die vorherige Webseite in einem anderen Fenster befindet.

Fokus und Kontextänderung

Wenn ein Element den Fokus erhält, darf sich deswegen nicht auch gleich der Kontext unerwartet ändern. Dies könnte nämlich bei der Benutzung eines Screen Readers zu Verwirrungen führen.

Dies betrifft jedoch etwa nicht Navigationselemente, bei denen Unterpunkte eingeblendet werden, sobald sich der Fokus auf dem Hauptnavigationspunkt befindet. Allerdings müssen technisch für den Screen Reader Informationen über den Erweiterungszustand vorgesehen werden.

target="_blank"

Die Anweisung target="_blank" als Attribut in einem Link bewirkt, dass die Zieldatei automatisch in einem neuen Fenster geöffnet wird. Dieser Automatismus sollte im Linktext oder in dessen Kontext wahrnehmbar sein. Ein Hinweis im title-Attribut des Links reicht dafür nicht aus.

Übrigens: Wer beim Klicken ein neues Fenster öffnen möchte, braucht nur gleichzeitig die SHIFT –Taste drücken, sei es beim Klick mit der Maus oder der ENTER-Taste auf ein fokussiertes Element.

Links zu anderen Dateiformaten (PDF, DOCX) sollten wohl sogar mit dem Attribut target="_blank" versehen werden. Ein Klick auf diese Links ändert je nach Konfiguration die Arbeitsumgebung oft so, dass es fein ist, wenn die Ursprungsseite jedenfalls in einem Fenster verfügbar bleibt.

Ebenso sollte, wenn sich Erläuterungen zum Ausfüllen eines Formularbereichs auf einer eigenen Seite befinden, diese sicherheitshalber zwingend in einem neuen Fenster geöffnet werden. Bereits eingegebene Daten und der Fortschritt beim Ausfüllen bleiben so garantiert erhalten.

Das für das Attribut anwendbare WCAG Erfolgskriterium 3.2.5 ist zwar nur in der Konformitätsstufe (Level AAA) eingereiht. Ich empfehle jedoch auch für Webauftritte mit geringeren Ambitionen die Verwendung von target="blank" sehr gründlich zu reflektieren

Zeitliche Steuerungselemente

Bedeutung der zeitlichen Steuerung

Audiodateien, Videos, Slider und Ähnliches ändern sich zeitlich. Die zeitliche Änderung muss alleine mit der Tastatur steuerbar sein.

In jedem Fall müssen zeitbasierte Elemente über Mechanismen verfügen, die das Pausieren, Anhalten oder Verstecken des Bereichs ermöglichen. Diese Mechanismen müssen auch alleine mit der Tastatur bedienbar sein.

Empfehlungen

Empfehlungen für die Gestaltung zur Tastaturbedienbarkeit

  1. Funktionalitäten müssen in der Regel alleine durch Tastaturbefehle bedienbar sein.
  2. Seitenbereiche, die sich innerhalb eines Webauftritts wiederholen müssen übersprungen werden können.
  3. Überschriften müssen semantisch als solche gekennzeichnet sein.
  4. Die Überschriftenebenen sollten hierarchisch konsistent eingesetzt werden
  5. Die Überschriften müssen verständlich gereiht werden.
  6. Was mit der Maus angeklickt werden kann, muss semantisch für den Screen Reader als Link oder Formularelement wahrnehmbar sein.
  7. Erweiterbare Navigationen oder Menüs müssen allein mit Tastaturbefehlen bedienbar sein.
  8. Für Screen Reader müssen das HTML Markup und gegebenenfalls erforderliche ARIA Befehle korrekt eingesetzt werden, damit Art und Zustand des Elements richtig erkannt werden, auf dem sich der Fokus befindet.
  9. Wo sich der Fokus befindet, muss visuell immer wahrnehmbar sein.
  10. Anweisungen für Fokuseffekte sollten sich im CSS-Code unter den Anweisungen für Hovereffekte befinden, damit Fokuseffekte nicht verloren gehen, wenn sich zufällig gerade der Mauszeiger über dem Element befindet.
  11. Die Reihenfolge der fokusierbaren Elemente muss technisch und visuell passen.
  12. Der Kontext darf sich nicht unerwartet ändern, wenn der Fokus bewegt wird.
  13. Zeitlimits für die Eingabe sind nur in Ausnahmefällen zulässig, etwa, wenn es um Sicherheitsaspekte bei der Formulareingabe geht oder Flugtrainings simuliert werden..
  14. Verfügbare ARIA Landmark Roles sollten in der Regel zur semantischen Kennzeichnung von Seitenbereichen verwendet werden.
  15. In HTML5 sollte das verfügbare Mark Up für Regionen richtig eingesetzt werden.
  16. CSS-Anweisungen zur permanenten Darstellung dürfen nur mit größter Sorgfalft eingesetzt werden.
  17. Es ist fein, wenn sich bei der Bedienung von Elementen der Kontext nicht unerwartet ändert.