BSVÖ: Barrierefrei erklärt! Was ARIA für digitale Barrierefreiheit macht
barrierefei erklärt © BSVÖ
Logo: BSVÖ Barrierefrei erklärt.
Vielleicht haben Sie ja schon mal von ARIA gehört? Oder doch noch nicht? Was ist das und was hat das mit digitaler Barrierefreiheit zu tun? Das ist das Thema unserer heutigen Spurensuche im Internet.
Was ist ARIA?
ARIA steht für "Accessible Rich Internet Applications" und wurde vom World Wide Web Consortium (W3C) entwickelt. Es handelt sich um eine Reihe von Attributen, die in den Code von Websites eingebunden werden, um die Zugänglichkeit für Menschen mit Behinderungen, insbesondere für Screenreader-Nutzer, zu verbessern. Doch ARIA ist nicht nur ein einzelnes Konzept – es umfasst Labels, Rollen und Attribute.
ARIA-Labels
ARIA-Labels sind textuelle Beschreibungen, die den Zweck eines Elements auf einer Webseite erläutern. Sie werden vor allem genutzt, um interaktive Elemente wie Buttons, Links oder Formulare für Screenreader verständlich zu machen. Ein ARIA-Label erklärt dem Screenreader, was ein Element tut oder warum es wichtig ist. Beispiel: Ein Button, der ein Menü öffnet, könnte ein ARIA-Label mit dem Text „Menü öffnen“ haben, damit der Nutzer genau weiß, was dieser Button bewirkt.
ARIA-Rollen
Die Rolle eines Elements gibt an, welchen Zweck das Element auf der Seite erfüllt. Sie beschreibt die Funktion des Elements. Sie sagt dem Screenreader also, ob das Element eine Schaltfläche, ein Menü, eine Navigation oder ein anderes interaktives Element ist. Beispiel: Wenn Sie eine Schaltfläche haben, können Sie die Rolle „button“ hinzufügen, um dem Screenreader zu sagen, dass es sich um eine Schaltfläche handelt, auch wenn das Element optisch keine typische Schaltfläche ist (z. B. ein div-Tag, das als Button fungiert).
Zusammenfassung des Unterschieds zwischen Rolle und Label:
- Rolle beschreibt was ein Element ist (z. B. ein Button, eine Navigation, ein Menü) und welche Art von Interaktion zu erwarten ist.
- Label beschreibt warum ein Element da ist oder was es tut, indem es eine textuelle Beschreibung liefert (z. B. „Speichern“ für einen Button, „Start“ für einen Play-Button).
Die Rolle ist also die Funktion oder der Zweck des Elements, während das Label die Bedeutung des Elements für den Benutzer klarer macht.
ARIA-Attribute
Attribute sind zusätzliche Eigenschaften, die einem Element zugewiesen werden, um es für Screenreader verständlicher zu machen. Sie helfen, die Interaktivität und den Status von Elementen klar zu definieren. Sie spezifizieren z. B., ob ein Element fokussiert oder ausgewählt ist. Beispiel: Ein ARIA-Attribut wie „aria-expanded“ gibt an, ob ein Dropdown-Menü offen oder geschlossen ist. Der Screenreader kann diesen Status vorlesen, was den Nutzer darüber informiert, ob weitere Optionen verfügbar sind.
Wie ARIA HTML ergänzt
ARIA ergänzt HTML, indem es zusätzliche Informationen bereitstellt, die besonders für interaktive Elemente und Widgets, wie sie häufig in Anwendungen verwendet werden, nützlich sind. Wenn HTML selbst keinen geeigneten Mechanismus zur Übermittlung von Informationen an unterstützende Technologien bietet, ermöglicht ARIA eine barrierefreie Nutzung. Zum Beispiel wird ARIA verwendet, um zugängliche JavaScript-Widgets, Eingabehinweise in Formularen, Fehlermeldungen oder auch Live-Inhaltsaktualisierungen zu ermöglichen.
Die erste Regel der ARIA-Nutzung
Die wichtigste Regel bei der Verwendung von ARIA lautet: Nutzen Sie, wenn möglich, native HTML-Elemente und -Attribute, die bereits die notwendige Semantik und Funktionalität bieten. Wenn ein HTML-Element oder Attribut die gewünschte Struktur und das gewünschte Verhalten bereits integriert hat, sollte es bevorzugt werden, anstatt ein nicht semantisches Element umzuwidmen und ARIA-Rollen oder -Attribute hinzuzufügen, um es zugänglich zu machen. Dies gewährleistet eine bessere Leistung und Kompatibilität mit allen unterstützenden Technologien.
Warum sind ARIA-Labels, -Rollen und -Attribute wichtig?
Die meisten Websites nutzen Alt-Texte, um Bilder zu beschreiben, oder verwenden klare Beschriftungen für Buttons und Links. Doch manchmal reicht das nicht aus. Gerade interaktive Elemente wie Dropdown-Menüs, Schieberegler oder komplexe Formulare brauchen mehr Kontext, damit Menschen mit Screenreadern verstehen, was sie tun können.
ARIA-Labels, -Rollen und -Attribute helfen, diese Interaktivität und Struktur für Screenreader-Benutzer verständlich zu machen. Sie ermöglichen es, dass Menschen mit Behinderungen die Inhalte auf der Webseite in der gleichen Weise erleben können wie alle anderen.
Fazit
ARIA-Labels, -Rollen und -Attribute sind grundlegende Bestandteile der digitalen Barrierefreiheit. Sie ergänzen die Standard-HTML-Struktur und machen Webseiten für Menschen mit Behinderungen zugänglicher. Durch die korrekte Verwendung dieser Techniken schaffen wir eine inklusivere digitale Welt.