Inhalt
Dieser Artikel erschien erstmals in Ausgabe 231 des .net-Magazins - dem weltweit meistverkauften Magazin für Webdesigner und -entwickler.
Wenn Sie ein Benutzeroberflächen-Widget erstellen, besteht es wahrscheinlich aus HTML-Elementen. Im Allgemeinen ist es für jemanden einfach, herauszufinden, was das Widget tut oder welche Rolle es auf der Seite spielt, je nachdem, wie es aussieht oder welche Steuerelemente es zur Verfügung stellt. Diese ganzheitliche Perspektive ist für assistive Technologien (ATs) jedoch nicht offensichtlich, und hier kommt (natürlich) ARIA ins Spiel.
ARIA oder Accessible Rich Internet Applications, um ihm den vollständigen Titel zu geben, können verwendet werden, um Ihrem Widget eine Rolle zu geben. Oder anders ausgedrückt: Sie können ARIA-Rollen verwenden, um ATs etwas über Ihr Bündel von HTML-Elementen zu erzählen, als wären sie eine einzelne Entität.
Die ARIA 1.0-Spezifikation enthält eine Taxonomie der Rollen. Es beschreibt die Merkmale und Eigenschaften von 73 verschiedenen Rollen, die in vier übergeordnete Kategorien unterteilt sind.
Die erste Kategorie definiert 12 abstrakte Rollen. So wie abstrakte Klassen beim Programmieren niemals instanziiert werden, sollten abstrakte Rollen niemals in Ihrem Code verwendet werden. Sie beschreiben verschiedene Arten von Rollen auf konzeptioneller Ebene und werden daher nur innerhalb der Taxonomie selbst verwendet.
Rollen
Eine abstrakte Rolle unterscheidet sich von den anderen. Die Rolle (abstrakte Rolle) ist die Grundrolle, von der alle anderen Rollen in der Taxonomie erben. Andere abstrakte Rollen umfassen die Eingabe (abstrakte Rolle), den Orientierungspunkt (abstrakte Rolle) und das Widget (abstrakte Rolle).
Nehmen wir als Beispiel das Widget (abstrakte Rolle). Es beschreibt eine Dachrolle, unter der sich alle anderen Widget-Rollen in der Taxonomie befinden. So wird es in der ARIA-Spezifikation beschrieben:
„Eine interaktive Komponente einer grafischen Benutzeroberfläche (GUI). Widgets sind diskrete Benutzeroberflächenobjekte, mit denen der Benutzer interagieren kann. “
Dies führt übersichtlich zur nächsten Kategorie, in der 34 Widget-Rollen definiert sind. Widgets sind interaktive Steuerelemente, die entweder eigenständig oder kombiniert werden können, um komplexere UI-Komponenten zu erstellen. Neun dieser Rollen definieren Container, mit denen andere Widgets gekapselt werden können, um komplexere Steuerelemente zu bilden.
Widgets
Die verbleibenden 25 Rollen definieren Widgets, die unabhängig oder als Teil eines komplexen zusammengesetzten Steuerelements verwendet werden können. Ein Element mit der Rolle eines Tablisten kann beispielsweise mehrere Elemente mit der Rolle eines Tabulators enthalten. In Verbindung mit einem entsprechenden Satz von Elementen mit der Rolle eines Tabpanels bilden sie zusammen eine zusammengesetzte Oberfläche mit Registerkarten. Elemente mit Rollen wie Alarm, Kontrollkästchen oder Dialog können auch Teil eines komplexeren UI-Steuerelements sein oder eigenständig sein.
Die dritte Kategorie definiert 18 Dokumentstrukturrollen. Diese Rollen beschreiben typische Inhaltsformationen wie Überschrift, Liste und Symbolleiste. Im Gegensatz zu Widget-Rollen sind Dokumentstrukturrollen in der Regel nicht interaktiv.
Die letzte Kategorie definiert acht wegweisende Rollen. Sie können auf verschiedene Abschnitte einer Webseite angewendet werden und bieten Orientierungspunkte, anhand derer ATs navigieren können. Zu den Rollen in dieser Kategorie gehören Banner, Main und Navigation.
Entdecken Sie die 20 besten Wireframing-Tools für Designer bei Creative Bloq.
