Praxisleitfaden ARIA-Rollen modernisieren
Veraltete ARIA-Rollen ersetzen
Ein Kanalverzeichnis sieht unverändert aus, verwendet aber eine veraltete Rolle. Erkennen Sie den Befund, wählen Sie die passende Struktur und prüfen Sie die Korrektur.
aria-deprecated-roleWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-deprecated-role.html
Befund verstehen
Der Fehler steckt in der Rolle
Scanner-Signal
Der Container für #quakenet verwendet role="directory".
Technische Einordnung
- Regel
aria-deprecated-role- Referenz
- WCAG 4.1.2
Im importierten Kanalverzeichnis trägt ein div die Rolle directory. Diese Rolle ist seit WAI-ARIA 1.2 veraltet. Die Regel aria-deprecated-role meldet den Rollenwert; die sichtbare Beschriftung ist nicht der Auslöser.
Bedeutung im Nutzungskontext
Assistive Technik benötigt eine nachvollziehbare Struktur. directory bietet gegenüber einer Liste keinen zusätzlichen Nutzen. Die Korrektur sollte deshalb sowohl die Rolle ersetzen als auch den Kanal als Listeneintrag auszeichnen.
Diagnose am Kanalverzeichnis
Element: .legacy-channel-import .import-row > div:last-child
Rolle: directory
Beschriftung: Altes Kanalverzeichnis
Inhalt: #quakenet
aria-deprecated-role: veraltete Rolle erkannt (Axe-Auswirkung: minor)Alte Verzeichnisvorlagen wiedererkennen
Ein Rollenwert kann mit derselben Importvorlage auf weitere Seiten gelangen. Prüfen Sie dort auch die zugehörigen Listeneinträge.
- Kanalarchiv× Befund im Beispiel
- Kanalübersicht× Befund im Beispiel
- Einzelnotiz Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie nach einem neuen Import Rolle und Einträge der tatsächlich betroffenen Verzeichnisse.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welche Aufgabe hat das Verzeichnis?
Entscheiden Sie anhand der Inhalte und Bedienung. Der Begriff „Verzeichnis“ allein bestimmt noch keine passende Rolle.
Fundstelle zuordnen
Der Kanal im importierten Verzeichnis
Der vollständige Importabschnitt der QuakeNet-Kalibrierseite zeigt Überschrift, Erklärung und Rohdatenzeile. Markiert ist der Eintrag #quakenet mit seiner veralteten Verzeichnisrolle.
Der Kanalname bleibt lesbar. Was fehlt, ist eine zeitgemäße Auszeichnung als Liste mit einem Eintrag. Die benachbarten Importelemente gehören zum Seitenkontext und sind nicht Gegenstand dieser Korrektur.
Rolle und Eintrag korrigieren
Aus directory wird eine vollständige Liste
Am vorhandenen Container ersetzen Sie directory durch list. Der Kanal erhält ein eigenes Element mit role="listitem". Die Beschriftung „Altes Kanalverzeichnis“ und der Kanalname bleiben erhalten; die Darstellung ändert sich nicht.
In der Komponente Korrigieren Sie das Template, das die Importzeile erzeugt. Bei einem Neubau verwenden Sie ul mit li. Prüfen Sie nach der Änderung auch Styles und Abfragen, die noch auf role="directory" zugreifen.
Vorher
<div role="directory"
aria-label="Altes Kanalverzeichnis">
#quakenet
</div>Nachher
<div role="list"
aria-label="Altes Kanalverzeichnis">
<span role="listitem">#quakenet</span>
</div>Markierte Zeilen wurden geändert
Umsetzung absichern
Die erzeugte Struktur zählt
Eine Änderung im Template ist erst wirksam, wenn der Browser die neue Liste tatsächlich erhält.
- 1
Suchen Sie in der verantwortlichen Komponente nach directory, auch in dynamisch gesetzten Rollen und Varianten.
- 2
Ordnen Sie jeden Kanal einem eigenen Listeneintrag zu. Der Container braucht echte Kinder mit Listenitem-Semantik.
- 3
Erhalten Sie vorhandene Namen und Linkziele. Die Korrektur darf keine Einträge oder Funktionen verlieren.
- 4
Öffnen Sie die veröffentlichte Importansicht und kontrollieren Sie die Rollen nach dem Laden und nach Aktualisierungen.
Folgefehler vermeiden
Ein neuer Rollenwert allein reicht nicht immer
list ohne Listeneinträge
Ein reiner Texteintrag direkt unter role="list" bildet noch keine vollständige ARIA-Liste. Ergänzen Sie listitem oder setzen Sie native Listenelemente ein.
tree für jede Sammlung
Ein Baum bringt Erwartungen an Hierarchie, Zustände und Tastaturbedienung mit. Das statische Kanalverzeichnis benötigt diese Interaktion nicht.
role="section" als Ersatz
section ist eine abstrakte ARIA-Rolle und kein gültiger direkter Ersatz im Markup. Für einen Inhaltsabschnitt wählen Sie passende HTML-Semantik.
Verzeichnis ausblenden
aria-hidden entfernt den Inhalt für assistive Technik. Dadurch geht der Kanal verloren, obwohl der sichtbare Eintrag weiter besteht.
Die Rolle ist korrigiert, der Kanal bleibt erhalten
Der erneute Axe-Lauf besteht aria-deprecated-role am selben Container. Zusätzlich bestätigt die Prüfung list, einen listitem-Eintrag sowie die unveränderte Beschriftung und den Inhalt #quakenet.
So prüfen Sie die Korrektur nach
- Im gerenderten HTML kontrollieren: role="list" enthält den Kanal mit role="listitem".
- Die Regel aria-deprecated-role erneut ausführen und die Fundstelle mit dem ursprünglichen Befund abgleichen.
- Mit assistiver Technik prüfen, ob Verzeichnisname und Eintrag verständlich ausgegeben werden; weitere Importzustände einbeziehen.
Dieser Nachweis gilt für aria-deprecated-role an genau diesem Container. Er bewertet weder die übrige Importzeile noch die vollständige Bedienbarkeit der Seite.
Geprüfter Zustand nach der Korrektur
Gleicher Container: vorhanden
Rolle: list
Kind: listitem mit #quakenet
Beschriftung: Altes Kanalverzeichnis
Axe aria-deprecated-role: bestanden
Sichtbare Pixel: unverändertPrüfgrenzen kennen
Rollen erkennen, Nutzung im Kontext prüfen
Die automatische Regel findet veraltete Rollenwerte im untersuchten DOM. Die Auswahl der fachlich passenden Struktur bleibt eine Entscheidung im Seitenkontext.
Automatisch prüfbar
- directory an einem gerenderten Element als veraltete Rolle erkennen
- Den betroffenen Container im Seitenausschnitt markieren
- Dieselbe Regel nach der Änderung erneut am Container prüfen
Im Kontext zu entscheiden
- Entscheiden, ob Liste, Textabschnitt oder bedienbarer Baum zum Inhalt passt
- Ausgabe von Name und Einträgen mit assistiver Technik beurteilen
- Dynamische Varianten und gegebenenfalls Tastaturbedienung vollständig durchgehen