Keyboard Accessibility in HTML
Erst das richtige Element, dann die Taste
Klick-div, Scrollkasten, eingebetteter Rahmen: drei Stellen ohne Tastaturzugang.
Tastatur-Landkarte
Der Tabweg beginnt im HTML
Das passende Element liefert Fokus, Tastenkonvention und Bedeutung zusammen. Sehen Sie, welchen Vertrag der Browser aus sechs HTML-Bausteinen macht.
Vom Quelltext zur Taste
Konzeptionelle Browseransicht. Die genaue Tastenbelegung folgt auch dem Betriebssystem; dargestellt sind die üblichen Web-Konventionen.
<a href="/produkte">Navigation<summary>Offenlegen<input type="checkbox">Auswahl<button type="submit">Aktion<section tabindex="0">Scrollbereich38
40
42
44Fokus · Region · scrollbar
<iframe title="Termine">Eingebettete SeiteWas ein natives Element schon mitbringt
Ein button ist mehr als eine gezeichnete Fläche. Der Browser bündelt Tastaturfokus, Aktivierung und eine Rolle für assistive Technik.
<button>Tab-FokusEnter + LeertasteRolle + Name<div onclick>Zeigerklickkein Standardfokuskeine TastenlogikEine kleine Seite mit nativem Tabweg
Das Beispiel braucht für Link, Offenlegung, Auswahl und Absenden kein eigenes Tastatur-Skript. Die Scrollregion erhält den browserübergreifenden Fallback.
<a class="skip-link" href="#inhalt">
Zum Inhalt springen
</a>
<nav aria-label="Hauptnavigation">
<a href="/produkte">Produkte ansehen</a>
</nav>
<main id="inhalt" tabindex="-1">
<h1>Größen und Termine</h1>
<details>
<summary>Größenfilter</summary>
<form action="/produkte" method="get">
<label>
<input type="checkbox" name="groesse" value="42">
Größe 42
</label>
<button type="submit">Filter anwenden</button>
</form>
</details>
<section class="groessen" tabindex="0"
aria-labelledby="groessen-titel">
<h2 id="groessen-titel">Größentabelle</h2>
<p>Größe 36 bis Größe 48 …</p>
</section>
<iframe title="Terminkalender" src="/kalender"></iframe>
</main>tabindex gezielt einsetzen
kein tabindexNative ControlsLink, Button, Eingabefeld und Summary bringen ihren Platz mit.tabindex="0"In den TabwegFür eine Scrollregion, wenn sie sonst nicht erreichbar ist.tabindex="-1"Nur gezielt fokussierenEtwa ein Sprungziel oder eine nachgelagerte Fehlermeldung.tabindex="1+"Reihenfolge vermeidenPositive Werte lösen den Fokusweg von der DOM-Reihenfolge.So prüfen Sie es
- Legen Sie die Maus weg. Gehen Sie mit Tab vorwärts und mit Shift + Tab zurück. Der sichtbare Fokus folgt der inhaltlich sinnvollen DOM-Reihenfolge.
- Aktivieren Sie Links mit Enter, Buttons und Summary mit Enter sowie Leertaste. Jede Zeigeraktion muss auch ohne Zeiger erreichbar sein.
- Bewegen Sie den Fokus in jede Scrollregion und in jeden eingebetteten Rahmen. Scrollen Sie mit Pfeiltasten und tabben Sie anschließend wieder aus dem Bereich heraus.
- Wiederholen Sie den vollständigen Weg nach jeder dynamischen Änderung. Der Fokus darf nicht verschwinden, unerwartet springen oder in einer Komponente stecken bleiben.
Quellen zum Weiterarbeiten
Aus dem Prüfbericht
Drei Befunde im HTML
Kritisch Das anklickbare div ist kein Button Regel button-name
Ein div mit Klick-Handler hat weder Fokus noch Namen noch Enter. Ein button im HTML bringt alle drei mit.
Kritisch Der Scrollkasten hat keinen Tastaturzugang Regel scrollable-region-focusable
Ein Scrollkasten muss selbst oder über einen Nachfahren per Tastatur erreichbar sein. Für browserübergreifenden Zugang kann tabindex null am Kasten nötig sein.
Kritisch Der eingebettete Rahmen wird übersprungen Regel frame-focusable-content
Ein iframe mit negativem tabindex sperrt die Tastatur aus, obwohl darin ein Button sichtbar ist. Entfernen Sie das Attribut.
Zum Mitnehmen
Die Bedienelemente, korrigiert
Ein echter Button, ein anspringbarer Kasten, ein offener Rahmen.
Korrektur in 3 Schritten ansehen
Aus dem Klick-div einen Button machen
Das native button-Element ist fokussierbar, reagiert auf Enter und Leertaste und trägt seinen Text als Namen.
KorrekturvergleichSchritt 1 · HTML Vorher
<div class="knopf" onclick="oeffneFilter()"> Filter öffnen </div>Nachher
<button type="button" class="knopf" onclick="oeffneFilter()"> Filter öffnen </button>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab auf den Knopf und drücken Sie Enter. Der Filter öffnet sich.
Den Scrollkasten in den Tab-Weg nehmen
Mit tabindex null wird der Kasten auch in Browsern anspringbar, die Scrollregionen nicht automatisch in den Tab-Weg nehmen. Rolle und aria-label geben ihm einen Namen.
KorrekturvergleichSchritt 2 · HTML Vorher
<div class="tabelle" style="max-height:3rem;overflow:auto"> <p>Größe 36 bis Größe 48 …</p> </div>Nachher
<div class="tabelle" style="max-height:3rem;overflow:auto" tabindex="0" role="region" aria-label="Größentabelle"> <p>Größe 36 bis Größe 48 …</p> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab in den Kasten. Die Pfeiltasten bewegen jetzt seinen Inhalt.
Den eingebetteten Rahmen öffnen
Ein negatives tabindex am iframe hält den Fokus draußen. Ohne das Attribut führt der Tab-Weg regulär hinein.
KorrekturvergleichSchritt 3 · HTML Vorher
<iframe title="Terminkalender" tabindex="-1" src="/kalender"> </iframe>Nachher
<iframe title="Terminkalender" src="/kalender"> </iframe>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab bis zum Kalender. Der Fokus landet auf der ersten Schaltfläche darin.