Advertisement
  1. Code
  2. ARIA

Bewährte Methoden für die ARIA-Implementierung

by
Read Time:7 minsLanguages:
This post is part of a series called Web Accessibility With ARIA.
Hands-on With ARIA: Accessibility Recipes for Web Apps

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

Anlässlich des Internationalen Tages der Menschen mit Behinderungen betonen wir heute die Barrierefreiheit hier im Envato Tuts+.

ARIA ist eine wichtige Funktion, die Webentwickler verwenden können, um ihren Zugriff auf ihre Websites zu erleichtern. In früheren Stücken haben wir darüber gesprochen, wie Sie ARIA implementieren können, egal, ob Sie dies auf einer eCommerce-Website oder einer Nischenseite tun.

Bisher lag der Schwerpunkt dieser Serie auf der Implementierung von ARIA, z. B. wie einem Element eine Rolle hinzugefügt wird oder wie leichter zugängliche Formulare codiert werden. Mit diesem Stück wird sich der Fokus ein wenig auf andere Aspekte der Online-Zugänglichkeit verlagern, wie zum Thema warum und wann wir ARIA verwenden sollten. Wir behandeln auch einige häufig gestellte Fragen zu früheren Beiträgen in der gesamten Serie.

In Ordnung, fangen wir an!

Was ist ARIA?

Aria ist eine Erweiterung der aktuellen Webentwicklungssprachen (hauptsächlich HTML), die eine verbesserte Zugänglichkeit für Endbenutzer ermöglicht.

Aber was genau bedeutet das?

Erweitern von HTML mit ARIA

HTML weist einige Schwachstellen auf, wenn es darum geht, wie Elemente definiert werden und wie Elemente miteinander verknüpft werden können.

HTML-Elemente (z. B. das <div> Element (Tag)) sind zu weit gefasst, um für jemanden nützlich zu sein, der mit einer Bildschirmsprachausgabe auf einer Website navigiert, oder ein Element kann zu viele mögliche Bedeutungen haben, um interpretiert zu werden (z. B. könnte ein Bild auch als Schaltfläche verwendet werden). ARIA fügt HTML-Elementen zusätzliche Attribute hinzu, um Definitionen zu ermöglichen, die über die bereits vorhandenen Markupsprache gelegt werden können, wodurch bei Bedarf Klarheit geschaffen wird.

Der zweite große Vorteil ist das Verhältnis der Elemente. Mit HTML ist jedes Element als untergeordnetes Element und/oder übergeordnetes Element eines anderen Elements vorhanden. Aber diese Struktur erfasst nicht alle semantischen Beziehungen. Dies kann dazu führen, dass Szenarien wie ein Controller und das Steuerelement, das er steuert, nicht eindeutig zugeordnet sind, wenn sie in separaten div-Containern platziert werden. Dies wird in komplexen Standortstrukturen oder beim Ändern des DOM mit JavaScript immer wichtiger.

Über diese beiden Vorteile hinaus gibt es eine Vielzahl von anderen, die dazu neigen, weniger Aufmerksamkeit zu erhalten, aber dennoch eine ausgezeichnete Funktionalität bieten.

ARIA für erweiterte Barrierefreiheit

Obwohl ein Großteil des Webs auf eine einfacher zu bedienende UX drängt, stellt ARIA eine wichtige Rolle für andere dar, die möglicherweise nicht in der Lage sind, ihre Struktur zu vereinfachen. Es gibt Fälle, in denen eine Website möglicherweise Baumsteuerelemente erfordert, z. B. die, die häufig von Dateisystemen verwendet werden. Durch die Bereitstellung zusätzlicher Strukturen stellt ARIA diese erweiterten Steuerelemente Personen zur Verfügung, die andernfalls möglicherweise nicht darauf zugreifen können – insbesondere für Benutzer, die eine Website mit Drag-and-Drop-Funktionen erstellen möchten.

Eine weitere wichtige Funktion ist, dass ARIA nicht nur HTML erweitert – es kann auch verwendet werden, um andere, weniger barrierefreie Technologien für mehr Benutzer verfügbar zu machen. Dies ist häufig der Fall für Personen, die AJAX oder DHTML für ihre Webanwendungen verwenden.

