Die EU-Urheberrechtsreform wird das Internet, wie wir es kennen, grundlegend verändern – wenn sie denn in der finalen Abstimmung angenommen wird. Das können wir aber immer noch verhindern!
Weitere Informationen: https://juliareda.eu/2019/02/artikel-13-endgueltig/
WAI-ARIA
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]
- 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.
Inhaltsverzeichnis
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
- 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.
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.
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.
[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]
- ↑ W3C: WAI ARIA
- ↑ hessendscher: Einführung in WAI ARIA
- ↑ W3C: WAI-ARIA roles
- ↑ W3C: role application
- ↑ W3C ARIA 1.1: 5.4 Definition of Roles #none
- ↑ 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]
- 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