sprungmarker testet

Bookmarklet WAI-ARIA Usage

Screenshot - Bookmarklet WAI-ARIA Usage - Beispielhaftes Ergebnis
Screenshot – WAI-ARIA usage result

Das Bookmarklet WAI-ARIA Usage von TPGi analysiert den Einsatz von WAI-ARIA in HTML gemäß der Spezifikation ARIA in HTML (W3C Recommendation, 9.12. 2021). Es nutzt die Inhalte der Tabelle „Roles of ARIA Attribute usage by HTML elment“. In dieser Tabelle wird jedem HTML Element (Spalte 1) zuerst die implizite WAI-ARIA Semantik (Spalte 2) zugeordnet und dann die Möglichkeit, noch weitere WAI-ARIA Roles (Rollen), States (Zustände) und Properties (Eigenschaften) (Spalte 3) für dieses Element zu integrieren.

Nutzt man das Bookmarklet WAI-ARIA Usage auf Webseiten, erhält man unter anderem folgende Ergebnisse:

  • WAI-ARIA Rollen und Attribute, die valide sind
  • Nicht-Valide WAI-ARIA Rollen und Attribute
  • WAI-ARIA Rollen und Attribute, die nicht mehr notwendig oder obsolet (deprecated) sind
  • Hinweise auf nichtexistierende WAI-ARIA Rollen und Attribute
  • Abhängigkeiten zwischen den WAI-ARIA Rollen (parent / child Rollen)
  • Elemente mit nicht validen WAI-ARIA Attributen

Bookmarklet Ergebnis: Valide WAI-ARIA Rollen und Attribute

Anhand der Ergebnisse der validen WAI-ARIA Rollen lässt sich schon ein erster Blick etwa auf die verwendeten Widgets oder den Einsatz von Inline-SVGs werfen. Bei Seiten mit Inline-SVGs findet man häufig zur barrierefreien Optimierung die WAI-ARIA Rolle img. Für die generelle Struktur einer Seite wird der Suchbereich mit Hilfe von WAI-ARIA Rolle search gekennzeichnet. Man kann daher schnell erkennen, ob ein Modalfenster (dialog), Tooltips, angepasste Formularelemente oder Statusmeldungen auf der Seite vorhanden sind.

Bookmarklet Ergebnis: Nicht valide WAI-ARIA Rollen und Attribute

Interessanter in den Ergebnissen sind natürlich die nicht-validen WAI-ARIA Rollen und Attribute des Bookmarklets WAI-ARIA Usage. So wird etwa darauf hingewiesen, dass in einem Formularfeld, das bereits das HTML Attribut required enthält, nicht mehr das WAI-ARIA Attribut aria-required eingesetzt werden soll.

Authors SHOULD NOT use the aria-required=“true“ on any element which also has a required attribute.

Quelle: ARIA in HTML: 3.1 Requirements for use of ARIA attributes in place of equivalent HTML attributes
Screenshot Entwicklerwerkzeug Chrome HTML Liste als Navigation
Screenshot: Zugänglicher Name der HTML Liste ARIA Rolle navigation

Oder eine HTML Liste (ul) hat eine WAI-ARIA Rolle navigation. Eine HTML Liste (ul) hat eine implizite WAI-ARIA Rolle list und kann nur zusätzlich etwa eine WAI-ARIA Rolle listbox oder menu enthalten. Das Bookmarklet weist korrekt darauf hin, dass role=navigation keine valide WAI-ARIA Rolle auf diesem Element ist. Die HTML Liste verliert dann auch ihre implizite semantische Rolle als Liste und wird nun von Screenreadern als Navigationselement vorgelesen, die einzelnen HTML Listenelemente (li) stehen in keinem Listenzusammenhang mehr (Test mit VoiceOver auf dem Mac).

Screenshot Entwicklerwerkzeug Chrome - Überschrift als Button
Screenshot: Zugänglicher Name der Überschrift – ARIA Rolle button

Auch auf die immer wieder anzutreffende nicht valide Kombination einer Überschrift (etwa einer h2) und einer WAI-ARIA Rolle button wird hingewiesen. Dies findet sich leider häufig bei der Umsetzung eines Akkordeons. Die ursprüngliche Überschrift (etwa eine h2) wird mit einer WAI-ARIA Rolle button von Screenreadern nicht mehr als Überschrift erkannt. Die Überschrift taucht dann weder in der Übersicht der Überschriften auf, noch lässt sie sich mit der Tastatur etwa mit Hilfe eines Tastaturkürzel wie H erreichen (Test mit VoiceOver auf dem Mac).

Bookmarklet Ergebnis: Obsolete WAI-ARIA Rollen und Attribute

Hier stoßen wir vor allem auf die obsoleten WAI-ARIA Landmark Roles wie role=banner oder role=main. Aber auch auf nicht notwendige WAI-ARIA Rollen wird hingewiesen wie eine WAI-ARIA Rolle list auf einer HTML Liste (ul).

Bookmarklet Ergebnis: Abhängigkeiten zwischen den WAI-ARIA Rollen (parent / child Rollen)

Das Bookmarklet WAI-ARIA Usage analysiert Abhängigkeiten in gängigen WAI-ARIA Widgets. Vor allem weist es auf fehlende WAI-ARIA Rollen im Widget – von Eltern- und Kind-Elmenten (parent / child Rollen) – hin.

Screenshot Entwicklerwerkzeug Chrome HTML Liste als Tabs
Screenshot: Fehlende WAI-ARIA Rollen für Kind-Elemente

Fehlen etwa dem WAI-ARIA-Widget Tabs bei den Kind-Elementen etwa die WAI-ARIA Rollen tab, wird das entsprechend mit einer Referenz zum Quellcode angemerkt. Infolgedessen werden die Kind-Elemente nicht mehr als einzelne Tabs erkannt.

Role tablist missing required child role (tab).

Quelle: WAI-ARIA Usage – Fehlerhinweis

Fazit

Das Bookmarklet WAI-ARIA Usage gibt Hinweise, wie und wo WAI-ARIA Rollen, Attribute und Eigenschaften auf der Seite unzureichend oder sogar fehlerhaft eingesetzt werden. Vor allem für die konkrete Entwicklung kann das durchaus von Vorteil sein, weil die Fehlermeldung immer mit einer entsprechenden Referenz zum Quellcode versehen ist.

Eine eingehende Analyse aller WAI-ARIA Widgets ersetzt das Bookmarklet nicht. Es kann nur Hinweise geben, wo und wie WAI-ARIA auf der Webseite nicht korrekt eingesetzt wird. Das Fehlen von WAI-ARIA bildet das Bookmarklet nicht ab – etwa der Einsatz eines Akkordeons ohne entsprechende WAI-ARIA Optimierung.

Die Ergebnisse des Bookmarklets – wie hier beispielhaft beschrieben – spiegeln häufig die andauernde Debatte zum Einsatz von WAI-ARIA gut wider.

Hinweis

Bookmarklets sind zwar einfach in der Nutzung, aber sie laden jedoch oftmals eine externe JS-Datei eines anderen Servers. Das fällt bei vielen Servern unter Cross-Site-Scripting und das Bookmarklet lädt sich dann nicht. Auch beim Bookmarklet WAI-ARIA Usage ist das der Fall.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert