Praxisleitfaden ARIA und Tastaturfokus
Bedienbare Elemente zugänglich halten
Ein Link bleibt sichtbar und mit der Tastatur erreichbar, wird aber durch aria-hidden am umgebenden Element aus der Screenreader-Ausgabe genommen. Erkennen Sie den Befund und wählen Sie die passende Korrektur.
aria-hidden-focusWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-hidden-focus.html
Befund einordnen
Sichtbar und erreichbar, aber vor Screenreadern verborgen
Erkannter Befund
Das fällt auf
Die Regel aria-hidden-focus meldet .journal-panel > div[aria-hidden="true"]: Der Bereich enthält einen fokussierbaren Link.So ist es einzuordnen
Im Feldjournal steht „Verdeckte Ringkarte öffnen“ als normaler Link. Sein umgebendes div trägt aria-hidden="true". Dieses Attribut verbirgt den Bereich in der Zugänglichkeitsschnittstelle; es entfernt den Link weder vom Bildschirm noch aus der Tab-Reihenfolge.
Das bedeutet es für die Nutzung
Wer mit Tastatur und Screenreader navigiert, kann einen Fokuspunkt erreichen, dessen Inhalt in der regulären Screenreader-Ausgabe fehlt. Sichtbarkeit, Bedienbarkeit und zugängliche Struktur widersprechen sich.
- Regel
aria-hidden-focus- Referenz
- WCAG 4.1.2
Technischer Zustand vor der Korrektur
Link: „Verdeckte Ringkarte öffnen“
href: #altbestand-title
Tab-Reihenfolge: enthalten (tabIndex 0)
Vorfahr: aria-hidden="true"
Axe: aria-hidden-focus, Verstoß am umgebenden divPanelzustände auf weiteren Seiten prüfen
Wiederverwendete Panels können bedienbare Links erneut verbergen. Prüfen Sie die Zustandswechsel auf den tatsächlich betroffenen Seiten.
- Journal mit Link× Befund im Beispiel
- Archiv mit Link× Befund im Beispiel
- Panel ohne Bedienung Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie Öffnen, Tab-Navigation und Schließen jeder betroffenen Panelvariante nach der Korrektur.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Soll dieser Bereich gerade bedienbar sein?
Richten Sie die Korrektur nach der Funktion und dem aktuellen Zustand des Bereichs.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Der Link wird angeboten | Die Handlung ist sichtbar und soll für alle erreichbar bleiben, wie im gezeigten Feldjournal. | Entfernen Sie aria-hidden="true" am umgebenden Element und prüfen Sie auch dessen Vorfahren. |
| Der Bereich ist geschlossen | Ein Menü oder Panel soll bis zum Öffnen weder angezeigt noch bedient werden. | Verbergen Sie den Bereich vollständig, etwa mit hidden, und synchronisieren Sie Sichtbarkeit und Fokus beim Öffnen und Schließen. |
| Nur eine Grafik ist dekorativ | Ein Symbol wiederholt die vorhandene Beschriftung eines Links oder Buttons. | Verbergen Sie nur das nicht fokussierbare Symbol. Das bedienbare Element und seine Beschriftung bleiben zugänglich. |
Fundstelle ansehen
Der Link im vollständigen Journalabschnitt
Der Ausschnitt zeigt „Altbestand der Ringablesung“, die Einleitung und die Einträge. Die Markierung hebt den betroffenen Link hervor; der Scanner meldet seinen verborgenen Elternknoten.
Der Link ist lesbar und besitzt ein Sprungziel zur Abschnittsüberschrift. Seine umgebende ARIA-Ausblendung passt nicht zu dieser angebotenen Handlung. Die Korrektur verändert die zugängliche Struktur, nicht das sichtbare Layout.
Im HTML korrigieren
Die Ausblendung am Vorfahren entfernen
Der Link soll bedienbar bleiben. Deshalb entfällt aria-hidden am div. Linktext und Sprungziel bleiben erhalten. Der Vergleich zeigt den tatsächlich reparierten Ausschnitt des vorhandenen HTML.
Fundstelle zuordnen
Ordnen Sie den Vorher-Code dem betroffenen Element Ihrer Website zu.
Änderung umsetzen
Im Template oder CMS Suchen Sie den Container der betroffenen Komponente. Entfernen Sie dort die ARIA-Ausblendung und prüfen Sie, ob ein Zustandswechsel oder eine übergeordnete Komponente sie erneut setzt.
KorrekturvergleichHTML Vorher
<div aria-hidden="true"> <a href="#altbestand-title">Verdeckte Ringkarte öffnen</a> </div>Nachher
<div> <a href="#altbestand-title">Verdeckte Ringkarte öffnen</a> </div>Markierte Zeilen wurden geändert
Änderung nachprüfen
Prüfen Sie die geänderte Seite erneut mit dem Scanner und kontrollieren Sie das Element im Nutzungskontext.
In Komponenten umsetzen
Fokus und Sichtbarkeit gemeinsam steuern
Besonders Menüs, Dialoge und eingeblendete Panels brauchen eindeutige Zustände.
- 1
Prüfen Sie vom Link bis zum Dokument alle Vorfahren auf aria-hidden="true".
- 2
Entfernen Sie die Ausblendung, bevor Sie den Fokus in einen geöffneten Bereich setzen.
- 3
Verlagern Sie den Fokus beim Schließen auf ein sinnvolles sichtbares Ziel, bevor Sie den bisherigen Bereich verbergen.
- 4
Prüfen Sie bei wiederverwendeten Komponenten jeden Zustand: initial, geöffnet und erneut geschlossen.
Fehlkorrekturen vermeiden
Diese Änderungen lösen den Widerspruch nicht
aria-hidden="false" nur am Link
Ein Kind kann die Ausblendung durch einen Vorfahren nicht aufheben. Korrigieren Sie das Element, das den Bereich verbirgt.
Nur tabindex="-1" setzen
Das entfernt den Link aus der Tab-Reihenfolge, lässt ihn aber programmatisch fokussierbar. Für eine angebotene Handlung fehlt weiterhin ein gleichwertiger zugänglicher Weg.
Den Link außerhalb des Bildschirms platzieren
Eine reine Positionsänderung verhindert Tastaturfokus nicht. Ein geschlossener Bereich muss auch tatsächlich aus der Bedienung genommen werden.
Ein aria-label ergänzen
Eine zusätzliche Beschriftung hebt aria-hidden am Vorfahren nicht auf. Der Linktext ist hier bereits vorhanden.
Die Ausblendung ist entfernt, der Link bleibt erhalten
Nach der Korrektur findet Axe den bisherigen aria-hidden-Knoten nicht mehr. Der erhaltene Link wurde erneut auf aria-hidden-focus geprüft; es gibt dort weder einen Verstoß noch ein unvollständiges Ergebnis.
Belegt ist die Korrektur dieses aria-hidden-focus-Befunds. Andere Einträge der Kalibrierseite und vollständige Nutzerwege sind damit nicht freigegeben.
Technischer Zustand nach der Korrektur
Link und href: unverändert
Tab-Reihenfolge: enthalten (tabIndex 0)
Verborgener Vorfahr: nicht mehr vorhanden
Axe: bisheriger Zielselektor entfernt; erhaltener Link ohne Regelverstoß
Bildvergleich: sichtbare Pixel unverändertPrüfgrenzen kennen
Automatischer Befund und manuelle Bedienprüfung
Die Regel erkennt einen technischen Widerspruch im geprüften Seitenzustand. Die beabsichtigte Bedienung müssen Sie im Kontext beurteilen.
Automatisch prüfbar
- Mit aria-hidden verborgene Bereiche auf enthaltene fokussierbare Elemente prüfen
- Den betroffenen Vorfahren und die sichtbare Fundstelle zuordnen
- Die Regel nach einer Korrektur erneut im geladenen Zustand ausführen
Im Kontext zu entscheiden
- Entscheiden, ob die Funktion sichtbar und bedienbar sein soll
- Fokusübergänge beim Öffnen und Schließen mit der Tastatur prüfen
- Name, Rolle und Bedienbarkeit mit einem Screenreader im vollständigen Nutzerweg testen