• ▷ Was ist WAI ARIA-Markup? Zugänglichkeit für Anfänger

<>

La accesibilidad es un tema importante en el mundo online de hoy. Hoy en día, tener un sitio Netz que mucha gente lucha por navegar es considerado inaceptable.

El marcado de ARIA es un paso en la dirección correcta. Es una respuesta a la pregunta de cómo puede hacer que su sitio web Sein más usable para las Personen con discapacidades.

¿Qué es ARIA? Un conjunto de atributos de código que amplían las capacidades de HTML y facilitan la optimización de su sitio para los lectores de pantalla. Para ello, hace que partes de su sitio web sean visibles para la tecnología de asistencia, con la que, de lo contrario, estos dispositivos no podrían interactuar en absoluto.

Sind Sie bereit, ARIA in Ihre Website aufzunehmen? Oder einfach nur neugierig, mehr über das Thema zu erfahren? In diesem Artikel erklären wir, was ARIA ist, wie Sie Ihre Website zugänglich machen und geben Ihnen die Ressourcen, um mehr über diese unschätzbare Technologie zu erfahren.

Warum sollten Sie Ihre Website zugänglich machen?

Einige Leute fragen sich vielleicht: Warum sich um die Barrierefreiheit im Internet kümmern? Ist es wirklich wichtig, darauf hinzuweisen, dass die Ressourcen zum Erlernen von Spezifikationen wie ARIA eingesetzt werden? Hat die Erstellung einer barrierefreien Website wirklich einen großen Einfluss?

Behinderung ist keine Seltenheit

Eigentlich ja. Behinderung ist nicht so selten. 18.7% von Amerikanern haben irgendeine Form von Behinderung. Obwohl nicht alle diese Faktoren Ihre Fähigkeit zur Interaktion mit dem Web beeinträchtigen, handelt es sich immer noch um eine erstaunliche Zahl, die nur Personen aus den USA umfasst.

3. Der 3% von Amerikanern hat gleichzeitig eine Sehstörung. Dies bedeutet, dass sie möglicherweise Probleme beim Anzeigen von Websites haben und sich auf Tools wie Screenreader verlassen können. Dies ist gleichzeitig ein erheblicher Prozentsatz Ihrer potenziellen Nutzerbasis und umfasst ältere Menschen und Menschen mit vorübergehenden Behinderungen.

Menschen mit Behinderungen brauchen das Internet genauso wie alle anderen. Viele nutzen es, um einzukaufen, Kontakte zu knüpfen und Informationen zu finden. Manchmal ist es Ihre Haupt- oder sogar Ihre einzige Möglichkeit, dies zu tun.

Die 54% von Menschen mit Behinderungen sind online, und obwohl diese Zahl geringer ist als die der allgemeinen Bevölkerung, ist sie immer noch ein bedeutender Teil.

A la vez, es 2019. En estos tiempos, debemos esforzarnos por incluir a todos los grupos de usuarios lo mejor que podamos. Dar a las personas con discapacidad acceso ilimitado para navegar por la web debería ser un Ziel importante para cualquier desarrollador web.

Gleichzeitig bringt es sogar persönliche Vorteile mit sich.

La accesibilidad se superpone con un buen Web-Design y SEO

Eine Website, die den Barrierefreiheitsstandards folgt, verwendet häufig gute Webdesign-Prinzipien, funktioniert am besten auf Mobilgeräten und hat einen hohen Stellenwert bei der Suchmaschinenoptimierung.

Beispielsweise enthält einer der WCAG-Standards keine automatische Wiedergabe langer Audioclips, ohne dass der Ton gestoppt werden kann. Dies ist bereits ein großes No-No für Webdesigner. Ein weiterer Standard besteht darin, einen ausreichenden Farbkontrast zwischen den Elementen bereitzustellen. Farben, die auf einer Website gemischt werden, weisen häufig auf eine schlechte Palette hin.

Das Befolgen der Richtlinien zur Barrierefreiheit führt daher zu einer Website, die besser aussieht und einfacher zu verwenden ist. Kann jemand "Win-Win" sagen?

