Praxisleitfaden ARIA und Semantik
Unzulässige ARIA-Attribute korrigieren
Prüfen Sie, ob der zugängliche Name zur Rolle des Elements passt.
aria-prohibited-attrWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-prohibited-attr.html
Befund einordnen
Ein Name an der falschen Stelle
Scanner-Signal
aria-prohibited-attr meldet aria-label an einem div ohne passende Rolle.
Technische Einordnung
- Regel
aria-prohibited-attr- Referenz
- WCAG 4.1.2
Die Knotengrafik besitzt bereits die Beschriftung „Grafische Knotengruppe“. Sie steht jedoch an einem generischen div-Container. Für diese Semantik ist aria-label unzulässig; ein vorhandener Text allein genügt hier nicht.
Bedeutung im Nutzungskontext
Die sichtbaren Knotenzeichen sind zusätzlich mit aria-hidden ausgeblendet. Ohne eine zulässige Benennung der Grafik ist ihre Information für assistive Technik nicht verlässlich verfügbar.
Diagnose am ausgewählten Element
Element: div ohne role
Attribut: aria-label="Grafische Knotengruppe"
Befund: aria-label ist an diesem generischen Container unzulässig.
Enthaltene Zeichen: ●—●—●, mit aria-hidden="true"Welche Aufgabe hat der Container?
Entscheiden Sie zuerst, welche Information die Knotengruppe vermitteln soll.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Eine zusammengehörige Grafik | Die Zeichen bilden wie hier ein einzelnes visuelles Motiv. | Kennzeichnen Sie den Container als Grafik mit role="img" und geben Sie ihr einen passenden Namen. |
| Eine Textinformation | Die Beschriftung soll eine Notiz oder Erklärung vermitteln. | Schreiben Sie die Information als lesbaren Seiteninhalt und entfernen Sie das unzulässige Namensattribut. |
| Reine Verzierung | Das Motiv vermittelt weder Information noch eine Funktion. | Entfernen Sie den unnötigen Namen. Stellen Sie vorher sicher, dass dadurch keine relevante Aussage verloren geht. |
Fundstelle ansehen
Die Knotengrafik in ihrer Zeichenleiste
Der Beleg zeigt den vollständigen Abschnitt „Unsortierte Zeichenleiste“ mit Überschrift, Einordnung und benachbarten Feldern. Die markierte Grafik liegt unten rechts.
Drei verbundene Knoten sind sichtbar. Ihr Name steht nur im HTML und ist am bisherigen Container unzulässig. Diese Ursache lässt sich aus dem Bild allein nicht ablesen; die Diagnose benennt deshalb Rolle und Attribut ausdrücklich.
Semantik korrigieren
Die Grafik als Grafik auszeichnen
Im Beispiel erhält das bestehende div die Rolle img. Der präzisierte Name beschreibt die drei verbundenen Knoten. Die einzelnen Zeichen bleiben innerhalb der benannten Grafik ausgeblendet; das sichtbare Motiv verändert sich nicht.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Entfällt
aria-label="Grafische Knotengruppe"- Kommt hinzu
role="img" aria-label="Drei durch eine Schnur verbundene Knoten"
In Ihrer Komponente Ändern Sie das Template, das den Grafikcontainer erzeugt. Prüfen Sie im gerenderten HTML, ob role und aria-label nach dem Laden und nach Aktualisierungen gemeinsam erhalten bleiben.
Vollständigen Code vergleichen
Vorher
<div class="cord-import-token"
aria-label="Grafische Knotengruppe">
<span aria-hidden="true">●—●—●</span>
</div>Nachher
<div class="cord-import-token" role="img"
aria-label="Drei durch eine Schnur verbundene Knoten">
<span aria-hidden="true">●—●—●</span>
</div>Markierte Zeilen wurden geändert
Änderung umsetzen
Rolle und Inhalt gemeinsam prüfen
Übernehmen Sie die Korrektur dort, wo die tatsächliche Grafik entsteht.
- 1
Ordnen Sie den Scanner-Selektor dem richtigen Baustein zu: hier .cord-import-token[aria-label].
- 2
Prüfen Sie vor role="img", ob der Container wirklich nur ein zusammengehöriges Bild repräsentiert.
- 3
Halten Sie Links, Eingaben und Schaltflächen außerhalb des Grafikcontainers.
- 4
Beschreiben Sie den fachlich relevanten Inhalt. Die historische Bedeutung der Knoten ist im Beispiel ungeklärt und wird deshalb nicht erfunden.
Fehlversuche vermeiden
Den Namen nicht nur formal retten
aria-labelledby statt aria-label
Auch aria-labelledby ist bei der generischen Rolle als Namensquelle unzulässig. Ein anderes Namensattribut löst den Rollenkonflikt nicht.
Jeden Container zur Grafik erklären
role="img" passt zu dieser Knotengrafik. Für einen Absatz, einen Formularbereich oder eine interaktive Gruppe wäre dieselbe Änderung fachlich falsch.
Das Attribut ersatzlos löschen
Die Knotenzeichen bleiben dann weiterhin mit aria-hidden verborgen. Wenn das Motiv Information vermittelt, braucht es eine andere zugängliche Darstellung.
Gleiche Grafik, zulässige Benennung
Axe meldet für dasselbe Element nach der Änderung einen Pass für aria-prohibited-attr. Der Ausschnitt ist pixelgleich; geändert wurden die Rolle und der unsichtbare Name im HTML.
Im Beispiel dokumentiert
Gelöst
Der Container hat jetzt role="img" und den Namen „Drei durch eine Schnur verbundene Knoten“.
Was Sie zusätzlich beurteilen müssen
Verifiziert ist diese Regel an der markierten Knotengrafik. Die anderen Felder der Kalibrierseite sowie die fachliche Angemessenheit der gesamten Zeichenleiste sind damit nicht geprüft.
Zulässige Attribute sind ein Teil der PrüfungPrüfauftrag für Ihre Umsetzung
- Am gerenderten Element role="img" und den vollständigen neuen Namen kontrollieren.
- aria-prohibited-attr erneut ausführen und die ursprüngliche Fundstelle vergleichen.
- Im Accessibility-Baum und mit Screenreader prüfen, ob die Knotengruppe als benannte Grafik verständlich ausgegeben wird.
Verifizierte Änderung
Element: div mit role="img"
Name: Drei durch eine Schnur verbundene Knoten
aria-prohibited-attr: Pass am selben Element
Zusatzprüfung: Grafikzeichen und aria-hidden unverändert
Bildvergleich: keine sichtbare ÄnderungPrüfgrenzen kennen
Zulässige Attribute sind ein Teil der Prüfung
Der automatische Befund erkennt den Rollenkonflikt. Die passende Bedeutung benötigt Kontext.
Automatisch prüfbar
- Unzulässige ARIA-Attribute im untersuchten DOM erkennen.
- Das betroffene Element und sein vorhandenes Markup zuordnen.
- Die korrigierte Kombination aus Rolle und Attribut erneut prüfen.
Im Kontext zu entscheiden
- Entscheiden, ob die Knotengruppe eine Grafik, Textinformation oder Verzierung ist.
- Den Namen mit der tatsächlichen Aussage im fachlichen Kontext vergleichen.
- Die Ausgabe mit assistiver Technik und relevante dynamische Zustände prüfen.