Was wird geprüft?
Alle selbst gestalteten Komponenten einer Website (also Elemente oder Widgets,
die nicht auf interaktiven HTML-Elementen beruhen) sind so umgesetzt, dass die
semantischen Informationen (Name, Rolle, Eigenschaften) vorhanden sind.
Werden nicht semantische Elemente (etwa div oder span) eingesetzt und
mithilfe von JavaScript zu Bedienelementen umfunktioniert, wird die Semantik
mithilfe von WAI-ARIA bereitgestellt.
Die wechselnden Zustände der Bedienelemente werden nicht nur visuell über CSS und JavaScript abgebildet, sondern auch über scriptgesteuerte Änderung der Werte der ARIA-Attribute, damit die Semantik auch bei nicht-visueller Nutzung verfügbar ist.
Warum wird das geprüft?
Standard-HTML-Bedienelemente wie Links (a-Element) und Formularelemente
(input, button, checkbox etc.) haben Namen, Rollen, Wert und Zustände,
sofern sie gemäß Spezifikation umgesetzt sind und sind für Hilfsmittel wie
Screenreader generell erkennbar.
So bekommen etwa blinde Nutzer mit, wenn sie
auf einen Link tabben und können diesem dann folgen.
Auch Zustände, beispielsweise einer Checkbox (ausgewählt oder nicht
ausgewählt) werden vermittelt.
Interaktive Schaltflächen sollten deshalb mit Hilfe von geeigneten
nativen HTML-Elementen umgesetzt werden, damit ihre Bedeutung klar wird.
Falls ungeeignete (weil nicht semantische) Elemente (etwa div oder span)
mithilfe von JavaScript zu Links oder Bedienelementen umfunktioniert werden,
kann die Semantik mit Hilfe von WAI-ARIA bereit gestellt werden.
Dies betrifft auch Komponenten (Widgets wie z. B. Tabpanels, Akkordeons etc.),
die in nativem HTML so nicht zur Verfügung stehen und mit Hilfe von nicht
semantischen Elementen und Scripten umgesetzt sind.
WAI-ARIA Attribute helfen, diese zu verstehen, indem semantische Informationen
vom Browser an die Hilfsmitteltechnologien übermittelt werden.
Wie wird geprüft?
1. Anwendbarkeit des Prüfschritts
Der Prüfschritt ist anwendbar, wenn die Seite interaktive Bedienelemente
(Links, Formularelemente, oder programmierte Elemente, die auf onclick oder
andere Event Handler reagieren) enthält.
2. Prüfung
Seite im Firefox Browser aufrufen
Bedienelemente der Seite auf korrekte Semantik prüfen:
Gibt es offensichtliche Links oder Schaltflächen ohne
href-Attribut? Dies lässt sich z. B. mit Hilfe der Web Developer Toolbar über die Funktion Information > Verweisdetails anzeigen (display link details) feststellen.Gibt es Formularelemente wie Checkboxen oder Radio-Buttons, die von der systemüblichen Darstellung abweichen, da sie mit anderen Elementen wie
divoderimgnachgebildet wurden?Gibt es auf der Seite selbstgebaute Widgets wie etwa Schieberegler oder Tabpanels?
Mittels Developer Tools prüfen, ob über WAI-ARIA Name, Eigenschaften und gegebenenfalls Zustände abgebildet werden. Zustandsänderungen müssen durch Änderungen der Attribute-Werte reflektiert werden. Grafische Zustandsänderungen durch den geskripteten Austausch von Bildern, die anstelle von Bedienelementen eingesetzt werden, müssen auch für Hilfsmittel verfügbare sinnvolle Änderungen von
alt-Attributen bzw. WAI-ARIA Eigenschaften erzeugen.
3. Hinweise
Im Zweifelsfall den ARIA Authoring Practices Guide konsultieren.
Unsemantische Elemente wie
spanoderdivsind nur dann mit der Tastatur fokussierbar, wenn dastabindex-Attribut gesetzt wurde. Falls das nicht der Fall ist, müssen Elemente also gegebenenfalls mit dem Cursor-Werkzeug des aViewers untersucht werden.Für die Prüfung von komplexen Widgets sollte der Screenreader ergänzend genutzt werden.
Bei dynamischen eingeblendeten Elementen (etwa den Ausklapplisten von Comboboxen) kann es notwendig sein, den laufenden Script anzuhalten, um eingeblendete Inhalte zu untersuchen. Hierzu eignet sich die Eingabe des Scripts
setTimeout(function(){debugger}, 5000);in der Konsole der Entwicklerwerkzeuge (diese sind aufrufbar mit F12), unmittelbar gefolgt vom Aufruf der einzublendenden Inhalte. Fünf Sekunden nach Aktivierung des Konsolen-Scripts stoppt die Ausführung des Scripts der Seite, die dynamischen Elemente können nur mittels Entwicklerwerkzeugen untersucht werden.
4. Bewertung
Nicht erfüllt
Wichtige Bedienelemente sind mit unsemantischen HTML-Elementen oder
a-Elementen ohnehref-Attribut umgesetzt, ohne dass die Semantik mit WAI-ARIA nachgebildet wurde.
Einordnung des Prüfschritts
Abgrenzung von anderen Prüfschritten
In diesem Prüfschritt geht es nicht um die Bewertung der Tastaturbedienbarkeit geskripteter Bedienelemente. Dies ist Gegenstand von Prüfschritt 9.2.1.1 "Ohne Maus nutzbar".
Einordnung des Prüfschritts nach WCAG 2.1
Guideline
Success criterion
4.1.2 Name, Role, Value (Level A)
Techniques
General Techniques
HTML Techniques
ARIA Techniques
Failures
Quellen
WAI-ARIA Spezifikation
Accessible Rich Internet Applications (WAI-ARIA) 1.1 (zur Zeit Candidate Recommendation)