La accesibilidad es al mismo tiempo una parte importante del SEO. Evitarlo puede llevar a penalizaciones de ranking de Google y otros Suchmaschinen. Pero agregar texto alternativo a sus imágenes, incluyendo controles de teclado en items interactivos, y usar Überschriften ayuda a los visitantes discapacitados y le da un impulso de SEO.

Wie Sie sehen, ist es eine gute Idee, Ihre Website zugänglich zu machen, da sie alle Benutzergruppen betrifft. Wenn Sie eine Website entwerfen möchten, die allen eine gute Erfahrung bietet, sollten Sie alles tun, um den Ausschluss von Menschen mit Behinderungen zu vermeiden.

Sie können ARIA in Ihr Design implementieren, damit Benutzer mit Bildschirmleseprogrammen sich besser auf Ihrer Website zurechtfinden.

Was sind Bildschirmleser?

Un lector de pantalla es un programa que lee el Inhalt de una página o documento en voz alta mientras le posibilita navegar por él utilizando el teclado. Cualquiera puede descargar uno a su computadora, y hay una gama de programas disponibles gratuitos o de pago.

Einige von ihnen helfen gleichzeitig beim Navigieren auf dem Desktop und anderen Programmen sowie auf Websites. Sie können Text und Bilder für Sehbehinderte vergrößern, und einige können eine Braillezeile erzeugen, die aktualisiert werden kann. In diesem Handbuch wird die Funktionsweise von Bildschirmleseprogrammen erläutert.

Ohne Screenreader hätten sehbehinderte Menschen Schwierigkeiten, einen Computer und das Internet zu nutzen, oder könnten sie überhaupt nicht benutzen.

El marcado de ARIA juega un papel importante en el funcionamiento de estas herramientas. Proporciona información adicional, dándoles más opciones y la capacidad de interactuar con partes de la Benutzeroberfläche que de otro modo serían invisibles para ellos.

Aber was genau ist ARIA und wie können Sie Ihre Website verbessern, indem Sie sie einbinden? Lassen Sie uns eine kurze Zusammenfassung dieser Spezifikation und ihrer Funktionsweise geben.

Was ist ARIA?

ARIA son las siglas de Accessible Rich Internet Applications. Es un conjunto de atributos que proporcionan un contexto adicional para la forma en que se presenta una página web y lo que hay dentro de ella. En otras palabras, proporcionan más información sobre partes de la interfaz de Nutzername, como alertas emergentes, menús o incluso secciones completas de la página.

Si alguna vez ha visto un sitio web con las herramientas de desarrollo de Browser, es viable que lo haya visto antes.

So zitieren Sie die Mozilla-Dokumentation: "Das ergänzende Orientierungspapier wird verwendet, um einen unterstützenden Abschnitt zu kennzeichnen, der sich auf den Hauptinhalt bezieht, aber bei Trennung unabhängig sein kann." Auf diese Weise können Bildschirmleser im Grunde genommen anhand dieses Teils des Markups erkennen, um welchen Teil des Designs es sich handelt.

En consecuencia, ARIA le posibilita crear interfaces y Widgets accesibles sin tener que cambiar su aspecto ni su comportamiento en la parte frontal. La mayoría de las personas ni siquiera podrán darse cuenta de que el margen de beneficio está presente. Pero agregue un poco de código, y los lectores de pantalla podrán interactuar sin problemas con su interfaz.

Wann ist ARIA wirklich notwendig?

Por defecto, los lectores de pantalla pueden comprender la mayoría de los items HTML y HTML5. Si tiene un sitio muy simple y estático, es viable que no necesite llevar a la práctica ARIA en absoluto. Pero algunos items Javascript, dinámicos e interactivos no pueden ser vistos por los lectores de pantalla, y aquí es donde entra en juego el marcado.

Abgesehen davon sollten Sie ARIA nicht verwenden, wenn auf das, was Sie definieren, bereits zugegriffen werden kann. Als Beispiel das HTML-Element es wird von Bildschirmlesern erkannt. Sie benötigen keine ARIA-Taste. Sie sollten Funktionen nur einschließen, wenn Sie keine unterstützenden gerätekompatiblen HTML-Elemente verwenden.

In diesem Sinne muss ich technisch gesehen die ergänzende Rolle nicht zu einem separaten Element hinzufügen, da beide dasselbe beschreiben. Trotz allem wird diese Gewinnspanne wie im vorherigen Fall sehr häufig gefunden.

Bist du immer noch verwirrt? Lassen Sie uns etwas mehr darüber sprechen, wie ARIA funktioniert.

ARIA verstehen

Mit ARIA kann es sehr komplex werden, und es ist leicht, überfordert zu werden. Aber die Grundlagen sind ziemlich leicht zu zerlegen. Sobald Sie sie verstanden haben, lernen Sie im Handumdrehen fortgeschrittenere Konzepte.

Das ARIA-Markup besteht aus drei Attributen: Rollen, Status und Eigenschaften.

ARIA-Rollen

Rollen definieren Elemente auf einer Seite, z. B. Schaltflächen und Kontrollkästchen. Sie helfen Bildschirmlesern dabei, festzustellen, was die Teile einer Seite tun, und sie haben vier verschiedene Unterkategorien: Orientierungspunkte, Dokumente, Widgets und abstrakte Funktionen.

• Hauptmerkmale - Teilen Sie eine Site in verschiedene Abschnitte auf, z. B. Hauptinhalt, Navigation und ergänzende Bereiche. Dies kann Ihren Besuchern helfen, sich besser zu orientieren und auf einer Seite leichter zu finden, wonach sie suchen.
• Dokumentfunktionen- Beschreiben Sie bestimmte Abschnitte innerhalb einer Seite, z. B. Artikel, Dokumente, Listen und Zeilen.
• Widget-Rollen - Bestimmen Sie Elemente und Schnittstellen. Registerkarten, Textfelder, Warnungen und Schaltflächen sind einige der Elemente, die ARIA beschreiben kann. Wenn HTML diese Elemente nicht definiert oder Sie ein Widget verwenden, das aus vielen verschiedenen Teilen besteht, können die Rollen der Widgets einen Beitrag leisten.
• Abstrakte Rollen – Estos son utilizados por el Browser. No debes de preocuparte por ellos.

Zustände und Eigenschaften

Zustände und Eigenschaften arbeiten gleichwertig miteinander. Einmal festgelegte Eigenschaften ändern sich selten, da sie nur Beziehungen zu anderen Elementen beschreiben. Zustände sind dynamisch und können sich von selbst oder durch Benutzerinteraktion ändern.

Ein Beispiel für einen Status ist Aria-Besetzt, der dem Bildschirmleser mitteilt, dass das Element aktualisiert wird. Ein anderes ist das Drücken der Arie, das anzeigt, dass eine Taste gedrückt wurde. Dies sind Elemente, die sich aktiv ändern können.

Abgesehen davon enthalten die Eigenschaften Attribute wie aria-valueemax, mit dem die maximale Anzahl in einem Bereichswähler festgelegt wird, oder aria-haspopup, das angibt, dass ein Element ein Popup auslöst. Es ist unwahrscheinlich, dass sie aktualisiert werden.

Und das sind die Grundlagen von ARIA. Viel einfacher, wenn es einmal kaputt geht, oder? Aber Sie wären überrascht, wie viel Sie damit machen können.

Weitere Informationen finden Sie in der offiziellen WAI-ARIA-Dokumentation oder in der Entwicklereinführung von Google für Anfänger.

ARIA-Zugänglichkeitstests

Sobald Sie ARIA implementiert haben, möchten Sie möglicherweise sicherstellen, dass alles ordnungsgemäß funktioniert. Wie sieht Ihre Website auf Hilfsgeräten tatsächlich aus?

Am naheliegendsten ist es, einen kostenlosen Bildschirmleser wie NVDA herunterzuladen, sich die Augen zu verbinden und in die Stadt zu fahren. Dies gibt Ihnen die volle Erfahrung.

Gleichzeitig können Sie die Augenbinde überspringen und mit der Maus über die Elemente fahren, die Sie auf ARIA-Attribute überprüfen möchten. Sie werden jedoch wichtige Informationen verpassen, z. B. wie schwierig es ist, diese Elemente zu finden.

