Site Accessibility Erste Schritte mit ARIA

Durch die Verwendung von Standard-HTML allein können moderne Web-Apps Benutzer mit Barrierefreiheitsanforderungen ausschließen. 

HTML ist die vorherrschende Auszeichnungssprache im Internet, die von fast 83% der vorhandenen Websites verwendet wird. Zwar gab es in den 25 Jahren seit seiner Gründung einige Änderungen, doch auch neuere Iterationen wie HTML5 und AMP lassen zu wünschen übrig, insbesondere was die Barrierefreiheit anbelangt. Hier kommt ARIA ins Spiel. In diesem Tutorial werde ich darüber sprechen, was ARIA ist, warum es für Ihre Website nützlich ist und wie Sie es auf Ihrer Website hinzufügen können.

Was ist ARIA??

ARIA, auch als WAI-ARIA bekannt, steht für Accessible Rich Internet Applications der Web Accessibility Initiative. Das vollständige Lastenheft finden Sie hier. Beachten Sie, dass das vollständige Spezifikationsdokument ziemlich dicht ist. Daher ist es eine gute Idee, zunächst diesen Beitrag zu lesen und einige der anderen Ressourcen zu prüfen, auf die ich unten verweise. 

Der Hauptzweck von ARIA besteht darin, eine erweiterte semantische Struktur in HTML als Gegenstück zur Syntaxlast von HTML zu ermöglichen. Mit anderen Worten: HTML sagt dem Browser, wohin die Dinge gehen, und ARIA sagt ihm, wie sie interagieren.

Wer ist für ARIA verantwortlich??

ARIA ist ein Projekt des W3C (World Wide Web Consortium). Das Projekt hält sich an die gleichen Standards für die Aktualisierung und Bearbeitung wie ihre anderen Initiativen. Sie bieten auch ein GitHub-Repository mit verschiedenen Tests, die Sie ausführen können, um sicherzustellen, dass Ihre Seite ordnungsgemäß ausgeführt wird.

Was ist mit meiner aktuellen Site-Markierung falsch??

Die meisten Websites mit strukturiertem, durchdachtem Design sind in Bezug auf adaptive Technologien (z. B. Bildschirmleser) gut genug. Dass ein Benutzer herausfinden kann, wie er Ihre Website verwendet und wie einfach er zu bedienen ist, ist jedoch etwas anderes. Fast sehschwache Nutzer machen fast 2% der Bevölkerung aus, und für sie bedeutet der Unterschied, dass sie bei der Durchführung grundlegender Online-Aufgaben viel Zeit und Detektivarbeit sparen müssen. Es kann der Unterschied sein, den Besuchern ein spektakuläres Erlebnis zu bieten und ihnen ein Labyrinth zur Verfügung zu stellen.

Neben den traditionellen Zugänglichkeitstechniken findet ARIA auch Einzug in Technologien, die neue Möglichkeiten der Standard-Interaktion bieten. Eine zunehmende Anzahl von Sprachsystemen, aggregiertes Browsen (wie zum Beispiel in Computer eingebettete Computer) und andere Neuerungen setzen ARIA ein und nutzen seine erweiterten semantischen Fähigkeiten.

Okay, aber was macht es??

Insgesamt verbindet ARIA Elemente semantisch sinnvoll miteinander. Es gibt dem Benutzer zusätzliche Bedeutung in Bezug auf die Interaktion. Hier einige Beispiele aus der Praxis, wie es verwendet werden könnte:

1. Nicht verschachtelte Elemente verknüpfen: Mit einfachem HTML kann der Browser des Benutzers nur Beziehungen anzeigen, die auf Eltern-Kind-Beziehungen basieren. In einigen Situationen möchten wir jedoch möglicherweise eine Reihe von Schaltflächen parallel zum Inhalt in der HTML-Hierarchie. Mit ARIA können wir definieren, welche Art von Controller jede Schaltfläche ist und welches Element sie an anderer Stelle im Dokument steuert.
2. Deklarieren Sie interaktive Elemente: Während HTML nur eine Handvoll Elemente für die Interaktivität bietet, definiert ARIA Dutzende mehr und ermöglicht eine detailliertere Beschreibung der Funktionen der einzelnen Elemente Ihrer Seite. Außerdem können diese HTML-Tags zugewiesen werden, die normalerweise nicht für einen solchen Zweck verwendet werden, in Ihrem speziellen Fall jedoch sinnvoll sein können. Beispielsweise können Sie die
3. Markieren Sie eine Reihe von Kontrollkästchen, die nicht aus Formularelementen bestehen sollen.
4. Benachrichtigungen zum Aktualisieren des Live-Bereichs: Eine weitere Funktion, die ARIA bietet, ist die Definition eines "Live" -Inhaltsbereichs. Wenn ein Inhaltsbereich auf diese Weise definiert wird, benachrichtigt ARIA den Benutzer, wenn sich der Inhalt dieses Elements ändert. Dies kann nützlich sein, wenn Sie sicherstellen möchten, dass Benutzer mit eingeschränkter Sicht etwas auf Ihrer Seite geändert haben.

Hinzufügen von ARIA zu Ihren Webseiten

Wir haben darüber gesprochen, was mit ARIA möglich ist. Schauen wir uns nun einige der häufigsten Beispiele an. Wir werden jeden Abschnitt mit einer kurzen Erklärung des zu erreichenden Ziels beginnen, gefolgt von einem Codebeispiel, wie es erreicht werden kann.

Alternative Beschriftung mit ARIA erstellen

Wenn es um alternative Beschriftungen geht, kennen die meisten Entwickler die alt Attribut, das üblicherweise für verwendet wird Stichworte. Dieses Tag dient einem wichtigen Zweck: Beschreiben des Bildes, an das es angehängt ist, um die Zugänglichkeit zu verbessern (oder als übliche SEO-Taktik, abhängig von Ihrer Perspektive).. 

