Praxisleitfaden Bedingte ARIA-Attribute
ARIA im richtigen Kontext einsetzen
Erkennen Sie, warum eine Positionsangabe nicht zu ihrer Tabellenzeile passt.
aria-conditional-attrWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-conditional-attr.html
Befund einordnen
Ein gültiges Attribut im falschen Zusammenhang
aria-conditional-attr prüft Voraussetzungen für bestimmte ARIA-Attribute. Hier ist aria-posinset korrekt geschrieben, darf an einer Zeile aber nur im Kontext einer Baumtabelle mit role="treegrid" stehen. Die umgebende Tabelle erfüllt diese Bedingung nicht.
Warum das relevant ist
Die zusätzliche Positionsangabe kann eine Struktur vermitteln, die die Tabelle nicht besitzt. Assistive Technik kann solche widersprüchlichen Angaben ignorieren oder unterschiedlich verarbeiten.
Scanner-Signal
Die Zeile „Windreihe“ trägt aria-posinset="1" innerhalb von role="table".
- Regel
aria-conditional-attr- Referenz
- WCAG 4.1.2
Technische Diagnose
Element: row
Attribut: aria-posinset="1"
Übergeordnete Rolle: table
Benötigter Kontext für dieses Attribut an row: treegridZeilenexporte im Zusammenhang prüfen
Dieselbe Zeilenvorlage kann in einfachen Tabellen und Baumtabellen stehen. Der Elternkontext entscheidet, welche Positionsangaben passen.
- Einfache Tabelle A× Befund im Beispiel
- Einfache Tabelle B× Befund im Beispiel
- Baumtabelle Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie die gerenderten Zeilen in jedem Tabellenkontext erneut, auch nach dynamischem Nachladen.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Braucht die Zeile überhaupt eine Baumposition?
Entscheiden Sie anhand der dargestellten Daten und ihrer Bedienung.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Einfache Tabelle wie im Beispiel | Die Wetterzeile enthält einen Eintrag ohne aufklappbare Unterzeilen oder hierarchische Navigation. | Entfernen Sie aria-posinset. Die vorhandenen Rollen table, row und cell bleiben erhalten. |
| Tatsächlich hierarchische Tabelle | Zeilen besitzen untergeordnete Einträge und bilden eine bedienbare Baumstruktur. | Planen Sie ein vollständiges Treegrid mit passender Struktur, Zuständen und Tastaturbedienung. Ein Rollenwechsel allein reicht nicht. |
| Native Checkbox betroffen | Der Befund nennt aria-checked auf einem input mit type="checkbox". | Prüfen Sie den nativen checked-Zustand. Verwalten Sie die Auswahl über die Checkbox statt über eine widersprechende ARIA-Angabe. |
Fundstelle ansehen
Die Windreihe im Abschnitt „Übernommene Wetterzeichen“
Der Ausschnitt zeigt den vollständigen Altbestand-Abschnitt mit Überschrift „Uneinheitliche Symbolbeschreibungen“, der übernommenen Tabellenzeile, dem Eintrag „Wetterlage“ und der Schaltfläche „Packliste öffnen“.
Markiert ist die Tabellenzeile mit der Zelle „Windreihe“. Die problematische Positionsangabe ist visuell unsichtbar; die Diagnose benennt deshalb Attribut und Tabellenrolle ausdrücklich.
Attribut korrigieren
Die unpassende Positionsangabe entfernen
Diese Wetterzeile gehört zu einer einfachen Tabelle. Entfernen Sie nur aria-posinset="1". Zelle, Text und Tabellenrolle beschreiben weiterhin denselben Inhalt; eine künstliche Baumhierarchie ist dafür nicht erforderlich.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Entfällt
aria-posinset="1"
In der Komponente Prüfen Sie das Template oder Plugin, das die Zeile erzeugt. Entfernen Sie die Attributbindung dort, damit ein erneutes Rendern den Fehler nicht zurückbringt.
Vollständigen Code vergleichen
Vorher
<div role="table">
<div role="row" aria-posinset="1">
<span role="cell">Windreihe</span>
</div>
</div>Nachher
<div role="table">
<div role="row">
<span role="cell">Windreihe</span>
</div>
</div>Markierte Zeilen wurden geändert
Dauerhaft umsetzen
Den Kontext in der Komponente berücksichtigen
Eine wiederverwendbare Zeile darf nicht überall dieselben ARIA-Attribute ausgeben.
- 1
Lesen Sie die tatsächliche Rolle des übergeordneten Elements im gerenderten DOM.
- 2
Prüfen Sie, ob das Attribut eine vorhandene Funktion beschreibt oder aus einer anderen Komponente übernommen wurde.
- 3
Entfernen Sie unpassende Attribute auch aus bedingten Renderpfaden, etwa nach Sortierung oder Filterung.
- 4
Verwenden Sie bei neuen einfachen Datentabellen bevorzugt die nativen HTML-Elemente table, tr und td.
Fehlkorrekturen vermeiden
Was den Kontextfehler nicht behebt
Nur die Zahl ändern
Auch aria-posinset="2" passt nicht zu einer row in einer einfachen Tabelle. Das Problem ist die Voraussetzung, nicht die Ziffer.
Pauschal treegrid setzen
Die Rolle verspricht eine hierarchische, interaktive Tabelle. Ohne die passende Datenstruktur und Bedienung entsteht eine neue falsche Erwartung.
Die ganze Zeile verstecken
aria-hidden würde Menschen mit Screenreader auch den Inhalt „Windreihe“ vorenthalten. Entfernen Sie das falsche Attribut, nicht den Zugang zur Information.
Nur das Screenshot-Ergebnis betrachten
Die korrigierte Semantik verändert hier keine Pixel. Entscheidend sind der DOM-Zustand und die erneute technische Prüfung.
Die unzulässige Kombination ist entfernt
Im korrigierten Beispiel bleibt die Windreihe sichtbar und behält ihre Zelle. Der Selektor für eine row mit aria-posinset findet keine Fundstelle mehr; die verbleibende Zeile wurde erneut auf dieselbe Regel geprüft.
So prüfen Sie die Korrektur nach
- Am veröffentlichten Element prüfen: role="row" ist vorhanden, aria-posinset fehlt.
- Den Elternkontext role="table" und den erhaltenen Zellinhalt „Windreihe“ kontrollieren.
- aria-conditional-attr erneut ausführen und nach dynamischen Änderungen wiederholen.
- Die Tabelle mit einem Screenreader lesen und die Verständlichkeit ihrer Struktur beurteilen.
Verifiziert ist das Entfernen dieser unzulässigen Attributkombination. Daraus folgt weder ein vollständiger Tabellen-Audit noch eine Bewertung der übrigen Elemente im Ausschnitt.
Geprüfter Zustand danach
aria-posinset: nicht vorhanden
Rollen: table → row → cell
Zellinhalt: Windreihe
Ergebnis: problematische Attributkombination entfernt; kein neuer Befund dieser Regel an der verbleibenden Zeile.Prüfgrenzen kennen
Was der Scan erkennt und was Sie beurteilen
Die technische Attributprüfung ersetzt keine Prüfung der Tabellenbedienung.
Automatisch prüfbar
- Unterstützte bedingte ARIA-Attribute mit dem gerenderten Rollenkontext vergleichen
- Die betroffene Zeile und die unzulässige Attributkombination zuordnen
- Das Entfernen der Kombination und neue Befunde im erneut geladenen Zustand prüfen
Im Kontext zu entscheiden
- Entscheiden, ob die Daten eine einfache Tabelle oder eine Baumtabelle erfordern
- Screenreader-Ausgabe und gegebenenfalls Tastaturnavigation im Zusammenhang prüfen
- Dynamische Zustände öffnen, die ein automatischer Seitenaufruf nicht erreicht