Ein Blick in ARIA-Webstandards und Barrierefreiheit für HTML-Apps
Ein wirklich offenes und integratives Web benötigt Technologien, die es behinderten Benutzern ermöglichen, auf unterstützende Technologien zuzugreifen, um dynamische Webinhalte und moderne Webanwendungen zu nutzen. Die barrierefreien Webstandards von W3C zielen darauf ab, das Web mit ARIA (Accessible Rich Internet Applications) zu füllen, die Benutzer mit Behinderungen effizient nutzen können.
ARIA ist einer der zahlreichen Standards und Richtlinien für Barrierefreiheit, die von der Web Accessibility Intitiative (WAI) veröffentlicht werden. Es bietet eine zusätzliche Markierung, die einfach in HTML-Dokumente eingefügt werden kann. WAI-ARIA ist eine plattformübergreifende und geräteübergreifende Lösung für die Open Web Platform. Denken Sie also nicht nur an Websites, sondern auch an Spiele, digitale Unterhaltung, Gesundheitswesen, mobile Anwendungen und andere Arten von Apps.
In diesem Beitrag erfahren Sie, wie Sie mithilfe von WAI-ARIA-Standards den Zugriff auf Ihre HTML-Dokumente verbessern können.
Das ARIA-Framework
Die Syntax von HTML ermöglicht es Entwicklern nicht immer, Elemente richtig zu beschreiben, ihre Rollen zu identifizieren und die Beziehungen zwischen ihnen festzulegen. Während dies für Besucher, die ihre Sinne voll im Griff haben, selten ein Problem ist, können Benutzer von Hilfstechnologien daran gehindert werden, das Geschehen auf dem Bildschirm zu verstehen und ihre Optionen zu erkunden.
Dies ist der Punkt, an dem uns ARIA zu Hilfe kommt, da es ermöglicht, den Zweck verschiedener Elemente mit Hilfe von zu definieren wegweisende Rollen, und beschreiben ihre Natur mit Aria-vorangestellte Attribute. Aria-vorangestellte Attribute haben zwei Typen: Eigenschaften die Funktionen beschreiben, die sich während des gesamten Lebenszyklus der Seite weniger wahrscheinlich ändern, und Zustände Informationen über Dinge, die sich häufig aufgrund von Benutzerinteraktionen ändern können.
Wahrzeichen Rollen
Wahrzeichen Rollen sind die bekanntesten Formen des Rollenmodells von ARIA (andere sind die abstrakten Rollen, die Widgetrollen und die Dokumentstrukturrollen). Landmark-Rollen ermöglichen es Entwicklern, große zu identifizieren wahrnehmbaren Regionen auf der Webseite, auf die Benutzer der assistiven Technologie möglicherweise schnell zugreifen möchten.
Es gibt acht Arten von ARIA-Orientierungspunktrollen, die den zugehörigen HTML-Tags als Attribute hinzugefügt werden müssen.
Rolle =”Banner”
Die Banner-Rolle soll hauptsächlich für Inhalte verwendet werden, die sich auf die gesamte Website beziehen, nicht nur auf einzelne Seiten. Es wird normalerweise als Attribut zum Hauptheader der Site für das Logo und andere wichtige Site-weite Informationen hinzugefügt. Es ist wichtig, dass Sie die Bannerrolle nur einmal in HTML-Dokumenten oder Apps verwenden können.
Rolle =”Main”
Die Hauptrolle hat einen Bezug zum Hauptinhalt des Dokuments. Es kann nur einmal auf einer HTML-Seite verwendet werden. Normalerweise folgt das Die Navigationsrolle soll dazu verwendet werden, einen Bereich anzugeben, der Navigationselemente wie Links und Listen auf einer Site enthält. Die ergänzende Orientierungsrolle beschreibt zusätzliche Inhalte, die sich auf den Hauptinhalt der Website beziehen. Es muss auf der ähnlichen Ebene in der DOM-Hierarchie platziert werden als Die Rolle contentinfo informiert Benutzeragenten über das Vorhandensein einer Region, in der verschiedene Arten von Metadaten wie Copyright-Informationen, rechtliche und Datenschutzerklärungen gefunden werden können. Es wird normalerweise für die Fußzeile einer Site verwendet. Die Formularmarkierungsrolle gibt ein Formular an, das auf Benutzereingaben wartet. Für Suchformulare sollten Sie verwenden Die Suchfunktion ist ziemlich selbsterklärend. Sie soll assistiven Technologien dabei helfen, die Suchfunktionen einer Website zu ermitteln. Sie können die Orientierungsfunktion der Anwendung für eine Region verwenden, die Sie als Web-App und nicht als Webdokument deklarieren möchten. Es wird nicht empfohlen, diese Website in herkömmliche Websites einzubinden, da Hilfstechnologien darauf hingewiesen werden, vom normalen Browsing-Modus in den Application-Browsing-Modus zu wechseln. Sie sollten diese Wahrzeichenrolle nur mit großer Sorgfalt verwenden. Mit Rollen können Sie die Bedeutung von HTML-Tags definieren. Status und Eigenschaften bieten dem Benutzer zusätzliche Informationen zur Interaktion mit diesen. Beide Zustände und Eigenschaften sind mit gekennzeichnet Aria-vorangestellte Attribute mit der Syntax Arie-*. Die bekanntesten ARIA-Attribute sind wahrscheinlich die für die Aria erforderliche Eigenschaft und der aria-geprüfte Zustand. Aria-erforderlich ist a Eigentum weil es ein permanentes Merkmal eines Eingabeelements ist (d. h. der Benutzer muss es ausfüllen), während das Kontrollkästchen "aria-geprüft" ist Zustand weil ein Kontrollkästchen seinen Wert häufig aufgrund von Benutzerinteraktionen ändert. Zustände und Eigenschaften erfordern manchmal Tokenwerte (eine begrenzte Menge vordefinierter Werte). Beispielsweise kann die Eigenschaft aria-live drei verschiedene Werte haben: aus, höflich, durchsetzungsfähig. Die Syntax in diesem Beispiel sieht folgendermaßen aus: In anderen Fällen werden die Werte der Aria-vorangestellten Attribute durch dargestellt Streicher, Zahlen, ganze Zahlen, ID-Referenzen oder wahr falsch Werte. Verwenden Sie Beziehungsattribute, um Beziehungen zwischen verschiedenen Elementen Ihrer Site anzuzeigen, die nicht anderweitig aus der Dokumentstruktur ermittelt werden können. Zum Beispiel die Nachdem Sie eine ARIA-Orientierungsrolle für einen wahrnehmbaren Bereich auf Ihrer HTML-Seite festgelegt haben, kann dies unterstützende Technologien erheblich verbessern, wenn Sie die mit ARIA versehenen Zustände und Eigenschaften von untergeordneten Elementen entsprechend den Ereignissen auf dem Bildschirm ändern. Dies kann entscheidend sein, wenn Benutzer mit der Site interagieren müssen, z. B. ein Formular ausfüllen oder eine Suchabfrage ausführen. Die generelle Faustregel des Accessibility-Designs lautet, dass der aktuelle Status der Benutzeroberfläche immer von assistiven Technologien wahrgenommen werden muss. Wenn der Benutzer beispielsweise eine Option in einem Formular auswählt, muss diese auch für assistive Technologien ausgewählt angezeigt werden. Dies kann leicht erreicht werden, indem der mit aria ausgewählte Zustand mit der folgenden Syntax verwendet wird: Die WAI-ARIA Authoring Practices-Richtlinie von W3C kann Ihnen viele andere großartige Ideen geben, wie Sie die visuellen und zugänglichen Schnittstellen Ihrer Website richtig aufeinander abstimmen können. Die Verwendung von ARIA-Rollen und -Attributen kann manchmal überflüssig sein. Wenn Sie semantische Tags von HTML5 verwenden, z Zum Beispiel ist es nicht notwendig, die bilden Wahrzeichen Rolle, um die zu definieren Wenn du also schon die versteckt HTML-Attribut für eine Formulareingabe. Es ist nicht erforderlich, das Arie versteckt Status, da der Browser es standardmäßig enthält.. Letzteres wurde zu den W3C-Spezifikationen hinzugefügt, um das W3C abzubilden Main ARIA-Wahrzeichenrolle für ein semantisches HTML-Element. Rolle =”Navigation”
Rolle =”komplementär”
role = "main". Verwandte Beiträge, beliebte Artikel, neueste Kommentare sind typische Beispiele für eigenständige ergänzende Inhalte.Rolle =”contentinfo”
Rolle =”bilden”
role = "Suche" stattdessen.Rolle =”Suche”
Rolle =”Anwendung”
Staaten und Eigenschaften
Die Syntax von Aria-vorangestellten Attributen
So verwenden Sie ARIA-Zustände und -Eigenschaften
1. Erstellen Sie Beziehungen zwischen Elementen mit Beziehungsattributen
Arie beschriftetvon Diese Eigenschaft gibt das Element an, mit dem das aktuelle Element gekennzeichnet wird.Arie beschriftetvon - Unter anderem können Sie auf folgende Weise Überschriften an ARIA-Markierungsregionen binden:Dies ist eine Überschrift
Hauptinhalt… 2. Synchronisieren Sie Zustände und Eigenschaften mit dem Lebenszyklus des Elements
3. Passen Sie die visuellen und die zugänglichen Schnittstellen an
.Überbeanspruchen Sie ARIA nicht
oder , Moderne Webbrowser fügen standardmäßig die entsprechende ARIA-Semantik hinzu. In diesem Fall hat es keinen Sinn, die ARIA-Orientierungsrollen separat festzulegen. Element. Anstatt der Syntax ist es vollkommen genug, um nur zu verwenden . Es ist auch überflüssig, die nativen Attribute von HTML zusammen mit dem entsprechenden ARIA-Attribut zu verwenden.
