Tastaturbedienung

Alle Funktionen des digitalen Angebots müssen über eine Tastatur bedienbar und zugänglich sein. Es gibt eine „echte“ Tastatur, Bildschirmtastatur oder Sprachsteuerung, über die Anweisungen mit Tastatureingaben erzeugt werden können. Diese Funktionalität ist für blinde Menschen mit Screenreader, die keine Maus benutzen, und den Computer mit Hilfe von einer Sprachausgabe oder Braillezeile bedienen, besonders wichtig. Aber auch sehbeeinträchtigte Menschen profitieren, wenn eine starke Vergrößerung verwendet wird. Es können dann immer nur kleine Teile bzw. Ausschnitte des Bildschirms eingesehen werden. Der Ausschnitt muss entsprechend verschoben werden. Diese Arbeitsweise ist mit der Maus umständlich. Die Eingabeelemente und Links können stattdessen mit der Tastatur angesprungen werden. Auf diese Weise wird immer der entsprechende Ausschnitt auf dem Bildschirm angezeigt. Auch motorisch eingeschränkte Menschen, die keine Zeigegeräte (z. B. Maus, Eye-Tracking), jedoch stattdessen vielleicht eine Tastatur evtl. mit Fingerführraster oder auch eine Bildschirmtastatur zusammen mit einem Schalter verwenden, sind auf Tastatureingaben angewiesen. Darüber hinaus können Benutzende, die Sprachsteuerung verwenden, mit Hilfe dieser auf einfache Weise, Text und Tastatureingaben erzeugen. Für Tastaturnutzende ist es besonders wichtig, dass der Fokus gut sichtbar ist, um erkennen zu können, an welcher Stelle sich der Tastaturfokus gerade befindet. Ebenfalls wichtig ist auch die Reihenfolge, in der die Elemente mit Hilfe der Tastatursteuerung angesteuert werden. Screenreader lesen die Elemente in einem digitalen Angebot in der Reihenfolge nacheinander vor, wie sie im Quellcode angeordnet sind. Daher muss die Reihenfolge aller interaktiven Elemente gut verständlich und nutzbar sein.

Ein Bedienelement, wie z. B. eine Schaltfläche, ein Link oder ein Formularelement ist nicht mit der Tastatur (z. B. Tabulator-Taste) erreichbar. Die nutzende Person kann den Tastaturfokus nicht erkennen.

• 2.1.1 Tastatur
• 2.4.7 Fokus sichtbar
• 4.1.2 Name, Rolle, Wert

Es wurde ein Element verwendet, welches für Interaktionen mit Maus/Tastatur nicht vorgesehen ist, z. B. <h3>, <img>, <div>. Diesem ist ein click-Ereignis zugeordnet, das in diesem Fall nicht die Tastaturbedienung unterstützt.

Es sollten native Elemente verwendet werden, mit denen eine Interaktion möglich ist (z. B. Buttons, Links). Diese wurden speziell für die Interaktion mit den Benutzenden zur Verfügung gestellt. Sie sind standardmäßig fokussierbar. Der Zugriff erfolgt in der Reihenfolge, wie sie im Quellcode angezeigt werden. Werden selbst erstellte Elemente, z. B. DIV-Container verwendet, muss über die Accessibility API kommuniziert werden, welchen Namen, welche Rolle und welchen Zustand (Wert) das Element hat. Interaktive Elemente, die mit nicht nativen Elementen erstellt wurden, werden nicht in den Accessibility Tree aufgenommen. Daher können diese Elemente nicht mit der Tabulatortaste fokussiert werden. Damit ein Element fokussiert werden kann, ist ein tabindex-Attribut notwendig. Mit dem Attribut tabindex=“0“ wird das Element in die Tabulatorreihenfolge des digitalen Angebots aufgenommen. Der Wert gibt an, an welcher Stelle das Element an der sequenziellen Tastaturnavigation beteiligt ist.

Element ist nicht mit der Tastatur erreichbar.

<div>Aktion auslösen</div>

Element wird fokussiert und ist mit der Tastatur erreichbar.

<div tabindex="0">Aktion auslösen</div>

Element wird fokussiert, als Button ausgezeichnet und ist mit der Tastatur erreichbar.

<div role="button" tabindex="0">Aktion auslösen</div>

Interaktives natives Element (Button) ist mit der Tastatur erreichbar.

<button>Aktion auslösen</button>

Neben dem onclick-Event-Handler muss ein tastaturspezifischer Event-Handler ergänzt werden, so dass mit der Eingabe- oder Leertaste das Ereignis auch über die Tastatur ausgelöst werden kann.

Element ist mit der Tastatur erreichbar, aber nur mit Maus ist eine Aktion auslösbar.

<div onclick="myFunction()" tabindex="0">Aktion auslösen</div>

Element ist mit der Tastatur erreichbar. Eine Aktion ist mit Maus und Tastatur auslösbar.

<div onclick="myFunction()" onkeypress="myFunction()" tabindex="0">Aktion auslösen</div>

Interaktives natives Element (Button) ist mit der Tastatur erreichbar. Eine Aktion ist sowohl mit Maus als auch mit Tastatur auslösbar.

<button onclick="myFunction()">Aktion auslösen</button>

• WCAG 2.1 - 2.4.7 Tastatur
• Tastaturzugänglichkeit
• WAI-ARIA Übersicht
• Access & Use
• Verwenden des tabindex-Attributs
• WAI-ARIA Authoring Practices 1.1 (Button)

Ein sichtbarer Fokus ist notwendig, damit Tastaturnutzende erkennen können, auf welchem Element sie sich befinden. Dies erleichtert die Orientierung auf digitalen Angeboten. Der vom Benutzeragenten (z. B. Browser) vorgegebene Tastaturfokus hebt sich von Hintergründen oft nicht gut ab und wird in verschiedenen Browsern unterschiedlich dargestellt.

