Praxisleitfaden ARIA-Attribute und Rollen
Wenn ein Bild als ausgewählt markiert ist
aria-checked passt nicht zur Rolle img. Das Beispiel zeigt, wie Sie einen widersprüchlichen Zustand im HTML erkennen, gezielt entfernen und erneut prüfen.
aria-allowed-attrWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-allowed-attr.html
Befund einordnen
Der Zustand passt nicht zum Element
Scanner-Signal
An .wege-fundstücke [role="img"] meldet aria-allowed-attr das nicht unterstützte Attribut aria-checked="true".
Technische Einordnung
- Regel
aria-allowed-attr- Referenz
- WCAG 4.1.2
Die „Bachskizze“ ist als Bild ausgezeichnet. Gleichzeitig behauptet ihr HTML einen Auswahlzustand. Die Rolle img unterstützt aria-checked nicht; der Attributwert true ist hier nicht das eigentliche Problem.
Bedeutung im Nutzungskontext
Wer Screenreader verwendet, braucht eine eindeutige Bedeutung des Elements. Ein Auswahlzustand am statischen Bild ist dafür keine verlässliche Information und beschreibt keine bedienbare Funktion.
Diagnose vor der Korrektur
Rolle: img
Name: Skizze am Bach
Attribut: aria-checked="true"
Befund: aria-checked wird von img nicht unterstützt.Bildbausteine an mehreren Stellen prüfen
Eine gemeinsame Attributbindung kann denselben Rollenkonflikt auf mehreren Seiten erzeugen. Prüfen Sie auch abweichende Varianten.
- Galerieseite× Befund im Beispiel
- Archivseite× Befund im Beispiel
- Textseite Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie nach der Templatekorrektur jede betroffene Bildvariante auf erneut ausgegebene Zustandsattribute.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Ist es ein Bild oder eine Auswahl?
Klären Sie die tatsächliche Aufgabe, bevor Sie Attribute entfernen oder Rollen ändern. Die Bachskizze zeigt statischen Inhalt und besitzt keine Auswahlfunktion.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Statische Darstellung | Das Element vermittelt Inhalt, lässt sich aber nicht auswählen. | Entfernen Sie den Auswahlzustand. Die Bildrolle und der zugängliche Name bleiben erhalten. |
| Echte Auswahl | Nutzende sollen eine Option an- und abwählen können. | Verwenden Sie möglichst ein beschriftetes natives Kontrollkästchen. Prüfen Sie dessen Zustand und Tastaturbedienung. |
| Andere Interaktion | Das Element löst eine Aktion aus oder schaltet eine Funktion um. | Leiten Sie Element, Rolle und Zustand aus dieser Funktion ab. Ein Umschaltbutton verwendet beispielsweise aria-pressed. |
Fundstelle ansehen
Die Bachskizze in der übernommenen Ortsakte
Der vollständige Abschnitt zeigt Überschrift, Begleittext und die übernommenen Einträge. Markiert ist ausschließlich die Bachskizze; benachbarte Elemente gehören nicht zu dieser Korrektur.
Der sichtbare Text „Bachskizze“ verrät den Fehler nicht. Im HTML trägt dieses statische Bild zusätzlich aria-checked="true". Die Diagnose macht den Widerspruch zwischen Bildrolle und Auswahlzustand ausdrücklich sichtbar.
Im Code korrigieren
Das unzulässige Attribut entfernen
Entfernen Sie aria-checked am vorhandenen Element. Seine Rolle img, der Name „Skizze am Bach“ und der sichtbare Inhalt bleiben erhalten. Diese Korrektur ändert die Semantik, nicht die Darstellung.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Entfällt
aria-checked="true"
In der Komponente Suchen Sie die Stelle, die aria-checked ausgibt, auch in gemeinsam verwendeten Komponenten oder importierten CMS-Blöcken. Entfernen Sie dort die Bindung für statische Bilder und kontrollieren Sie das gerenderte HTML.
Vollständigen Code vergleichen
Vorher
<div role="img" aria-label="Skizze am Bach"
aria-checked="true">
Bachskizze
</div>Nachher
<div role="img" aria-label="Skizze am Bach">
Bachskizze
</div>Markierte Zeilen wurden geändert
Umsetzung absichern
Attribute aus der Funktion ableiten
ARIA ergänzt die Bedeutung eines Elements. Prüfen Sie deshalb Rolle und unterstützte Zustände zusammen, bevor Sie Attribute aus einer anderen Komponente übernehmen.
- 1
Ermitteln Sie die tatsächlich wirksame Rolle im Accessibility-Baum, einschließlich der nativen HTML-Semantik.
- 2
Prüfen Sie in der ARIA-Rollendefinition, welche Zustände und Eigenschaften diese Rolle unterstützt.
- 3
Trennen Sie gemeinsame Attribute wie Beschriftungen von Zuständen, die nur bestimmte Bedienelemente brauchen.
- 4
Testen Sie bei interaktiven Komponenten auch nach einer Zustandsänderung, ob Darstellung, DOM und Bedienverhalten zusammenpassen.
Fehlkorrekturen vermeiden
Was den Widerspruch nicht behebt
Nur auf false setzen
aria-checked="false" bleibt am Bild unzulässig. Der Zustand muss an dieser Stelle vollständig entfallen.
Die Rolle beliebig wechseln
role="checkbox" würde eine bedienbare Auswahl versprechen, die die Bachskizze nicht anbietet. Eine Rolle ersetzt weder Verhalten noch Tastaturbedienung.
Alle ARIA-Attribute löschen
aria-label liefert hier den Namen des Bildes. Entfernen Sie nur das unzulässige Attribut, damit diese Information erhalten bleibt.
Nur den Quelltext prüfen
Templates oder JavaScript können aria-checked erneut setzen. Maßgeblich ist das gerenderte Element im betroffenen Zustand.
Dieselbe Fundstelle besteht den Re-Test
Nach dem Entfernen von aria-checked besteht die Bachskizze die Regel aria-allowed-attr am selben DOM-Element. Das sichtbare Erscheinungsbild bleibt gleich; die technische Diagnose zeigt die Änderung.
So prüfen Sie die Korrektur nach
- Kontrollieren Sie, dass aria-checked am Bild vollständig fehlt und aria-label weiterhin „Skizze am Bach“ lautet.
- Führen Sie aria-allowed-attr erneut an der veröffentlichten Seite aus.
- Prüfen Sie fachlich, ob die Bildrolle den Inhalt sinnvoll beschreibt und der Name verständlich bleibt.
Verifiziert ist die Kombination aus Rolle und Attributen an dieser Bachskizze. Weitere Befunde im Ausschnitt und die vollständige Erfüllung von WCAG 4.1.2 sind damit nicht geprüft.
Diagnose nach der Korrektur
Rolle: img
Name: Skizze am Bach
aria-checked: nicht vorhanden
Axe: aria-allowed-attr am selben Element bestanden.Prüfumfang verstehen
Gültige Attribute sind ein Teil der Prüfung
Der automatische Test gleicht die Rolle mit den erlaubten ARIA-Attributen ab. Ob das Element die richtige Funktion anbietet, erfordert zusätzliche Beurteilung.
Automatisch prüfbar
- Nicht unterstützte ARIA-Attribute an einer erkannten Rolle melden
- Den betroffenen DOM-Knoten zuordnen
- Die korrigierte Kombination im erneut geprüften Zustand verifizieren
Im Kontext zu entscheiden
- Die Rolle mit der tatsächlichen Funktion vergleichen
- Bedienbarkeit und Zustandswechsel interaktiver Elemente prüfen
- Die verständliche Ausgabe mit Screenreader und den Nutzungskontext beurteilen