Tastatur

Inhalte und Funktionalitäten müssen mit der Tastatur alleine erreicht und bedient werden können. Dies ermöglicht es Menschen, die keine Zeigegeräte (etwa Maus oder Touchscreen) bedienen können, sämtliche Inhalte erreichen und alle Funktionen nutzen zu können.

Verstehen

Körperlich eingeschränkte Menschen können oft keine Maus oder ähnliche Zeigegeräte bedienen und sind auf die Tastatur angewiesen. Auch assistierende Eingabegeräte verwenden dieselbe als Schnittstelle. Es ist deshalb erforderlich, dass alle Funktionalitäten einer Seite auch allein mit einer Tastatur bedient werden können. Dies betrifft insbesondere JavaScript-Widgets unterschiedlichster Art (etwa Videoplayer, Datepicker, Tooltips).

Erleichtern Sie zudem die Navigation per Tastatur, indem Sie deren Fokus intelligent führen. Setzen Sie bspw. beim Öffnen eines modalen Dialogs den Fokus in diesen hinein; verhindern Sie, dass er zurück in den abgedunkelten Hintergrund springen kann; und setzen Sie den Fokus zurück auf das vorhergehende Element, wenn der Dialog geschlossen wird. Beachten Sie diesbezüglich auch 2.4.3.

Während HTML-Standardelemente von allen Browsern «von Haus aus» zugänglich angeboten werden, liegt die Zugänglichkeit von Widgets komplett in der Verantwortung der Programmierenden. Normalerweise sind diese per Default nicht barrierefrei zugänglich, Barrierefreiheit muss erst mit besonderen Vorkehrungen (und entsprechendem Aufwand) «hergestellt» werden.

Empfehlungen:

- Elemente, die einzeln ausgegeben werden sollen, sind als display: block ausgezeichnet, sonst können sie im Browse-Mode (normale Inhaltsnavigation mittels Pfeil-Tasten) nicht einzeln angesteuert werden. Dies gilt hauptsächlich für interaktive Elemente (Links, Buttons, etc.).

- Elemente, die von Screenreadern zusammen ausgegeben werden sollen (etwa eine Überschrift, die sowohl eine Kategorie als auch ein Datum enthält), sind als display: inline bzw. display: inline-block ausgezeichnet und befinden sich zusammen in einem display: block-Container.

Wichtig: Wir empfehlen, wenn möglich Standard-HTML-Elemente einzusetzen, und JavaScript-Widgets nur dann einzusetzen, wenn HTML keine entsprechende Funktionalität anbietet. Entsprechend ist ein <button> einem <div onclick="..."> vorzuziehen; dasselbe gilt für ein <select> anstelle eines JavaScript-Dropdowns. Verwenden Sie zudem generell nur JavaScript-Events, welche auch durch die Tastatur ausgelöst werden (etwa click, aber nicht hover). Siehe dazu auch 4.1.2.

Vorsicht: Viele angebotene JavaScript-Widget-Bibliotheken behaupten, auf Zugänglichkeit hin optimiert zu sein. Dies ist oft irreführend, da Ansichten über Zugänglichkeit sowie Zielplattformen sich unterscheiden können. Stellen Sie die Zugänglichkeit solcher Bibliotheken deshalb immer im Voraus selber sicher.

Verantwortlichkeiten

• Das Designteam definiert JavaScript-Widgets mit dem Augenmerk auf Einfachheit und Bedienbarkeit mittels Tastatur.
• Das Entwicklungsteam setzt die vom Designteam definierten Vorgaben korrekt um. Werden JavaScript-Widget-Bibliotheken verwendet, so werden diese erst eingehend auf Zugänglichkeit hin untersucht.
• Auftraggebende sollten sich bewusst sein, dass die Umsetzung von zugänglichen JavaScript-Widgets Zusatzaufwand bedeuten kann.

WCAG-Text

Alle Funktionalitäten des Inhalts sind durch eine Tastaturschnittstelle bedienbar, ohne dass eine bestimmte Zeiteinteilung für einzelne Tastenanschläge erforderlich ist, ausser wenn die zugrunde liegende Funktion Eingaben verlangt, die vom Pfad der Bewegung des Benutzers und nicht nur von den Endpunkten abhängig sind.

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) pfadabhä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.

Code-Beispiel

<!-- HTML-Schalter: gut -->
<button>Abschicken</button>

<!-- Custom Schalter: schlecht -->
<span onclick="...">Abschicken</span>

<!-- Nicht durch Tastatur auslösbarer Event: schlecht -->
<span onhover="...">Tooltip anzeigen</span>