Christophs WeWi Blog

Die Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA, meist: ARIA) ist eine Initiative des W3C zur Verbesserung der Zugänglichkeit von meist nicht statischen Webanwendungen für eingeschränkte Benutzer. (Q1)

Ziel und Notwendigkeit

Moderne Webanwendungen unterscheiden sich von klassisch statischen Webinhalten dadurch, dass Inhalte, Stati und Darstellungen dynamisch wechseln können. Dieser Wechsel kann dazu führen, dass Unterstützungstechnologien wie Screenreader die Semantik der Anwendung nicht mehr verstehen, was den Verlust der Benutzbarkeit der Anwendung für eingeschränkte Benutzer zur Folge haben kann. (Q2)

Um auch eingeschränkten Benutzern einen möglichst vollumfänglichen Zugriff auf dynamische Webanwendungen zu Erlauben bietet WAI-ARIA eine semantische Erweiterung für Markup-Sprachen wie HTML5 und SVG2 (Q3).

Konzepte und Beispiel

WAI-ARIA erweitert die Semantik der Host-Sprachen durch Rollen, Stati und Attribute welche den bestehenden Elementen zugewiesen werden. Folgendes Beispiel illustriert Konzepte und Notwendigkeit: Ein HTML-Listen-Element dient als Menü-Element einer Webanwendung. Via JavaScript wird nach Auswahl eines Sortier-Kriteriums der Inhalt der Seite neu arrangiert.

<ul>

  <li>Sort by price</li>

  <li>Sort by location</li>

</ul> 

Aufgrund der Semantik ist es dem eingeschränkten Benutzer nicht möglich Funktion und Status der Applikation zu erkennen. Das gleiche Beispiel wird nun um Elemente der WAI-ARIA Empfehlung erweitert.

<ul role="menu">

  <li role="menuitemradio" aria-checked="true">Sort by price</li>

  <li role="menuitemradio">Sort by location</li>

</ul>

Die zusätzliche Auszeichnung der Elemente erlaubt es nun, auch ohne die tatsächliche visuelle Repräsentation zu kennen, aufgrund der Semantik eine Aussage über die Funktion der einzelnen Elemente zu treffen.

Das UL-Element (welches möglicherweise eines von vielen auf dieser Seite ist) beschreibt ein Menü. Die einzelnen Menüpunkte werden als LI-Element repräsentiert und der Benutzer erkennt, dass die Möglichkeit “Sort by Price” ausgewählt wurde.

Von Inhabern einer Webseite fordert das Bundes-Behindertengleichstellungsgesetz 2016 ein gewisses Maß an Barrierefreiheit (Q4). Dieses Beispiel illustriert die Relevanz interdisziplinären Verständnisses von Webapplikationen. Abseits von der gesetzlichen Komponente ist es in Zeiten von mobilen (und somit eingeschränkten) Browsern in meinem Interesse als Webshop-Betreiber, eine möglichst intuitive Struktur meiner Webseite zu bieten. Ganz davon abgesehen, dass Google semantische Korrektheit in seinem Ranking belohnt. (Q5)

Quellen:

Q1: https://www.w3.org/TR/2014/REC-wai-aria-20140320/ abgerufen am 1.12.2016

Q2: https://developer.mozilla.org/de/docs/Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets abgerufen am 1.12.2016

Q3: https://www.w3.org/TR/wai-aria-1.1/#co-evolution abgerufen am 1.12.2016

Q4: https://www.wko.at/Content.Node/branchen/k/Barrierefreiheit:-Das-ist-bis-2016-zu-tun.html (Abgerufen am 9.1.2017)

Q5: https://moz.com/beginners-guide-to-seo/basics-of-search-engine-friendly-design-and-development (Abgerufen am 9.1.2017)