Praxisleitfaden ARIA am Seitenkörper
Sichtbarer Inhalt darf für Screenreader nicht verschwinden
Ein einziges Attribut am body betrifft die gesamte Seite. Erkennen Sie den Befund aria-hidden-body, entfernen Sie die Ursache und prüfen Sie den veröffentlichten Zustand erneut.
aria-hidden-bodyWCAG 1.3.1, 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-hidden-body.html
Befund einordnen
Der Fehler sitzt oberhalb des sichtbaren Inhalts
Erkannter Befund
Das fällt auf
Axe meldet aria-hidden-body am Selektor body: aria-hidden="true" ist gesetzt.So ist es einzuordnen
Auf der Kalibrierseite „Sieben Feuer“ steht aria-hidden="true" direkt am body. Damit werden dessen Inhalte für assistive Technik als verborgen gekennzeichnet. Auch der abgebildete Begriffsleser liegt innerhalb dieses Elements.
Das bedeutet es für die Nutzung
Die Überschrift, die fünf Begriffsschaltflächen und ihre Erläuterung bleiben sichtbar. Menschen mit Screenreader können dadurch jedoch den Zugang zu Inhalt und Bedienung verlieren. Der Fehler betrifft nicht nur den markierten Ausschnitt.
- Regel
aria-hidden-body- Referenz
- WCAG 1.3.1, 4.1.2
Diagnose vor der Korrektur
Element: body
HTML: <body aria-hidden="true">
Axe: aria-hidden-body – Verstoß, kritisch
Betroffen: der gesamte Seiteninhalt innerhalb von bodyDas gemeinsame Seitentemplate einbeziehen
Setzt eine Vorlage aria-hidden am body, kann die Ursache mehrere Seiten betreffen. Auch Dialogzustände benötigen einen erneuten Test.
- Seite im Grundzustand× Befund im Beispiel
- Seite mit Dialog× Befund im Beispiel
- Separate Vorlage Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenLaden Sie betroffene Seiten neu und prüfen Sie den body auch nach dem Öffnen und Schließen eines Dialogs.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Warum wurde der Seitenkörper verborgen?
Entfernen Sie das Attribut am body und prüfen Sie anschließend den auslösenden Code. Die richtige Stelle für eine Begrenzung hängt vom vorgesehenen Zustand ab.
Kontext ansehen
Ein vollständiger Begriffsleser ist mit betroffen
Der Ausschnitt zeigt „Welcher Name passt wann?“, alle fünf Schaltflächen und den Text zum ausgewählten Begriff „Sioux“. Die Markierung kennzeichnet einen betroffenen Bereich; das von Axe geprüfte Element ist der übergeordnete body.
Visuell sind Inhalt und Auswahl vollständig vorhanden. Das body-Attribut verbirgt diesen Bereich jedoch zusammen mit dem übrigen Seiteninhalt vor assistiver Technik. Ein Screenshot allein kann diese Barriere nicht nachweisen; entscheidend ist die ergänzende HTML-Diagnose.
Attribut entfernen
Den body wieder für assistive Technik freigeben
Im Beispiel genügt es, aria-hidden vom vorhandenen body zu entfernen. Die Schaltflächen, die Texte und das Layout bleiben bestehen. Die Korrektur verändert die semantische Verfügbarkeit, nicht das sichtbare Bild.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Entfällt
aria-hidden="true"
Template und Skript prüfen Suchen Sie sowohl im Seitentemplate als auch in Dialog-, Menü- und Ladezuständen nach Schreibzugriffen auf body. Eine Änderung im Browser muss anschließend an der erzeugenden Stelle umgesetzt werden.
Vollständigen Code vergleichen
Vorher
<body aria-hidden="true">
<!-- Seiteninhalt einschließlich Begriffsleser -->
</body>Nachher
<body>
<!-- Seiteninhalt einschließlich Begriffsleser -->
</body>Markierte Zeilen wurden geändert
Dauerhaft umsetzen
Die Ursache auch bei Zustandswechseln beseitigen
Eine Korrektur am ausgelieferten HTML reicht nicht, wenn ein Skript das Attribut später erneut setzt. Verfolgen Sie den Zustand über den gesamten Nutzerweg.
- 1
Prüfen Sie den body nach dem ersten Laden und nach Abschluss der Anwendungsinitialisierung.
- 2
Öffnen und schließen Sie vorhandene Dialoge und Menüs; kontrollieren Sie das Attribut nach beiden Aktionen.
- 3
Prüfen Sie auch Abbruch, Escape und Seitenwechsel, wenn dort Aufräumlogik ausgeführt wird.
- 4
Lesen Sie den Begriffsleser mit einem Screenreader und wechseln Sie die Auswahl per Tastatur: Name, Zustand und neue Erklärung müssen nachvollziehbar sein.
Fehlkorrekturen vermeiden
Was die globale Ausblendung nicht repariert
aria-hidden="false" an einem Kind setzen
Ein Nachfahre kann die Ausblendung seines Vorfahren nicht aufheben. Entfernen Sie die Ursache am body.
Nur Farben oder Sichtbarkeit ändern
Der Begriffsleser ist bereits sichtbar. Eine CSS-Änderung entfernt das beanstandete ARIA-Attribut nicht.
Das Attribut auf den gesamten App-Container verschieben
Damit kann der body-Test grün werden, während wichtige Inhalte weiterhin verborgen bleiben. Prüfen Sie den beabsichtigten Umfang der Ausblendung.
Den Body aus dem Scan ausschließen
Ein eingeschränkter Prüfumfang beseitigt keine Barriere. Der Re-Test muss das Dokument mit seinem body erfassen.
Gleiches Bild, korrigiertes body-Element
Nach dem Entfernen des Attributs meldet Axe für aria-hidden-body am selben body-Element einen bestandenen Test. Die Rohaufnahmen vor und nach der Änderung sind pixelgleich; der sichtbare Begriffsleser wurde nicht verändert.
Der bestandene Test belegt ausschließlich die Korrektur von aria-hidden-body in diesem Zustand. Weitere Fehler der Kalibrierseite und die tatsächliche Screenreader-Bedienung sind damit nicht geprüft.
Diagnose nach der Korrektur
Element: derselbe body
HTML: <body>
Axe: aria-hidden-body – bestanden
Sichtbarer Ausschnitt: unverändert
Screenreader-Bedienung: zusätzlich manuell prüfenPrüfgrenzen kennen
Was der body-Test belegt
Die Regel prüft einen konkreten Dokumentzustand. Sie beurteilt weder alle verborgenen Teilbereiche noch die Qualität der gesamten Bedienung.
Automatisch prüfbar
- aria-hidden="true" am body erkennen und als Fundstelle ausweisen
- Nach der Korrektur denselben body erneut auf diese Regel prüfen
- Den erfassten Zustand mit einem Kontextbild dokumentieren
Im Kontext zu entscheiden
- Erreichbarkeit und verständliche Ausgabe der Inhalte mit Screenreader prüfen
- Dynamische Zustände wie Dialoge, Ladephasen und Fehlerfälle durchlaufen
- Bewerten, welche einzelnen Inhalte tatsächlich dekorativ oder vorübergehend verborgen sein dürfen