taba11y (gesprochen: "tab-a11y", kurz für "tab accessibility") ist eine kostenlose Browser-Extension für Chrome und Firefox, die die Tab-Reihenfolge aller fokussierbaren Elemente auf einer Webseite berechnet und visuell darstellt. Die Extension zeigt den Navigationspfad entweder als verbundene Linie zwischen den Elementen oder durch farbliches Hervorheben jedes einzelnen fokussierbaren Elements an.
Für Entwicklerinnen und Entwickler, die barrierefreies Webdesign umsetzen wollen, ist das Tool ein unverzichtbarer Helfer. Das Tab-a11y-Tool macht auf einen Blick sichtbar, ob die Tastaturnavigation einer Website logisch und WCAG-konform aufgebaut ist – ohne manuelles Durchklicken per Tab-Taste. taba11y, Tab11y, taba 11y oder tab-a11y sind allesamt gebräuchliche Schreibweisen für dasselbe Werkzeug.
Die Extension ist in Version 1.82 verfügbar, sammelt laut Entwickler keinerlei Nutzerdaten und benötigt keine sensitiven Browser-Berechtigungen. Sie funktioniert auch auf passwortgeschützten Seiten und lokalen Entwicklungsumgebungen – ein klarer Vorteil gegenüber cloudbasierten Testdiensten.
Wir entwickeln maßgeschneiderte Frontend-Lösungen nach WCAG-Standards. Von der Konzeption bis zur Implementierung - profitiert von unserer Expertise in barrierefreier Webentwicklung.
Lasst uns gemeinsam eure Anforderungen besprechen. Wir zeigen euch, wie moderne Frontend-Entwicklung und Barrierefreiheit Hand in Hand gehen.
Die Tab-Reihenfolge beschreibt die Reihenfolge, in der Nutzerinnen und Nutzer mit der Tab-Taste durch die interaktiven Elemente einer Webseite navigieren. Für Menschen, die keine Maus benutzen können – sei es durch motorische Einschränkungen, Blindheit oder einfach persönliche Präferenz – ist eine logische Tab-Reihenfolge oft die einzige Möglichkeit, eine Website zu bedienen.
Der WCAG-Erfolgskriterium 2.4.3 (Fokus-Reihenfolge) verlangt auf Level A, dass fokussierbare Komponenten in einer Reihenfolge navigiert werden, die Bedeutung und Bedienbarkeit erhält. In Deutschland verschärft das Barrierefreiheitsstärkungsgesetz (BFSG), das ab dem 28. Juni 2025 für viele private Unternehmen gilt, diese Anforderung erheblich. Eine fehlerhafte Tab-Reihenfolge kann zu direkten Compliance-Verstößen führen.
Typische Probleme, die taba11y aufdeckt:
tabindex-Werten größer 0, die die natürliche Reihenfolge durchbrechenDie Installation von taba11y dauert weniger als eine Minute. Das Tool ist sowohl im Chrome Web Store als auch als Firefox-Add-on verfügbar:
So nutzt man das Tab-Order-Tool in der Praxis:
Das Tab-a11y-Tool bietet verschiedene Anzeigeoptionen, die sich für unterschiedliche Prüfsituationen eignen. Der Pfad-Modus ist ideal, um den Gesamtfluss der Navigation zu beurteilen. Der Highlight-Modus hilft, einzelne problematische Elemente zu identifizieren. Beide Modi funktionieren auch auf dynamisch geladenen Seiten, haben aber bekannte Einschränkungen bei überlagernden Floating-Menüs.
Wir sind Ihre Partner für Frontend Entwicklung. Unsere Experten unterstützen Sie bei der Erstellung von performanten, sicheren und barrierefreien Webanwendungen. Erfahren Sie mehr über unsere Leistungen und lassen Sie uns gemeinsam Ihre Ziele erreichen.
Mehr erfahrentaba11y ist kein Allround-Accessibility-Checker, sondern ein Spezialist für genau eine Aufgabe: Tab-Reihenfolge sichtbar machen. Im Vergleich zu den anderen gängigen Tools wird die Arbeitsteilung schnell klar:
axe DevTools prüft automatisch auf Dutzende WCAG-Verstöße (fehlende Alt-Texte, Kontrastverhältnisse, ARIA-Fehler), aber zeigt keine visuelle Tab-Reihenfolge. WAVE hebt Accessibility-Fehler direkt auf der Seite hervor, ist aber kein Tab-Order-Spezialist. Google Lighthouse liefert einen Accessibility-Score, prüft aber die logische Fokus-Reihenfolge nicht manuell nach. Genau hier setzt taba11y an – als visuelles Werkzeug, das kein anderes Tool so kompakt ersetzt.
Die Empfehlung für professionelle Accessibility-Audits: Alle vier Tools kombinieren. axe DevTools in Verbindung mit Cypress für automatisierte Tests im CI/CD-Workflow, WAVE für schnelle visuelle Übersichten, Lighthouse für den Gesamtscore – und taba11y als gezieltes Werkzeug zur Prüfung der Tastaturnavigation.
Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) auch für private Unternehmen in Deutschland, die digitale Produkte und Dienstleistungen anbieten. Webshops, Apps und Serviceplattformen müssen seitdem die Anforderungen der EN 301 549 erfüllen, die im Kern auf den WCAG 2.1 Level AA basiert.
Das WCAG-Erfolgskriterium 2.4.3 (Fokus-Reihenfolge) auf Level A ist dabei besonders praxisrelevant: Es verlangt, dass der Fokus beim Durchnavigieren mit der Tastatur eine sinnvolle Reihenfolge folgt. Tab11y macht genau diesen Aspekt transparent und prüfbar – ohne dass man die gesamte Seite manuell mit der Tab-Taste durchklicken muss. Ergänzend greift WCAG 2.4.7 (Fokus sichtbar), das taba11y ebenfalls indirekt unterstützt, indem es den Fokuspfad sichtbar macht.
Für NCA-Kunden, die eine BFSG-Compliance-Prüfung ihrer Website benötigen, ist taba11y fester Bestandteil des manuellen Teststapels. Automatisierte Tools allein reichen für eine rechtssichere Aussage nicht aus – die Kombination aus automatisierten und manuellen Tests ist der einzige verlässliche Weg.
taba11y ist ein starkes Sichtwerkzeug, aber kein vollständiger Accessibility-Scanner. Die Extension prüft ausschließlich die Tab-Reihenfolge und Fokussierbarkeit von Elementen – keine Farbkontraste, keine ARIA-Labels, keine Alternativtexte. Für einen vollständigen WCAG-Audit braucht es ergänzende Tools.
Bekannte Einschränkungen von taba11y (Tab11y) im Alltag:
NCA empfiehlt taba11y als festen Bestandteil eines mehrschichtigen Test-Workflows: Tab-Order mit taba11y prüfen, automatische Scans mit axe DevTools durchführen und manuelle Tests mit echten Screenreadern (NVDA, VoiceOver) ergänzen. Erst diese Kombination liefert die Sicherheit, die das BFSG verlangt.
Die wichtigsten Fragen rund um das Tab-Order-Testing-Tool taba11y – von der Installation bis zum professionellen Einsatz im BFSG-Compliance-Workflow.
taba11y ist eine kostenlose Browser-Extension für Chrome und Firefox, die die Tab-Reihenfolge aller fokussierbaren Elemente auf einer Webseite visuell darstellt. 2026 wird sie vor allem im Rahmen von BFSG- und WCAG-Compliance-Audits eingesetzt, um Tastaturnavigation schnell und zuverlässig zu prüfen.
taba11y lässt sich direkt über den Chrome Web Store installieren – einfach nach 'taba11y' suchen oder die Extension-ID aocppmckdocdjkphmofnklcjhdidgmga aufrufen. Nach einem Klick auf 'Zu Chrome hinzufügen' erscheint das Icon sofort in der Symbolleiste. Eine Registrierung ist nicht erforderlich.
Ja, taba11y ist vollständig kostenlos und Open Source. Der Entwickler erhebt keinerlei Nutzungsgebühren und sammelt laut eigenen Angaben keine Nutzerdaten. Die Extension benötigt keine sensitiven Browser-Berechtigungen und funktioniert komplett lokal im Browser.
taba11y hilft direkt bei der Prüfung von WCAG 2.1 Erfolgskriterium 2.4.3 (Fokus-Reihenfolge), das auch für die BFSG-Compliance relevant ist. Das Tool zeigt, ob die Tastaturnavigation logisch aufgebaut ist – ein zentrales Anforderungskriterium des Barrierefreiheitsstärkungsgesetzes, das ab Juni 2025 gilt.
taba11y nummeriert alle fokussierbaren Elemente in der Reihenfolge, in der sie per Tab-Taste erreichbar sind. Im Pfad-Modus verbindet eine Linie alle Elemente, im Highlight-Modus werden sie farblich hervorgehoben. Ein Klick auf eine Nummer zeigt Details zum jeweiligen HTML-Element.
taba11y ist für Google Chrome und Mozilla Firefox verfügbar. Für Chrome gibt es die Extension im Chrome Web Store, für Firefox als Add-on über addons.mozilla.org. Andere Chromium-basierte Browser wie Edge oder Brave können die Chrome-Version in der Regel ebenfalls nutzen.
taba11y ist spezialisiert auf die visuelle Darstellung der Tab-Reihenfolge und erkennt keine anderen Accessibility-Fehler. axe DevTools ist ein vollständiger WCAG-Scanner, der viele Prüfkriterien automatisch bewertet, aber die Tab-Order nicht so anschaulich visualisiert. Beide Tools ergänzen sich ideal.
taba11y kann die Tab-Reihenfolge sichtbar machen, bewertet sie aber nicht automatisch. Die inhaltliche Bewertung – ob die Reihenfolge logisch und bedeutungserhaltend ist – erfordert menschliches Urteilsvermögen. taba11y liefert die Grundlage, die Beurteilung liegt beim Tester.
taba11y prüft ausschließlich Tab-Reihenfolge und Fokussierbarkeit. Es erkennt keine Farbkontrastfehler, fehlenden ARIA-Labels oder Alternativtexte. Floating-Menüs und iFrame-Inhalte werden nicht zuverlässig erfasst. Für SPAs (React, Vue) muss die Analyse nach dynamischen Änderungen manuell neu gestartet werden.
Ideal ist ein dreistufiger Workflow: Zuerst automatische Scans mit axe DevTools oder Lighthouse für bekannte WCAG-Fehler, dann taba11y für die visuelle Tab-Order-Prüfung, abschließend manuelle Tests mit Screenreadern wie NVDA oder VoiceOver. Dieser Ansatz deckt die Anforderungen des BFSG zuverlässig ab.
Die Tab-Reihenfolge bestimmt, in welcher Sequenz Tastaturnutzende durch interaktive Elemente einer Webseite navigieren. Für Screenreader-Nutzer und Menschen, die keine Maus bedienen können, ist eine logische Reihenfolge oft die einzige Möglichkeit zur Websitebedienung. Eine fehlerhafte Reihenfolge macht Seiten effektiv unnutzbar.
Ja, taba11y ist als Firefox-Add-on über addons.mozilla.org verfügbar und funktioniert dort identisch zur Chrome-Version. Da Firefox eigene Accessibility-DevTools mitbringt, empfiehlt sich taba11y als ergänzendes Sichtwerkzeug speziell für die Tab-Order-Analyse.
Axe DevTools mit Cypress integrieren: cypress-axe einrichten, WCAG Verstöße in CI/CD erkennen und axe-core konfigurieren. Praxis Guide 2026.
Erfahrt, wie ihr barrierefreie Überschriftenstrukturen erstellt, die sowohl Nutzern als auch eurer SEO zugutekommen. Anleitungen für WCAG-konforme Umsetzung.
Lernt, wie ihr Firefox effektiv für Barrierefreiheit-Tests einsetzen könnt. Von integrierten Dev-Tools bis zu hilfreichen Extensions - hier findet ihr alles für professionelles Accessibility Testing.
Google Lighthouse Accessibility Audit verstehen und nutzen: Score-Berechnung, axe-core-Engine, Audit-Kategorien, Grenzen und CI/CD-Integration für WCAG-Konformität.