Und wirklich, dies kratzt nur an der Oberfläche. Wenn Sie mehr über die Funktionen, Attribute und andere nützliche Parameter erfahren möchten, werfen Sie einen Blick auf die WAI-ARIA-Übersicht.

Warum sollten wir ARIA verwenden?

Was die Barrierefreiheit betrifft, so hat sich ARIA zu einem der am weitesten verbreiteten Standards entwickelt, wobei mehr als 25 % der weltweit führenden Websites ihn bis zu einem gewissen Grad nutzen.

Der größte Segen der Verwendung von WAI-ARIA ist, dass es die Zugänglichkeit auf Ihrer Website erhöht. Benutzer, die auf Bildschirmleseprogramme angewiesen sind, eine Sehschwäche haben oder alternative Schnittstellen für das Web nutzen, profitieren stark von der Implementierung – und in einigen Fällen sind sie ohne sie möglicherweise nicht in der Lage, eine Website in vollem Umfang zu nutzen. Für viele wird Barrierefreiheit als ein zentraler Wert des Webs angesehen, und als Entwickler sollten wir uns bemühen, sie, wo immer möglich, bereitzustellen.

Neben dem Best-Practice-Aspekt gibt es auch einen geschäftlichen Anreiz, ARIA umzusetzen. Mit 2-3% der Amerikaner mit irgendeiner Form von Sehschwäche, gibt es einen erheblichen Teil der meisten Märkte, die von der Verwendung des Standards profitieren würden. Darüber hinaus wird es von Vorteil sein, dass eine Implementierung jetzt von Vorteil ist, da die Akzeptanz von ARIA zunehmend unter nicht standardmäßigen Web-Schnittstellen wächst und sich in Geräte wie Smart Speakers einschleicht.

Bewährte Methoden für die ARIA-Implementierung

Bisher haben wir uns in dieser Serie auf die tatsächlichen Implementierungsmethoden konzentriert. Mit den Grundlagen, wie Sie ARIA jetzt zu Ihrer Website hinzufügen, werfen wir einen Blick auf einige wichtige Richtlinien für die Zusammenstellung Ihrer eigenen Implementierung.

Verwenden eines dezenten Ansatzes

Eine gute Implementierung von ARIA erfordert nicht bei jeder Gelegenheit zusätzliche Attribute und Rollen.

Wenn möglich, ist es ideal, die geringste Menge an zusätzlichem Code zu verwenden, um die notwendigen Informationen zu vermitteln. Beispielsweise ähnelt die Überverwendung von ARIA dem, ob die Homepage Ihrer Website eine vollständige Sitemap für einen visuellen Benutzer ist. Personen, die Bildschirmleseprogramme verwenden, werden von der Anzahl der Benachrichtigungen und zusätzlichen Markups auf einer Seite überwältigt, die ARIA übermäßig nutzt und das Gegenteil von dem erreicht, was wir wollten.

Die Bereitstellung von genügend zusätzlichem Markup, um den Kontext Ihrer wichtigen Elemente klar zu machen, ist das Ziel, und alles, was darüber hinausgeht, ist wahrscheinlich nicht notwendig.

Vermeiden von Redundanz (insbesondere bei Verwendung von HTML5)

Während der vorherigen Beiträge in dieser Serie haben wir ziemlich viel über das role-Attribut gesprochen. Wir haben es an jedem Ort platziert, für den wir wollten, dass sich der Benutzer dessen bewusst ist. Es gibt jedoch eine wichtige Ausnahme, über die wir vorher nicht gesprochen haben, und das ist die Notwendigkeit, Redundanz zu vermeiden.

Wenn ein Element, dem Sie ARIA hinzufügen möchten, bereits klar definiert, was es ist, können Sie das Hinzufügen von ARIA überspringen. Warum ist das so? Da ARIA den vorhandenen Code erweitern soll, um ihn besser lesbar zu machen, ist Code in einigen Fällen bereits klar, strukturiert und leicht verständlich.

Dies geschieht häufig für Personen, die Elemente verwenden, die in HTML5 eingeführt wurden. Wenn Sie z. B. das <button>-Element verwenden, müssen Sie das Attribut role="button" nicht mehr hinzufügen, da die Rolle bereits explizit durch den HTML-Code definiert ist.

Testen mit einem Bildschirmlesegerät

Ein weiterer Schlüssel zum Erstellen einer guten ARIA-Implementierung besteht darin, sicherzustellen, dass Sie Ihre Website mit einer oder zwei Bildschirmleseprogrammen testen. Sie werden wahrscheinlich überrascht sein, wie sie funktionieren und wie einfach es ist, Ihre Website durch Zufall zu stören.

Viele ARIA-Attribute können Benachrichtigungen oder Warnungen für den Endbenutzer erstellen, und wenn Sie einen Aria-Live-Inhaltsbereich verwenden, der sich alle 10 Sekunden ändert, ist es möglich, dass die Implementierung die Nutzung Ihrer Website erschwert.

Iterative Barrierefreiheit für das Web

Wenn Sie Ihrer Website zusätzliche Barrierefreiheitsmaßnahmen hinzufügen, sollten Sie sich daran erinnern, dass es sich nicht um eine Alles-oder-Nichts-Aufgabe handelt. Sie müssen nicht Ihre gesamte Website in einem Versuch vollständig auffüllen, und iterative Ergänzungen sind wahrscheinlich der beste Weg, den man gehen kann.

Mit großen Inhaltsbereichen und Navigationen zu beginnen und dann langsam über die Website weiter machen ist eine solide Strategie, es im Laufe der Zeit zu vervollständigen. Selbst wenn Sie 15 oder 30 Minuten pro Monat planen, um Ihrer Website nur ein wenig Barrierefreiheit hinzuzufügen, ist dies ein Schritt in die richtige Richtung.

Gute UX ist gute Zugänglichkeit (und umgekehrt)

ARIA ist kein Allheilmittel für Barrierefreiheitsprobleme. Es ist wichtig, einen starken Fokus auf gutes UX-Design zu legen, insbesondere wenn es um die Lesbarkeit von Texten als ein weiteres Werkzeug in Ihrem Werkzeugkasten für Barrierefreiheit geht.

Wenn Sie sich eingehender mit den Besonderheiten der Verwendung von UX und Entwicklung (außerhalb von ARIA) befassen möchten, sollten Sie sich die Richtlinien für die Barrierefreiheit von Webinhalten ansehen.

Sie können auch einen Blick auf unseren Complete Learning Guide zur Barrierefreiheit im Web werfen.

Häufig gestellte Fragen zu ARIA

Diese Serie über ARIA stieß bei vielen Lesern auf Resonanz und löste Diskussionen in der Community aus. Lassen Sie uns dies aufrecht erhalten! Die Sensibilisierung und Verbesserung dieser Tutorials sind der beste Weg, um Barrierefreiheit in den Vordergrund zu rücken.

Hier sind einige der häufigsten Fragen und Kommentare, die im Internet aufgetaucht sind:

Welche Browser unterstützen WAI-ARIA?

Ein Haufen! Die meisten modernen Browser unterstützen die Funktionen von ARIA bis zu einem gewissen Grad, obwohl dies leicht von Browser zu Browser variiert. Wenn Sie Besonderheiten für jeden Browser sehen möchten, können Sie ein Tool wie Can I Use? verwenden.

Can I Use ARIA resultsCan I Use ARIA resultsCan I Use ARIA results

Kann ARIA mit WordPress verwendet werden?

Yep! Ein paar WordPress-Themes haben ARIA bereits integriert, aber Sie können es zu jedem Design hinzufügen, für das Sie den Quellcode bearbeiten können. Darüber hinaus können Sie ARIA auch mit fast jedem Content Management System verwenden!

Was passiert, wenn ARIA nicht unterstützt wird?

Da ARIA das Rendering nicht beeinflusst, nichts! In den meisten Fällen wird es einfach vollständig ignoriert, wenn ein Gerät ARIA nicht unterstützt.

Machen Sie das Web zu einem besseren Ort!

Wenn Sie alle Artikel aus dieser Serie zusammenstellen, hoffe ich, dass Sie jetzt über alle Notwendigen verfügen, um die Zugänglichkeit Ihrer Website zu verbessern!

Wenn Sie Fragen, Feedback oder eine Korrektur für etwas haben, das ich gesagt habe, lassen Sie es mich bitte in den Kommentaren wissen!

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.