Focus Order im HTML
Die Tastatur folgt dem HTML
Menü, Aufklappbereich, Karte: drei Stellen im Tastaturweg.
Fokuslinie
Die Reihenfolge entsteht im HTML, nicht im Raster.
Tab folgt dem DOM. CSS darf gestalten, aber keine bedeutungsvolle Folge vertauschen.
Bild und DOM erzählen dieselbe Folge.
<a>Termin</a>
<a>Preise</a>
<a>Kontakt</a>CSS vertauscht nur das Bild. Tab bleibt im DOM.
.kontakt { order: -1; }
/* DOM bleibt 1, 2, 3 */Entscheidend ist die Bedeutung der Folge
Zwei unabhängige Spalten dürfen mehrere verständliche Reihenfolgen haben. Kritisch wird es, wenn die Gestaltung eine Abfolge verspricht und der Fokus scheinbar zurückspringt. Dann ordnen Sie die Elemente im HTML und lassen CSS nur das Layout übernehmen.
Kopierbares Gerüst
Eine vollständige Seite in logischer Quelltextreihenfolge
Der Sprunglink beginnt den Weg. Inhalt steht vor der ergänzenden Seitenleiste. Auf kleinen Bildschirmen fällt das Raster zusammen, ohne dass sich DOM oder Fokusfolge ändern.
<body>
<a class="skip-link" href="#inhalt">Zum Inhalt</a>
<header>
<a href="/">Start</a>
<nav aria-label="Hauptnavigation">
<a href="/leistungen">Leistungen</a>
<a href="/kontakt">Kontakt</a>
</nav>
</header>
<div class="layout">
<main id="inhalt" tabindex="-1">
<h1>Leistungen</h1>
<a href="/termin">Termin vereinbaren</a>
</main>
<aside aria-label="Ergänzende Links">
<a href="/ablauf">Ablauf</a>
<a href="/fragen">Häufige Fragen</a>
</aside>
</div>
<footer><a href="/impressum">Impressum</a></footer>
</body>
<style>
.layout {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr);
gap: 2rem;
}
@media (max-width: 48rem) {
.layout { grid-template-columns: 1fr; }
}
.skip-link {
position: absolute;
transform: translateY(-120%);
}
.skip-link:focus-visible { transform: none; }
</style>tabindex="-1"Nur per Skript oder Sprunglinktabindex="0"An Position im DOMtabindex="1…"Erzwingt eine SonderrouteDrei Werte, drei völlig verschiedene Aufgaben
-1 macht ein Ziel programmatisch fokussierbar, ohne es in den normalen Tab-Weg zu setzen. 0 nimmt ein eigenes Widget an seiner DOM-Position auf. Positive Werte bauen eine zweite Reihenfolge und werden schnell unwartbar.
So prüfen Sie es
Zeichnen Sie zuerst den Weg, suchen Sie danach im Code
Testen Sie jede responsive Ansicht separat. Ein Layoutwechsel kann die visuelle Folge ändern, während die Tab-Reihenfolge gleich bleibt.
- Seite neu ladenDrücken Sie Tab und notieren Sie jeden sichtbaren Stopp.
- Bildweg vergleichenDie Linie muss der erwartbaren Leserichtung folgen.
- Rückwärts prüfenUmschalt + Tab führt durch dieselben Stopps zurück.
- Schmale Ansicht prüfenWiederholen Sie die Route nach dem Umbruch der Spalten.
[...document.querySelectorAll('[tabindex]')]
.filter((element) => element.tabIndex > 0)
.forEach((element) => console.log(element.tabIndex, element));Die Konsole sollte nichts ausgeben. Findet sie positive Werte, verschieben Sie das Element im DOM an die richtige Stelle und entfernen Sie die künstliche Nummerierung.
Grundlagen für Entwurf und Prüfung
Aus dem Prüfbericht
Zwei Regeln, zwei Fundstellen
Kritisch Ein Link steckt in einer Schaltfläche Regel nested-interactive
In der Terminkarte liegt ein Link im Button. Zwei Stopps auf einer Fläche: stellen Sie Link und Schaltfläche nebeneinander.
Zum Mitnehmen
Die Fokusreihenfolge, korrigiert
Drei Änderungen im HTML. Die Reihenfolge kommt aus dem Quelltext.
Korrektur in 3 Schritten ansehen
Geschlossenes wirklich ausblenden
aria-hidden verbirgt nur vor Vorleseprogrammen, nicht vor der Tabulatortaste. hidden nimmt den geschlossenen Bereich aus Anzeige und Tastaturweg.
KorrekturvergleichSchritt 1 · HTML Vorher
<div class="untermenue" aria-hidden="true"> <a href="/preise">Preise</a> </div>Nachher
<div class="untermenue" hidden> <a href="/preise">Preise</a> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie mehrmals die Tabulatortaste. Der Fokus springt am geschlossenen Untermenü vorbei.
Link und Schaltfläche nebeneinander stellen
Ein Bedienelement pro Fokusstopp. Der Link wird Geschwister der Schaltfläche und behält sein Ziel.
KorrekturvergleichSchritt 2 · HTML Vorher
<button type="button">Termin wählen <a href="/termine">Alle Termine</a> </button>Nachher
<button type="button">Termin wählen</button> <a href="/termine">Alle Termine</a>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit der Tabulatortaste durch die Karte. Schaltfläche und Link werden getrennt angesagt.
Positive tabindex-Werte entfernen
Ohne tabindex folgt der Fokus dem Quelltext. Sortieren Sie die Links dort so, wie sie gelesen werden sollen.
KorrekturvergleichSchritt 3 · HTML Vorher
<a href="/leistungen" tabindex="3">Leistungen</a> <a href="/preise" tabindex="1">Preise</a> <a href="/kontakt" tabindex="2">Kontakt</a>Nachher
<a href="/preise">Preise</a> <a href="/kontakt">Kontakt</a> <a href="/leistungen">Leistungen</a>Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie Tab von oben nach unten. Der Fokus läuft in derselben Folge wie die sichtbaren Links.