Dieser Beitrag gehört zur Artikelserie Richtlinien für barrierefreie Webinhalte WCAG 2.0. Er soll die Erfolgskriterien, Bedeutung und Umsetzung der Richtlinie 2.1 Per Tastatur zugänglich darstellen sowie Website Beispiele aufzeigen.

„Sorgen Sie dafür, dass alle Funktionalitäten per Tastatur zugänglich sind.“

Erfolgskriterien der Richtlinie 2.1

  • 2.1.1 Tastatur: Alle Funktionalitäten des Inhalts sind durch eine Tastaturschnittstelle bedienbar, ohne dass eine bestimmte Zeiteinteilung für einzelne Tastenanschläge erforderlich ist, außer wenn die zugrunde liegende Funktion Eingaben verlangt, die vom Pfad der Bewegung des Benutzers und nicht nur von den Endpunkten abhängig sind. (Stufe A)

Anmerkung 1: Diese Ausnahme bezieht sich auf die zugrunde liegende Funktion und nicht auf die Eingabetechnik. Zum Beispiel: Wenn man Handschrift benutzt, um Text einzugeben, dann verlangt die Eingabetechnik (Handschrift) Pfad-abhängige Eingaben, die zugrunde liegende Funktion (Texteingabe) verlangt dies aber nicht.

Anmerkung 2: Es ist nicht verboten noch sollte es Sie davon abhalten, eine Maus-Eingabe oder andere Eingabemethoden zusätzlich zur Tastaturbedienung zur Verfügung zu stellen.

  • 2.1.2 Keine Tastaturfalle: Wenn der Tastaturfokus durch eine Tastaturschnittstelle auf einen Bestandteil der Seite bewegt werden kann, dann kann der Fokus von diesem Bestandteil weg bewegt werden, indem man nur die Tastaturschnittstelle benutzt; wenn man dazu mehr als nicht modifizierte Pfeil- oder Tabulatortasten oder andere übliche Ausstiegsmethoden benutzen muss, dann wird der Benutzer über die Methode zum Bewegen des Fokus informiert. (Stufe A)

Anmerkung: Jeglicher Inhalt, der dieses Erfolgskriterium nicht erfüllt, kann die Möglichkeit eines Benutzers beeinträchtigen, die ganze Seite zu nutzen. Daher muss jeglicher Inhalt auf einer Webseite (egal ob er dazu benutzt wird, andere Erfolgskriterien zu erfüllen oder nicht) dieses Erfolgskriterium erfüllen. Siehe Konformitätsbedingung 5: Nicht-Störend.

  • 2.1.3 Tastatur (keine Ausnahme): Alle Funktionalitäten des Inhalts sind durch eine Tastaturschnittstelle bedienbar, ohne dass eine bestimmte Zeiteinteilung für einzelne Tastenanschläge erforderlich ist. (Stufe AAA)

Bedeutung der Richtlinie

Die Richtlinie 2.1 gibt vor, dass alle Funktionalitäten einer Website geräteunabhängig auch durch Tastaturbenutzung ausgeführt werden müssen. Websites werden nicht nur mithilfe von PC-Mäusen bedient, sondern häufig auch über Tastaturen. Menschen, die z. B. blind sind, an Parkinson leiden, einen Schlaganfall hatten oder querschnittgelähmt sind und ihre Hände nicht bewegen können, sind auf die Nutzung der Tastatur zum Bedienen einer Website angewiesen. Aber auch zeitweise eingeschränkte Nutzer, die beispielsweise einen Unfall hatten und zeitweise in der Nutzung einer Maus eingeschränkt sind, profitieren von der Möglichkeit, Webseiten allein über die Tastatur zu bedienen.

Zu Tastaturen werden z. B. auch Spracheingabe (stellt Tastatureingabe dar) und assistierende Techniken, die simulierte Tastenanschläge als Output erstellen, gerechnet.

Situationen mit einer „bestimmten Zeiteinteilung für einzelne Tastenanschläge“ sind dann gegeben, wenn Benutzer mehrere Tastenanschläge innerhalb kurzer Zeit ausführen oder wiederholen müsste oder in denen er eine Taste für eine längere Zeit gedrückt gehalten werden müsste, bevor der Tastenanschlag registriert wird.

Können Elemente nach dem Ansteuern nicht mehr verlassen werden, spricht man von einer Tastaturfalle.

Umsetzung der Richtlinie und Beispiele

Surfen mit der Tabulatortaste

Zwei Tasten werden in der Regel zum Surfen mit der Tastatur im Internet benötigt: die Tabulator-Taste zum Anspringen der Links oder Steuerelemente und die Enter-Taste. Voraussetzung zum Nutzen der Tabulatortaste zum Surfen ist, dass das Element, das angesprungen werden soll, fokussierbar ist. Es ist daher wichtig, dass die logische Reihenfolge der Elemente (Links, Buttons, Eingabefelder, Kontrollkästchen, usw.) eingehalten wird und die Elemente einen sichtbaren Fokus besitzen. Das „Tabben“ mit der Tabulatortaste ist allerdings relativ umständlich, da alle Links in der Reihenfolge angesprungen werden, in der sie im Quelltext vorkommen.

