aria-hidden im HTML prüfen
Verborgenes finden, das noch bedienbar ist
Menü, Seitenkörper, Scrollbereich: drei Stellen, die eine Prüfung meldet.
Zwei Bäume, ein Fehler
Sichtbar für Tab. Unsichtbar im Zugänglichkeitsbaum.
aria-hidden entfernt keine Bedienung. Genau dort entsteht der Widerspruch.
Röntgenbild eines verborgenen Fokusziels
problematischer Knoten
Im DOM vorhanden
Der Button bleibt ein echter Button. aria-hidden ändert weder CSS noch die Tab-Reihenfolge.
Tastaturpfad
Button erreichbar- 1Produkte
- 2Filter löschenFokus ohne zugänglichen Knoten
- 3Warenkorb
Zugänglichkeitsbaum
Zweig entferntaria-hidden="true"-Zweig Nachfahren in der sequenziellen Fokusnavigation hat. Das richtige Versteck für die jeweilige Absicht
Für ein dekoratives Icon oder doppelte Schrift. Im Zweig darf kein Fokusziel liegen.
Nimmt den Zweig aus Tabfolge und Zugänglichkeitsbaum. Kennzeichnen Sie den Zustand zusätzlich sichtbar.
Geeignet, wenn Inhalt weder sichtbar noch bedienbar sein soll.
Lokale Verdachtsliste für die Konsole
Der Helfer durchsucht den aktuell gerenderten DOM-Zustand. Er nennt erreichbare Elemente in jedem aria-hidden="true"-Zweig, einschließlich der Wurzel selbst.
1 Verdachtsfall
Grenze: Geschlossene Shadow Roots, Inhalte in iFrames und spätere UI-Zustände brauchen eigene Prüfungen. Die Liste ersetzt keinen Tastatur- oder Screenreader-Test.
const wurzeln = [
...document.querySelectorAll('[aria-hidden="true"]')
];
const treffer = [...new Set(wurzeln.flatMap((wurzel) =>
[wurzel, ...wurzel.querySelectorAll('*')].filter((element) =>
element.tabIndex >= 0 &&
element.getClientRects().length > 0 &&
!element.closest('[inert]')
)
))];
console.table(treffer.map((element) => ({
Element: element.outerHTML.slice(0, 80),
verborgenDurch: element.closest('[aria-hidden="true"]').tagName
})));
console.log('Verdachtsfälle:', treffer.length);
console.log('aria-hidden am body:', document.body.ariaHidden);aria-hidden gehört nicht auf body
ARIA verbietet das Attribut auf dem Element, das den Inhalt des Hauptdokuments enthält. Aktuelle User Agents sollen den versteckten Zustand dort ignorieren. Entfernen Sie ihn, statt sich auf diese Fehlerkorrektur zu verlassen.
So prüfen Sie es
- Führen Sie den Helfer in jedem offenen und geschlossenen Zustand der Oberfläche aus.
- Prüfen Sie jeden Treffer mit Tab und Umschalt + Tab. Notieren Sie das sichtbare Ziel.
- Kontrollieren Sie denselben Bereich im Zugänglichkeitsbaum der Browser-Werkzeuge.
- Nach der Korrektur liefert die Konsole keine Verdachtsfälle; der manuelle Fokusweg bleibt vollständig und logisch.
Quellen für Prüfung und Entscheidung
Aus dem Prüfbericht
Drei Treffer im Ausschnitt
Kritisch Der Scrollbereich fehlt in der Tabfolge Regel scrollable-region-focusable
Ein Bereich mit overflow scrollt nur mit der Maus. tabindex="0" und ein Name machen ihn auch mit der Tastatur lesbar.
Zum Mitnehmen
Die geprüften Stellen, korrigiert
Verbergen, freigeben, erreichbar machen: drei kleine Änderungen im HTML.
Korrektur in 3 Schritten ansehen
Verbergen und Fokus zusammen abschalten
Ein Bereich, der nicht angesagt wird, darf auch keinen Fokus bekommen. inert nimmt beides in einem Schritt.
KorrekturvergleichSchritt 1 · HTML Vorher
<div class="panel" aria-hidden="true"> <a href="/archiv">Archiv öffnen</a> </div>Nachher
<div class="panel" inert> <a href="/archiv">Archiv öffnen</a> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie durch die Seite. Der Link im Panel kommt nicht mehr vor.
Den Seitenkörper wieder freigeben
aria-hidden darf nicht auf body stehen. Browser sollen den Zustand dort ignorieren, doch das Markup bleibt ungültig.
KorrekturvergleichSchritt 2 · HTML Vorher
<body aria-hidden="true" class="app"> <main id="inhalt">…</main> </body>Nachher
<body class="app"> <main id="inhalt">…</main> </body>Markierte Zeilen wurden geändert
So prüfen Sie es Starten Sie die Prüfung erneut. Der Befund aria-hidden-body ist verschwunden.
Den Scrollbereich erreichbar machen
tabindex="0" nimmt den Bereich in die Tabfolge auf. Rolle und Name sagen, worum es geht.
KorrekturvergleichSchritt 3 · HTML Vorher
<div class="protokoll"> <p>Schritt 1: Anlage gestartet</p> </div>Nachher
<div class="protokoll" tabindex="0" role="region" aria-label="Schrittprotokoll"> <p>Schritt 1: Anlage gestartet</p> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie zum Protokoll. Der Rahmen bekommt Fokus, die Pfeiltasten scrollen den Text.