Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Accessibility
Code

ARIA praxisorientiert: Barrierefreiheits-Rezepte für Web-Apps

by
Length:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Hands-on With ARIA: Accessibility for eCommerce
Best Practices for ARIA Implementation

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

In der verwirrenden Welt der Webanwendungen kann ARIA dazu beitragen, die Zugänglichkeit und Benutzerfreundlichkeit für Ihre Kreationen zu verbessern. HTML ist nicht in der Lage, viele Arten von Beziehungen zwischen Elementen auf der Seite zu behandeln, aber ARIA ist ideal für fast jede Art von Setup, die Sie sich ausrechnen können. Werfen wir einen Blick auf das, was ARIA ist, wie es auf Ihre Web-App angewendet werden kann, und einige schnelle Rezepte, die Sie für Ihre eigenen Websites verwenden können.

Grundlagen von ARIA

ARIA, auch WAI-ARIA genannt, steht für die Web Accessibility Initiative –Accessible Rich Internet Applications. Diese Initiative, die vom W3C aktualisiert wurde, zielt darauf ab, Entwicklern einen neuen Satz von Schemata und Attributen zu geben, um ihre Kreationen zugänglicher zu machen. Es zielt speziell darauf ab, die inhärenten Lücken zu schließen, die HTML hinterlassen hat. Wenn Sie nicht wissen, was es bereits tut, sollten Sie einen Blick auf unsere Grundlagen zu ARIA werfen. Vielleicht interessieren Sie sich auch für unsere Stücke auf ARIA für die Homepage und ARIA für eCommerce.

Kurz gesagt, ARIA hat drei Hauptmerkmale, auf die wir uns konzentrieren werden:

  1. Erstellen von Beziehungen außerhalb der Eltern-Kind-Zuordnung: HTML erlaubt nur Beziehungen zwischen übergeordneten und untergeordneten Elementen, aber die Zuordnungen, die wir definieren möchten, sind nicht immer ineinander verschachtelt. Mit ARIA können wir Elementbeziehungen außerhalb dieser Einschränkung definieren.
  2. Definieren erweiterter Steuerelemente und Interaktivität: HTML deckt viele grundlegende UI-Elemente ab, aber es gibt viele erweiterte Steuerelemente, die im Web verwendet werden und außerhalb ihrer visuellen Komponente schwer zu definieren sind. ARIA hilft dabei.
  3. Zugriff auf "Live"-Bereichsaktualisierungsattribute: Das aria-live-Attribut gibt Bildschirmlesern und anderen Geräten einen Listener für den Inhalt auf der Seite. Dies ermöglicht eine einfachere Kommunikation von Änderungen des Inhalts auf dem Bildschirm.

ARIA- und Webanwendungen

Zuvor haben wir uns mit dem Hinzufügen von ARIA zu den gemeinsamen Elementen von eCommerce-Seiten und Website-Homepages befasst. Bei Web-Apps unterscheidet sich jedoch jede von ihnen drastisch von der letzten. Formulare und Funktionen wechseln zwischen jeder App und oft sogar zwischen Versionen derselben App. Aus diesem Grund behandeln wir unsere Implementierungen hier wie Rezepte in einem Kochbuch und nicht als umfassende Konvertierung einer Seite.

Wenn es um Web-Apps geht, ist die Absicht eines Benutzers im allgemeinen Sinne schwieriger zu erkennen. Mit eCommerce, egal auf welcher Website Sie sich befinden, ist es wahrscheinlich, dass die Besucher ein Produkt oder eine Dienstleistung kaufen möchten. Web-Apps dienen einer Vielzahl von Zwecken, daher konzentrieren wir uns stattdessen auf die Erstellung nuancierter Steuerelemente, die zugänglich und benutzerfreundlich sind.

Lassen Sie uns auf einige dieser Steuerelementtypen eingehen.

Steuern von Live-Updates mit Schaltflächen

Das erste Steuerelement, das wir betrachten werden, ist ein angezeigter Wert, der durch einen Tastendruck aktualisiert wird. Diese Steuerelementtypen werden häufig dort angezeigt, wo ein Element eine Menge anzeigt, die durch Schaltflächen mit der Bezeichnung "+" und "-" angepasst werden kann, aber viele Formen annehmen kann. Z. B. Pfeilschaltflächen, mit denen Sie durch vordefinierte Status wechseln können.

Eine Standardimplementierung kann einige Verständnisslücken für den Benutzer hinterlassen. Es ist unklar, welche Elemente die Schaltflächen beeinflussen, wie sie sich darauf auswirken und wann sich der Wert des Elements ändert.

Im Folgenden verwenden wir ARIA, um mithilfe des aria-controls-Attributs eine Verbindung zwischen den Schaltflächen und dem Wertanzeigeelement herzustellen. Dann machen wir die Verwendung der Schaltflächen klar, indem wir aria-label und HTML <label> verwenden. Schließlich verwenden wir die Aria-alert-Rolle und das aria-live-Attribut, um unseren Benutzer darüber zu informieren, wann der Wert aktualisiert wird.

Werfen wir einen Blick darauf, wie dieser Code aussieht:

ARIA Popups und Hover Tooltips