Auch dies ist keine perfekte Darstellung der Verwendung eines Bildschirmlesegeräts, da das Erlernen viel Übung erfordert. Bitten Sie daher am besten echte Benutzer, Ihre Website zu testen.

Gleichzeitig gibt es viele Inspektionstools wie den Firefox Accessibility Inspector, mit dem Sie Informationen zu den ausgewählten Elementen anzeigen können. WAVE weist auf mehrere Fehler hin, einschließlich derer mit ARIA.

Schließlich ist diese ARIA-Widget-Checkliste ein großartiges Tool für die Entwurfsprüfung.

Andere Möglichkeiten, um Ihre Website zugänglich zu machen

ARIA-Marken sind nur der Anfang, wenn es um die Barrierefreiheit im Internet geht. Es gibt viele andere Richtlinien, die Sie befolgen müssen, um Ihre Website für Menschen mit Seh-, Hör-, Mobilitäts- und anderen Beeinträchtigungen nutzbar zu machen.

Hier sind einige Beispiele für eine Handvoll Richtlinien, die befolgt werden müssen.

• Der Inhalt der Website reagiert und funktioniert beim Erweitern.
• Die Site und ihre Elemente können mit einer einzigen Tastatur verwendet werden.
• Der Text wird dem Hintergrund angemessen gegenübergestellt.
• Alle Nicht-Text-Inhalte enthalten Textalternativen, einschließlich Audio- und Video-Untertitel / Transkripte.
• Stellen Sie sicher, dass die meisten Bilder beschreibenden Alternativtext und dekorative Bilder leeren Alternativtext enthalten.
• Keine Informationen werden ausschließlich durch Bild, Ton oder Farbe übertragen.
• Vermeiden Sie die automatische Wiedergabe von Audio, ohne dass eine Stummschalttaste erforderlich ist.
• Elemente, die sich automatisch bewegen, können angehalten oder gestoppt werden.

Das ist nur eine Handvoll von dem, was Sie tun können, um Ihre Website wirklich zugänglich zu machen. Wenn Ihnen dies zu viel erscheint, versuchen Sie es mit der einfachen Checkliste für Barrierefreiheit. Verwenden Sie es als Grundlage für Ihr Design, bevor Sie mit den detaillierteren WCAG-Richtlinien fortfahren.

Machen Sie Ihre Website für alle nutzbar

Das Vermeiden von Barrierefreiheit kann sich negativ auf Ihre Benutzerbasis und sogar auf Ihren Ruf auswirken. Menschen mit Behinderungen machen einen großen Prozentsatz der Webnutzer aus, und es ist wichtig sicherzustellen, dass der größte Teil des Internets nicht für sie geschlossen ist.

Durch die Implementierung von Barrierefreiheitsstandards, einschließlich ARIA-Markup, können Benutzer von Bildschirmleseprogrammen mehr vom Web sehen und ihre Website so weit wie möglich erweitern.

Sobald es wichtig ist, dass Sie wissen, wie man Spezifikationen wie ARIA einbezieht, wird die Barrierefreiheit viel weniger verwirrend erscheinen. Wenn Sie die Nutzung Ihrer Website für alle Benutzer vereinfachen, sind mehr Menschen bereit zu bleiben. Es gibt also keinen Grund, ARIA nicht zu verwenden, wenn Ihre Website dies benötigt. Viele Themen bieten es vorerst sofort an.

Diese Standards helfen nicht nur Menschen mit Behinderungen, sondern allen. Richtlinien zur Barrierefreiheit überschneiden sich häufig mit guten Webdesign-Praktiken und werden schnell implementiert, sobald sie bekannt sind.

Denken Sie also daran, ARIA bei der Entwicklung einer Website einzubeziehen. Es ist besser für Sie und für alle Ihre Benutzer.

Haben Sie jemals Probleme beim Navigieren auf Websites gehabt? Was könnten Webdesigner und Entwickler tun, um die Situation zu verbessern? Teilen Sie uns Ihre Erfahrungen mit der Online-Zugänglichkeit (oder deren Fehlen) in den Kommentaren mit.!

2ZuOwar