Praxisleitfaden Registerkarten beschriften
Namenlose Tabs verständlich benennen
Erkennen Sie leere Registerkarten und prüfen Sie ihre Beschriftung nach der Korrektur.
aria-tab-nameWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-tab-name.html
Befund verstehen
Die Gruppe hat einen Namen. Der Tab nicht.
Scanner-Signal
aria-tab-name meldet das leere Element [role="tab"] im Archivregister.
Technische Einordnung
- Regel
aria-tab-name- Referenz
- WCAG 4.1.2
Der Container heißt über aria-label bereits „Archivregister“. Dieser Gruppenname benennt jedoch nicht die einzelne Registerkarte. Am Tab fehlen sowohl Textinhalt als auch eine eigene programmatische Beschriftung.
Bedeutung im Nutzungskontext
Ein Screenreader kann die Rolle als Registerkarte erkennen, aber kein Thema nennen. Wer das Register auswählt, erhält damit keine verlässliche Orientierung über den zugehörigen Inhalt.
Diagnose am Tab
Rolle: tab
Textinhalt: leer
aria-label / aria-labelledby: nicht vorhanden
Axe: aria-tab-name-VerstoßRegistertitel durchgängig ausgeben
Ein benanntes Register liefert seinen einzelnen Tabs noch keine Namen. Prüfen Sie jede ausgegebene Bezeichnung.
- Marktarchiv× Befund im Beispiel
- Kartenarchiv× Befund im Beispiel
- Quellenarchiv Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenKontrollieren Sie jeden Tab samt zugehörigem Inhalt und Tastaturbedienung.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welcher Inhalt gehört zu dieser Registerkarte?
Benennen Sie den Inhalt, den die Registerkarte auswählt. Prüfen Sie zuerst die vorhandene Beschriftung.
Fundstelle ansehen
Das Archivregister im vollständigen Ausschnitt
Die Kalibrierseite zeigt eine verworfene Marktkarte aus einem ausdrücklich fiktiven Archiv. Der Beleg enthält die Überschrift, den Erläuterungstext und die vollständige Kontrollzeile mit ihren weiteren Elementen.
Das braune Feld an zweiter Position in der oberen Reihe ist die leere Registerkarte. Sein Hintergrund macht die Fläche sichtbar, erklärt aber weder ihren Inhalt noch ihren Namen. Die benachbarten Felder gehören zu anderen Kalibrierfehlern.
Beschriftung ergänzen
Den Namen direkt in den Tab schreiben
Im Beispiel erhält das vorhandene Tab-Element den sichtbaren Text „Marktkarte“. Der Text dient zugleich als zugänglicher Name. Die Benennung des umgebenden Archivregisters bleibt bestehen.
In Ihrer Komponente Pflegen Sie die Registerbezeichnung im Inhaltsmodell oder Tab-Titel des Editors. Prüfen Sie im gerenderten HTML, ob dieser Wert tatsächlich innerhalb des Elements mit role="tab" ankommt.
Vorher
<div role="tablist" aria-label="Archivregister">
<div role="tab"></div>
</div>Nachher
<div role="tablist" aria-label="Archivregister">
<div role="tab">Marktkarte</div>
</div>Markierte Zeilen wurden geändert
In die Komponente übertragen
Beschriftung und Verhalten gemeinsam prüfen
Der Codeausschnitt korrigiert die Benennung. Ein vollständiges Tab-Widget braucht zusätzlich Beziehungen, Zustände und Tastatursteuerung.
- 1
Wählen Sie unterscheidbare Namen wie „Marktkarte“ und „Werkstätten“, die den jeweiligen Inhalt treffen.
- 2
Prüfen Sie den berechneten Namen in den Browser-Entwicklungswerkzeugen; versteckter oder überschriebener Text kann vom sichtbaren Titel abweichen.
- 3
Ordnen Sie jeden Tab über aria-controls seinem Tabpanel zu und halten Sie aria-selected beim Wechsel aktuell.
- 4
Testen Sie Fokuswechsel mit Pfeiltasten sowie die Aktivierung bei manueller Auswahl mit Enter oder Leertaste.
Fehlkorrekturen vermeiden
Warum ein zusätzlicher Text nicht immer hilft
Nur die Registerleiste beschriften
aria-label="Archivregister" benennt die Gruppe. Jeder darin enthaltene Tab benötigt weiterhin einen eigenen zugänglichen Namen.
aria-describedby als Namen verwenden
Eine ergänzende Beschreibung ersetzt die Benennung nicht. Nutzen Sie Textinhalt oder eine passende Namensquelle am Tab.
Alle Tabs „Auswahl“ nennen
Ein nicht leerer Name kann die Regel bestehen, ohne eine sinnvolle Unterscheidung zu ermöglichen. Benennen Sie die konkreten Inhalte.
Ein vollständiges Widget voraussetzen
Ein Name ergänzt weder Fokussteuerung noch Auswahlzustand oder Panel-Verknüpfung. Das vorliegende Archivbeispiel bleibt außerhalb der Namensprüfung unvollständig.
Derselbe Tab besteht die Namensprüfung
Nach dem Einfügen von „Marktkarte“ meldet Axe für das unverändert vorhandene Tab-Element einen Pass bei aria-tab-name. Der neue Text ist im reparierten Ausschnitt sichtbar.
Belegt ist die Korrektur von aria-tab-name an einem Element. Andere Fehler der Kalibrierseite und die vollständige Bedienbarkeit des Registers sind damit nicht behoben.
Verifizierte Änderung
Rolle: tab
Textinhalt: Marktkarte
Axe-Check has-visible-text: bestanden
aria-tab-name: Pass an derselben FundstellePrüfumfang abgrenzen
Ein vorhandener Name ist erst der Anfang
Die Regel prüft, ob Tabs einen zugänglichen Namen haben. Ob dieser Name und das Register verständlich funktionieren, erfordert weitere Prüfung.
Automatisch prüfbar
- Ein Tab-Element ohne zugänglichen Namen erkennen
- Fehlende oder leere Namensquellen am konkreten Element aufzeigen
- Die Namensprüfung nach einer Änderung am selben Tab wiederholen
Im Kontext zu entscheiden
- Bewerten, ob jeder Name den zugehörigen Inhalt verständlich und unterscheidbar bezeichnet
- Das Zusammenspiel von Fokus, Auswahl und sichtbarem Panel bedienen
- Dynamisch hinzugefügte Register sowie Übersetzungen mit Screenreader prüfen