WAI-ARIA

Aus SELFHTML-Wiki
(Weitergeleitet von Role)
Wechseln zu: Navigation, Suche

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

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[Bearbeiten]

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

  • application: eigenständige Webanwendung[4]
  • 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?[Bearbeiten]

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.[5]

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[Bearbeiten]

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.[6] Sie enthalten keine zusätzlichen Informationen und blähen nur unnötigerweise den Quelltext auf.

aria-Attribute[Bearbeiten]

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.

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

aria-Attribute und CSS[Bearbeiten]

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.

Quellen[Bearbeiten]

  1. W3C: WAI ARIA
  2. hessendscher: Einführung in WAI ARIA
  3. W3C: WAI-ARIA roles
  4. W3C: role application
  5. W3C ARIA 1.1: 5.4 Definition of Roles #none
  6. html5doctor: On HTML belts and ARIA braces
    (The Default Implicit ARIA semantics they didn’t want you to know about) vom 14.April 2015

Weblinks[Bearbeiten]

deutsch:

Beispiele: