WCAG 2.1 - 2.4.3
Focus Order
Wenn eine Webseite sequenziell navigiert werden kann und die Navigationssequenzen Bedeutung oder Funktion beeinflussen, erhalten fokussierbare Komponenten in einer Reihenfolge den Fokus, die Bedeutung und Bedienbarkeit bewahrt.
Inhalt
Was Bedeutet das Success Criterium 2.4.3 - Focus Order?Warum ist es so wichtig, das Success Criterium 2.4.3 - Focus Order zu beachten?Was hat das Success Criterium 2.4.3 - Focus Order mit dem BFSG zu tun?Lösungen für 2.4.3 - Focus Order anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 2.4.3 - Focus Order?Was Bedeutet das Success Criterium 2.4.3 - Focus Order?
Success Criterion 2.4.3 – Focus Order fordert, dass die Reihenfolge, in der sich der Tastaturfokus durch die Bedienelemente der Seite bewegt, logisch und intuitiv nachvollziehbar ist. Das bedeutet: Wenn Nutzerinnen und Nutzer mit der Tabulatortaste (Tab) oder anderen Tastaturbefehlen von einem Element zum nächsten springen, sollte diese Reihenfolge der visuellen und inhaltlichen Struktur entsprechen. Die Navigation über die Tastatur muss sinnvoll und konsistent sein – man darf nicht "springen", Teile überspringen oder in einer unlogischen Reihenfolge geführt werden.
Umsetzungs-Tipps
- Benutzer sollten mit Tab (vorwärts) und Shift + Tab (rückwärts) einen nachvollziehbaren Weg durch alle bedienbaren (fokussierbaren) Elemente nehmen können.
- Die Reihenfolge wird durch die Reihenfolge der Elemente im DOM (HTML-Quelltext) und ggf. durch das HTML-Attribut
tabindexbestimmt. - Vermeide zu hohe bzw. negative
tabindex-Werte. - Interaktive Elemente (Links, Buttons, Formularelemente) sollten in der logischen Reihenfolge im HTML stehen.
Warum ist es so wichtig, das Success Criterium 2.4.3 - Focus Order zu beachten?
Wenn die Fokusreihenfolge nicht nachvollziehbar ist, können Nutzerinnen und Nutzer, die auf die Tastaturnavigation angewiesen sind – z.B. Menschen mit motorischen Einschränkungen oder blinde Menschen mit Screenreadern – wichtige Bereiche deiner Website nicht oder nur sehr schwer erreichen. Dies kann dazu führen, dass Informationen oder Funktionen übersehen oder nicht bedient werden können, was die Zugänglichkeit erheblich einschränkt.
Was hat das Success Criterium 2.4.3 - Focus Order mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Website-Betreiber, alle relevanten WCAG-Kriterien (mindestens Level AA) einzuhalten. 2.4.3 ist ein Pflichtkriterium. Wenn die Fokusreihenfolge auf deiner Website nicht logisch ist, ist die Seite rechtlich nicht barrierefrei (gemäß BT-TV und EU-Richtlinie 2019/882) – der Zugang zu wesentlichen Inhalten ist für alle Menschen, insbesondere für Menschen mit Behinderung, nicht sichergestellt. Dies kann zu Abmahnungen, Beschwerden oder Auflagen führen.
Lösungen für 2.4.3 - Focus Order anhand von Codebeispielen
Falscher Code
<a href="#main">Zum Hauptinhalt</a>
<nav>
<a href="#home">Startseite</a>
<a href="#about">Über uns</a>
</nav>
<form>
<input type="text" name="name" placeholder="Name">
<button>Absenden</button>
</form>
<aside tabindex="0">Werbung</aside>
<main id="main">
<h1>Willkommen</h1>
</main>Korrekter Code
<a href="#main">Zum Hauptinhalt</a>
<nav>
<a href="#home">Startseite</a>
<a href="#about">Über uns</a>
</nav>
<main id="main">
<h1>Willkommen</h1>
</main>
<form>
<input type="text" name="name" placeholder="Name">
<button>Absenden</button>
</form>
<aside>Werbung</aside>Im schlechten Beispiel hat das <aside> ein tabindex="0", wodurch es unnötig in die Fokus-Reihenfolge kommt und Benutzer vor dem Hauptinhalt und Formular irritiert. Die Reihenfolge im DOM entspricht dabei nicht der visuellen Anordnung – z.B. kommt das Formular vor dem eigentlichen Inhalt. Im guten Beispiel sind die relevanten interaktiven Bereiche logisch angeordnet, das <aside> ist nicht fokussierbar und alle wichtigen Bereiche können der sichtbaren Reihenfolge nach fokussiert werden.
Falscher Code
<button tabindex="3">A</button>
<button tabindex="1">B</button>
<button tabindex="2">C</button>Korrekter Code
<button>A</button>
<button>B</button>
<button>C</button>Im schlechten Beispiel wird mit tabindex die natürliche Reihenfolge verfälscht, sodass die Fokusreihenfolge nicht mit der angezeigten Reihenfolge übereinstimmt (erst B, dann C, dann A). Im guten Beispiel sorgt die natürliche DOM-Reihenfolge dafür, dass Tab auch optisch von links nach rechts an den Buttons entlangführt.
Wie löse ich Verstöße gegen das Success Criterium 2.4.3 - Focus Order?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.