aria-hidden="true" richtig setzen
Verbergen, ohne Bedienbares zu verstecken
Symbol, Menübereich, Seitenkörper: drei Stellen, an denen aria-hidden zu weit greift.
Ein Attribut, drei Reichweiten
Wie weit aria-hidden="true" reicht
Es vererbt sich auf alles darunter.
- 1 Symbol
- Dekoration, richtig verborgen
- 9 Links
- im verborgenen Menü, weiter fokussierbar
- 1 Seite
- am body verborgen, alles verschwindet
Verborgen heißt nicht unbedienbar. Fokussierbares darunter bleibt erreichbar und bleibt stumm.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Das Zierbild trägt einen erfundenen Wert Regel aria-valid-attr-value
Nur true und false sind gültig. Ein anderer Wert lässt das Dekorationssymbol weiter vorlesen.
Zum Mitnehmen
Die verborgenen Stellen, korrigiert
Verbergen und Fokus gehören zusammen, der body bleibt frei.
Korrektur in 3 Schritten ansehen
Verborgenes auch aus der Tabfolge nehmen
Ein zugeklapptes Menü wird mit hidden geschlossen. Dann verschwindet es aus Ausgabe und Tabfolge zugleich.
KorrekturvergleichSchritt 1 · HTML Vorher
<nav aria-hidden="true"> <a href="/preise">Preise</a> <a href="/kontakt">Kontakt</a> </nav>Nachher
<nav hidden> <a href="/preise">Preise</a> <a href="/kontakt">Kontakt</a> </nav>Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie wiederholt die Tabulatortaste. Der Fokus springt nicht mehr in das zugeklappte Menü.
Das Attribut vom body entfernen
Am Seitenkörper verbirgt aria-hidden die vollständige Seite. Für Vorleseprogramme bleibt nichts übrig, obwohl alles sichtbar ist.
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 Öffnen Sie den Quelltext und suchen Sie das body-Element. Dort steht kein aria-hidden.
Nur true verbirgt Dekoration
Ein Zierschmuck wird mit aria-hidden="true" ausgelassen. Andere Werte werden ignoriert, das Symbol wird weiter vorgelesen.
KorrekturvergleichSchritt 3 · HTML Vorher
<svg class="zierlinie" aria-hidden="yes"><use href="#welle"></use></svg>Nachher
<svg class="zierlinie" aria-hidden="true"><use href="#welle"></use></svg>Markierte Zeilen wurden geändert
So prüfen Sie es Lassen Sie ein Vorleseprogramm den Absatz lesen. Die Zierlinie kommt nicht mehr vor.