Menschen, die die Seite mit der Tastatur bedienen, können nicht erkennen, auf welchem Element sie sich befinden.

• 2.4.7 Fokus sichtbar

Es wird beispielsweise in CSS outline: 0 oder outline: none verwendet. Dies führt dazu, dass der Tastaturfokus nicht sichtbar ist.

Benutzeragenten stellen den Tastaturfokus unterschiedlich dar. Für eine einheitliche Darstellung empfehlen wir einen eigenen Fokus zu definieren. Mit der künftig maßgeblichen WCAG 2.2 wird eine bessere Fokusdarstellung vorgeschrieben. Der Tastaturfokus kann mit Hilfe von CSS deutlich sichtbarer gestaltet werden, z. B. über die Eigenschaft „outline“ oder durch die Verwendung einer Hintergrundfarbe (Kontrastwechsel). Das Kontrastverhältnis zwischen fokussiertem und nicht fokussiertem Zustand muss mindestens 3:1 betragen. Alternativ kann die Fokushervorhebung auch durch Unterstreichungen hervorgehoben werden.

In CSS die Eigenschaft color und background-color mit ausreichendem Kontrast bei Flächenfokus setzen.

Maus und Tastaturfokus auf einem Link-Element hervorheben.

<a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible">WCAG 2.1 2.4.7</a>

dazugehöriges CSS

a:hover, a:focus {
  background-color: #DCFFFF;
  color:#000066;
}

In CSS die Eigenschaft border oder outline mit ausreichendem Kontrast von 3:1 bei Rahmenfokus setzen.

Maus und Tastaturfokus ist auf einem Button-Element nicht sichtbar.

<button class="notvisible">Fokus ist nicht sichtbar</button>

dazugehöriges CSS

.notvisible:focus, .notvisible:hover{
    outline: none;
}

Maus und Tastaturfokus sind auf einem Button-Element hervorzuheben. Fokus ist sichtbar

dazugehöriges CSS

button:focus, button:hover{
    box-shadow: 0 0 0px 2px white;
    outline: dotted;
}

• WCAG 2.1 - 2.4.7 Sichtbarer Fokus
• WCAG 2.2 - 2.4.11 Fokus Erscheinungsbild (Minimum)

Durch eine korrekte Fokusreihenfolge ist das digitale Angebot effektiv und nachvollziehbar bedienbar.

Benutzende werden irritiert und können sich im digitalen Angebot nicht orientieren.

• 1.3.2 Sinnvolle Reihenfolge
• 2.4.3 Fokusreihenfolge

Im Quellcode wurden die Elemente nicht in der richtigen Reihenfolge positioniert. Möglicherweise wurden falsche Werte für das Attribut tabindex gesetzt.

Korrekte Positionierung der Elemente im Quellcode.

Falsche Positionierung der Elemente im Quellcode

<div>
    <h4>Falsche Positionierung der Elemente im Quellcode</h4>
<div style="float:right; width:33%">Position 1</div>
<div style="float:right; width:33%">Position 2</div>
<div style="float:right; width:33%">Position 3</div>
</div>

Korrekte Positionierung der Elemente im Quellcode

<div>
    <h4>Richtige Positionierung der Elemente im Quellcode</h4>
<div style="float:left; width:33%">Position 1</div>
<div style="float:left; width:33%">Position 2</div>
<div style="float:left; width:33%">Position 3</div>
</div>

Durch Festlegung eines Wertes für das Attribut tabindex größer 0 (ganze Zahl zwischen 1- 32.767) wird die Tastaturnavigationsreihenfolge verändert, beginnend mit dem kleinsten Wert bis zum größten. Nachdem alle Elemente nacheinander mit positiven tabindex-Werten mit der Tabulatortaste durchlaufen wurden, werden andere fokussierbare Elemente durchlaufen, deren tabindex-Wert = 0 ist.

Ein tabindex=0 bewirkt, dass das Element in den Accessibility Tree und die Tab-Reihenfolge aufgenommen wurde.

Mit einem tabindex=-1 kann ein programmatischer Fokus gesetzt werden. Ein Element kann fokussiert werden, ohne dass es in die Tab-Reihenfolge aufgenommen wurde (Beispiel 7). Dadurch bleibt das Element mit Javascript weiterhin fokussierbar.

Es wird empfohlen, auf eine geänderte Tastaturnavigationsreihenfolge zu verzichten.

Lesereihenfolge ist aufgrund der falschen Verwendung des tabindex-Attribut nicht korrekt

korrekte Lesereihenfolge

<div>
    <h4>Verzicht auf das Attribut tabindex</h4>
<a href="">eins</a>
<a href="">zwei</a>
<a href="">drei</a>
<a href="">vier</a>
</div>

Versteckte Menüs bei mobilen Ansichten (z. B. Hamburger-Menü) werden mittels eines Schalters eingeblendet. Alle Bedienelemente außerhalb des Menüs können dynamisch mittels tabindex="-1" aus der Tab-Reihenfolge entfernt werden, sodass das Menü iterativ durchlaufen werden kann. Nach dem Schließen des Menüs werden die Bedienelemente mittels tabindex=“0” wieder in die Tab-Reihenfolge aufgenommen.

• WCAG2.1 2.4.3 Fokusreihenfolge
• C27: Anpassen der DOM-Reihenfolge an die visuelle Reihenfolge
• Verwenden des tabindex-Attributs

Informationen zu diesem Artikel

Datum:

8.03.2023

Lizenz:

CC-BY-SA 4.0

Version:

1.0

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!