ARIA stellt ein ähnliches Attribut zur Verfügung Aria-Label Dies kann an jedes HTML-Element angehängt werden, um die Zugänglichkeit nicht nur für Bilder, sondern auch für Site-Abschnitte, Formularsteuerelemente und mehr zu verbessern. Hier ist ein Beispiel, wie das aussieht:

    
Eine Textbeschreibung des Bildes, die auf dem Bildschirm angezeigt wird

Definieren von ARIA-spezifischen UI-Elementen

HTML bietet bereits eine Reihe von Elementen für die Erstellung von Webseiten. Ihr Hauptaugenmerk liegt jedoch normalerweise darauf, einen Bereich generisch zu definieren und dem Benutzer die Struktur der Site zu präsentieren. ARIA bietet einige Dutzend zusätzliche Elemente, die sich stärker auf die Verwendung eines Elements konzentrieren, z. B. einen Timer, eine QuickInfo oder eine Fortschrittsleiste.

Ein Beispiel dafür ist ein Tooltip, den Sie möglicherweise in einem Formular finden. Es gibt verschiedene Möglichkeiten, eines zu erstellen. Dies reicht von einem Link, der etwas JavaScript auslöst, bis zu einem Element, das ein Modal erzeugt, wenn Sie den Mauszeiger darüber bewegen. Der fehlende Teil hier ist, dass Sehbehinderte trotz der Funktionsweise für sehende Benutzer möglicherweise nicht einmal wissen, dass der Tooltip vorhanden ist.

Sie können einen Tooltip mit ARIA wie folgt definieren:

Verfügbare ARIA-Definitionen

Um diese Elemente der Benutzeroberfläche zu erweitern, finden Sie hier eine kurze Liste der interessantesten "Rollen", die definiert werden können. Die vollständige Auflistung ist im referenzierten Spezifikationsdokument verfügbar.

• Suche
• Banner
• Präsentation
• Werkzeugleiste
• Status
• Menuitem
• Log
• Dialog
• Verknüpfung

Herstellen von Beziehungen außerhalb der Eltern / Kind-Struktur

Lassen Sie uns nun auf einen Punkt eingehen, über den wir zuvor gesprochen haben: die erzwungene Struktur von HTML. Während die Eltern-Kind-Beziehung gut ist, um zu entscheiden, wie die Dinge angeordnet werden sollen, wird dies zu kurz, wenn sinnvollere Verbindungen benötigt werden. Ein Beispiel dafür sind Geschwisterelemente. Einige Bibliotheken haben die Möglichkeit hinzugefügt, dass Geschwister oder andere Formen von Elementbeziehungen durchlaufen werden. Dies geschieht jedoch normalerweise in JavaScript oder einer anderen Sprache außerhalb des Markups.

ARIA gibt uns die Möglichkeit, diese Beziehungen direkt im Markup zu definieren. Dies erleichtert das Gruppieren von Menüelementen, das Erstellen einer nicht standardmäßigen Navigation und das Anhängen von Steuerelementen an Elementbereiche, die normalerweise nur schwer möglich wären.

Schauen wir uns an, wie wir dies verwenden könnten, um einige Steuerelemente mit einem Inhaltsbereich zu verbinden:

 
 Der Inhalt Ihres Tutorials 

Dieser Ausschnitt sagt, dass die nextbutton.jpg Bild ist eine Schaltfläche, die ein Steuerelement für das Lernprogramm ist div unten.

"Live" -Elemente in ARIA erstellen

Das letzte Feature von ARIA, das wir hier behandeln werden, ist das Arie-Live Attribut. Während die meisten anderen Funktionen von ARIA sich hier mit semantischen Verbindungen befassen, geht es hier direkt um die Idee, dass Benutzer Benachrichtigungen über Inhalte oder Elementänderungen erhalten.

Für viele Menschen mit Sehbehinderung ist möglicherweise nicht sofort klar, dass ihre Interaktion mit Ihrer Website eine Änderung an anderen Stellen auf der Seite bewirkt hat. Dies kann insbesondere bei geringfügigen Änderungen der Fall sein, z. B. bei kleinen Textfeldern, die sich ändern können, aber relativ gleich lang bleiben. Mit diesem Attribut wird Ihr Benutzer jedes Mal benachrichtigt, wenn der Inhalt innerhalb des definierten Elements geändert wird.

Wir können dieses Attribut einem Element wie folgt hinzufügen:

 Inhalte, die aktualisiert werden, dh. geführte Richtungen 

Das Internet für alle Benutzer zu einem besseren Ort machen

Etwas mehr als 2% der US-amerikanischen Bevölkerung tragen eine Form von Sehbehinderung, und die Verbesserung der Erreichbarkeit Ihrer Website kann die Reichweite Ihrer Website drastisch erhöhen. Für diejenigen mit Standorten, die mehrere Länder erreichen, wird diese Zahl noch größer. Neben der Barrierefreiheit bietet ARIA auch eine Möglichkeit für Nicht-Browser-Schnittstellen, um Ihre Site zu nutzen. Eine Reihe von sprachbasierten Geräten bietet bereits Unterstützung.

Die Implementierung von ARIA hilft Ihren Benutzern und kann Ihren Datenverkehr unterstützen!

Habe ich Details vermisst oder haben Sie zusätzliche Fragen? Hinterlasse einen Kommentar!

Wenn Sie in die vollständige ARIA-Dokumentation eintauchen oder das offizielle Testwerkzeug ausprobieren möchten, besuchen Sie die folgenden Links:

• ARIA-Authoring-Verfahren
• Vollständiges ARIA-Spezifikationsdokument
• Test Tool Beispielbericht