Beim Ausstatten einer Website mit ARIA ist es üblich, "progressive Barrierefreiheit" zu verwenden. Die Idee hinter diesem Begriff ist, dass es eine entmutigende Aufgabe ist, eine Website oder Web-App aus ihrer Basisform vollständig zugänglich zu machen. Um damit in einer Art und Weise umzugehen, die immer noch Fortschritte macht, können Sie neue Funktionen progressiv und iterativ implementieren.

Für einen Tooltip mit einem verwandten Popup oder Modal bedeutet dies, dass wir das Problem in zwei Schritte aufteilen können, die wir so weit wie möglich ausrollen können. In diesem Fall ist der Tooltip, um den es hier geht, das übliche Bild eines kleinen Fragezeichens, das beim Überfahren mit der Maus zusätzliche Informationen öffnet.

Um Benutzern mitzuteilen, dass es sich bei dem Bild eines Fragezeichens tatsächlich um einen Tooltip handelt, haben wir es mithilfe einer geeigneten Rolle wie folgt definiert:

Es gibt jedoch einige Probleme mit dieser Implementierung. Benutzer können immer noch nicht wissen, dass das Überfahren über den Tooltip ein Popup mit weiteren Informationen initiiert. So können wir das zu unserem Code hinzufügen:

Barrierefreie Eingabe-Tooltips

Anstelle eines hover-basierten Tooltips ist es auch üblich, dass eine Web-App Formulare verwendet, in denen jede Eingabe über einen eigenen zugeordneten Tooltip verfügt.

Ohne zusätzliches ARIA-Markup kann es schwierig sein zu sagen, welche Tooltips für welche Eingabe für einen Benutzer gelten. Wenn Sie diese Beziehung nicht haben, kann ihr Hilfstext in einigen Fällen nutzlos werden.

Um dies zu korrigieren, werden wir unsere Tooltips in ihre eigenen Elemente einpacken. Jedes dieser Elemente kann in der Nähe seiner zugehörigen Eingabe verschachtelt werden, seine Beziehungen zu ARIA herstellen lassen und dann mit JavaScript (oder nur CSS, wenn Sie geschickt sind) ausgelöst werden.

So könnte das aussehen:

Statuswarnungen

"Unser Dienst ist derzeit aus", "Ihr Konto ist gesperrt", und zugehörige Statuswarnungen werden häufig von Web-Apps verwendet und zeigen wichtige Informationen für Benutzer an. Ohne ARIA können sie innerhalb der Informationen auf einer Seite begraben werden und eine Vielzahl von Problemen verursachen.

Mithilfe der ARIA-alert-Rolle und des aria-live-Attributs können wir sicherstellen, dass unsere Benutzer Probleme schnell kennen, sobald sie auf einer Seite ankommen.

Wir können diese Art von Statuswarnung wie folgt einrichten:

Erstellen einer Symbolleiste

Schließlich werfen wir einen Blick auf ein anderes gängiges Steuerelement, das in Web-Apps verwendet wird: die Symbolleiste. Für unsere Zwecke markieren wir eine Symbolleiste, die so funktioniert: Unsere Web-App zeigt eine große Menge an Daten, die in einer Tabelle ausgerichtet sind. Über dieser Tabelle verfügt unsere Symbolleiste über mehrere Schaltflächen, mit denen Benutzer die Tabelle auf verschiedene Weise sortieren können. Diese Schaltflächen enthalten klassische Sortieroptionen wie A bis Z und Z bis A.

Relativ gesehen, hinterlassen diese einige Probleme hinsichtlich der Zugänglichkeit. Erstens ist es nicht klar, dass diese Schaltflächen die Tabelle beeinflussen - wir werden dies mit dem Attribut aria-controls lösen. Es ist auch nicht klar, dass die Schaltflächen miteinander verbunden sind, was eine nützliche Information für unsere Benutzer sein kann. Um dies zu definieren, verwenden wir die toolbar-Rolle Schließlich weiß ein Benutzer nicht unbedingt, welche Taste zuletzt gedrückt wurde. Um dies zu korrigieren, verwenden wir das aria-pressed-Attribut.

Bei der Verwendung des aria-pressed-Attributs ist es wichtig zu beachten, dass Sie diese Elemente aktualisieren müssen, wenn der Benutzer mit ihnen interagiert. Dies erfordert wahrscheinlich das Ändern der Attribute über JavaScript oder jQuery.

So sieht unser Symbolleistencode aus:

Hinzufügen von ARIA zu Ihren eigenen Web-Apps

Mit dieser Handvoll neuer Kontrollschemata und Beziehungen in Ihrem Repertoir sind Sie auf dem besten Weg, Ihre eigene Webanwendung vollständig zugänglich zu machen! Nachdem Sie diese neuen Markups hinzugefügt haben, denken Sie darüber nach, wie Sie diese Attribute auf andere Teile Ihrer Benutzerschnittstelle anwenden können, um die Benutzerfreundlichkeit Ihrer Kreation zu maximieren.

Gibt es Attribute, Rollen oder andere Funktionen von ARIA, die Sie gerne kennen lernen möchten? Oder haben Sie vielleicht Fragen zu Ihren eigenen Implementierungen oder Korrekturen für diesen Artikel? Nehmen Sie Kontakt über den Kommentarabschnitt unten oder durch Tagging von kylejspeaker auf Twitter auf!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.