Skiplinks

Skiplinks ermöglichen dem Besucher einer Website den schnelleren Zugriff auf einzelne Website-Bereiche. Diese Links sollten vor dem Inhalt der Website eingefügt werden, damit sie als erstes angesprungen werden können. Über Textanker kann der gewünschte Bereich, z. B. Navigation oder Inhalt, direkt angesprungen werden. So erspart sich ein Besucher das umständliche Tabben aller Navigationslinks, bevor er zum eigentlichen Inhalt der Seite gelangt und den dort vorhandenen Links folgen kann. Skiplinks können auf alle Elemente einer Website verweisen, die mittels einer ID eindeutig identifizierbar sind. Zum Ausblenden der Links sollten diese per CSS absolut positioniert werden, z. B.

#skipLinks {
left: -9999px;
position: absolute;
top: -9999px;
}

Skiplinks sollten nicht mittels display:none ausgeblendet werden, da sie dadurch auch von Screenreadern nicht mehr erfasst werden. Bei der Fokussierung über die Tastatur werden die Links aus dem nicht sichtbaren Bereich zurückgeholt.

Steuerung der Reihenfolge per Tabindex

Über das Attribut „tabindex“ können jedoch Links in einer anderen Reihenfolge angesprungen werden, als sie im Quelltext vorkommen. Beispiel:

<a href=“http://www.website.de/“ tabindex=“1″>Startseite</a>

<a href=“http://www.website.de/angebote.html“ tabindex=“2″>Angebote</a>

Erlaubt sind Zahlen zwischen 0 und 32767.

Direktes Anspringen durch Tastaturkürzel / Accesskeys

Durch das Attribut „accesskey“ können Zeichen auf der Tastatur bestimmt werden, über die Besucher direkt zu einzelnen Elementen springen können. Je nach Browser wird über eine Kombination mit [Alt], [Ctrl], [Shift] oder [Esc] und der Taste für den Buchstaben das gewünschte Element direkt angewählt. So wird beispielsweise im Firefox unter Mac mittels [Ctrl] und dem jeweiligen Accesskey der entsprechende Link angesprungen.

Eine Entwicklung einer gemeinsamen Initiative von Jan Eric Hellbusch, Ralf Hertsch und bundesrepublik.org ist das AccessKey-Pad. Hierdurch soll die Belegung einheitlicher Tastatur-Kurzbefehle gefördert werden. Das AccessKey-Pad ist ausschließlich mit HTML und CSS realisiert und kann dadurch leicht in eigene Websites integriert und durch die Einbettung in einen Container beliebig auf der Seite positioniert werden. Der Quelltext und die CSS-Formatierungszuordnungen werden als Download angeboten. Ein Beispiel für die Nutzung von Accesskeys und die Einbindung des AccessKey-Pads in eine Website zeigt der nachfolgende Screenshot, bei der z. B. Navigationslinks über Accesskeys direkt angesprungen werden können. In der rechten Seitenleiste ist eine Übersicht über die zu verfügbaren Tastenkürzel angebracht:

Direktes Anspringen von Navigationslinks per Accesskeys

Der entsprechende Navigationspunkt der Website enthält das Attribut accesskey=“3″ zum Ansteuern mit der Tastatur (z. B. [Ctrl] und 3 bei Firefox unter Mac OS).

Auszeichnung des Accesskeys im Quellcode

 

Auch Google ist seit einer Weile leichter mit der Tastatur zu bedienen. Beim Eingeben der Suchbegriffe und Betätigen der Enter-Taste erscheint vor dem ersten Suchergebnis ein kleiner blauer Pfeil. Diesen kann man mithilfe der Pfeiltasten auf der Tastatur vor das gewünschte Suchergebnis bewegen oder ihn auf der Paginierung auf „Weiter“ platzieren. Wird mit Enter bestätigt, erscheint die nächste Google-Ergebnisseite. Diese Entwicklung kann natürlich darauf zurückgeführt werden, dass Google sich auch um das Thema Barrierefreiheit kümmert. Allerdings erscheint es auch möglich, dass die Nutzung der Website ohne Maus für Google TV eingeführt wurde.

Selbsttest: Bedienung einer Website nur mithilfe der Tastatur

Um zu prüfen, ob die Erfolgskriterien der Richtlinie 2.1 erfüllt werden, sollte eine Website testweise nur mit der Tastatur bedient werden. Dabei wird deutlich, auf welche Probleme Besucher beim Bedienen der Website ohne Maus treffen können. Während Windows-Nutzer in den gängigen Browsern wie Firefox, Internet Explorer oder Google Chrome ohne Probleme „Tabben“ können, funktioniert das Surfen mithilfe der Tastatur unter Mac leider nicht so einfach. Im Firefox lässt sich der Tabmodus manuell einstellen. Das Umstellen geht schnell und unkompliziert.

Die Inhalte und Erfolgskriterien der Richtlinie 2.1 Per Tastatur zugänglich sind in der deutschen Übersetzung nachzulesen unter www.w3.org.

Der nächste Artikel beschäftigt sich mit der WCAG 2.0 Richtlinie 2.2 Ausreichend Zeit.

Weitere Informationen zum Thema:

Mehr zum Thema: