WAI-ARIA

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) ist ein empfohlener Webstandard des W3C. Er soll HTML, aber auch SVG, und besonders Webanwendungen besser zugänglich machen, insbesondere für blinde Anwender, die Screenreader verwenden.

Empfehlung: Sie können Ihre Webseite für alle Nutzer zugänglich machen:

• Erstellen Sie eine Seitenstruktur mit semantisch passenden Elementen. Bei diesen ist es im Allgemeinen nicht nötig, eigene ARIA-Attribute zu verwenden.
• Verwenden Sie sogenannte landmark roles als Orientierungspunkte für Unterstützungstechnologie.
• Ergänzen Sie interaktive Elemente mit aussagekräftigen aria-Attributen.

role-Attribut

Mit dem role-Attribut können Sie sogenannte Landmark-Roles als Orientierungspunkte verwenden. Da Screenreader so die einzelnen Teile der Webanwendung erkennen, können diese dann per Tastendruck ("R" in JAWS) angesteuert werden:

• application: eigenständige Webanwendung
• banner: Seitenspezifischer Inhalt, beispielsweise der Titel der Seite oder das Logo
• complementary: unterstützender Inhalt für den Hauptinhalt, der aber auch für sich allein stehend und unabhängig vom Hauptinhalt verständlich ist, beispielsweise das angezeigte Wetter auf einem Portal
• contentinfo: Fußnoten, Copyright-Hinweise, Voreinstellungen, rechtliche Hinweise und Ähnliches
• form: Formulare
• main: Inhalt mit direktem Bezug zum Hauptinhalt oder Inhalt, der zum zentralen Inhalt des jeweiligen Dokuments führt.
• navigation: Inhalt, der Links enthält, um durch das Dokument und/oder zu ähnlichen Dokumenten zu navigieren
• search: Suchfunktion der Website

Beispiel: SVG-Elemente mit role-Attributen

<use href="#logo" role="banner"/> <text role="heading">Überschrift</text> <g role="main"> <text>Unterüberschrift <tspan>Text</tspan> <tspan>... mehr Inhalt<tspan> </text> </g> <text role="contentinfo"> Sonstiges </text>

In diesem Beispiel wurden den SVG-Elementen landmark-roles in Form von ARIA-Attributen gegeben. So können Screenreader die Text-Elemente anhand ihrer Semantik erkennen.

Beachten Sie:

• Wenn es ein passendes HTML-Element gibt, verwenden Sie dieses ohne Angabe einer WAI-ARIA-Rolle.
• Verändern Sie die Semantik der HTML-Elemente nicht.
• Sollten Elemente nicht bestimmungsgemäß eingesetzt werden, wie es zum Beispiel bei Layout-Tabellen der Fall ist, entfernen Sie die Semantik des Elements durch role="none".

presentation oder none?

In der ARIA-Spezifikation 1.1 wird die Rolle none als Synonym für die Rolle presentation eingeführt, weil das Wort none die eigentliche Bedeutung besser vermittelt.

Solange die Browserunterstützung von role="none" noch nicht ausreichend ist, sollten Sie redundant als Fallback role="none presentation" (oder role="presentation") verwenden. Es ist davon auszugehen, dass presentation zukünftig als deprecated eingestuft wird.

default-Rollen

Auch wenn Sie keine WAI-ARIA-Rolle angeben, haben einige Elemente bereits „eingebaute“ Rollen. Eine vollständige Übersicht aller dieser Rollen finden Sie unter default-Rollen.

Beachten Sie: Sie sollten ARIA-Attribute, die nur den implizit vorhandenen Default-Wert beinhalten, nicht in das Markup aufnehmen. Sie enthalten keine zusätzlichen Informationen und blähen nur unnötigerweise den Quelltext auf.

aria-Attribute

Häufig sind aus Javascript-Bibliotheken übernommene Komponenten (widgets) entgegen ihrer Versprechungen nicht barrierefrei. Durch aria-Attribute können zusätzliche Information über ein Objekt geliefert werden, die ein Teil einer Definition der Rolle eines Objekts bilden.

Hauptartikel: WAI-ARIA/Zustände und Eigenschaften

Beachten Sie: Elemente, die mit aria-hidden="true" gekennzeichnet sind, sind weder sichtbar noch fokussierbar.

aria-Attribute und CSS

Sie können auch aria-Attribute anstelle von Klassen als Selektoren für eine Gestaltung mit CSS verwenden.

Beispiel: aria-Attribute als Attributselektoren

[aria-checked] {
    width: 1em;
    height: 1em;
}

[aria-checked="true"] {
    color: blue;
}

[aria-checked="false"] {
    color: green;
}

Sie können sowohl den einfachen Attributselektor verwenden als auch nach dem Wert selektieren.

Während das Auslesen und Setzen von Klassen in JavaScript immer noch seine Tücken hat, können die aria-Attribute bequem mit getAttribute und setAttribute verändert werden.

Weblinks

• W3C: ARIA in HTML
• W3C: HTML Element Role Mappings
• dev.opera: UX accessibility with aria-label von Heydon Pickering vom 09.04.2015

deutsch:

• MDN: ARIA (Portal mit vielen guten Links)
• barrierefreies Webdesign: Landmark-Roles
• barrierefreies Webdesign: Worauf bei ARIA zu achten ist
• barrierefreies Webdesign: Layout-Tabellen sind wie Briefe in Excel
• vorsprungdurchwebstandards: 7 Gründe WAI ARIA Landmarks sofort einzusetzen

Beispiele:

• heydonworks: practicable ARIA Examples