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

Praxisnah mit ARIA: Homepage Elemente und Standardnavigation

by
Length:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Site Accessibility: Getting Started With ARIA
Hands-on With ARIA: Accessibility for eCommerce

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

Möchten Sie Ihre Website zugänglicher machen? Möchten Sie die ersten in der Reihe sein, wenn neue Online-Schnittstellen auf den Markt kommen? Suchen Sie nicht weiter als ARIA.

Diese vom W3C (World Wide Web Consortium) verwalteten Standards bietet Ihnen das Beste aus beiden Welten, indem Sie eine Reihe von Attributen hinzufügen, die es ermöglichen, HTML auf sinnvolle Weise zu erweitern. Hier werden wir durch gehen, was ARIA ist, sehen, wie eine Informationswebsite davon profitieren kann, und gehen einen Anwendungsfall Schritt für Schritt mit Codebeispielen durch. Fangen wir an!

ARIA Grundlagen

ARIA (oder manchmal WAI-ARIA) ist das Akronym für eine Reihe von Barrierefreiheitsstandards, die als Web Accessibility Initiative –Accessible Rich Internet Applications bezeichnet werden. Sie können sich in meinem vorherigen Artikel mehr über die Grundlagen von ARIA informieren, aber lassen Sie uns jetzt einige seiner Säulen betrachten.

Definieren nicht-traditioneller Beziehungen

Die meisten Websites werden mit HTML erstellt, das in erster Linie Elemente in hierarchischer Weise durch Eltern-Kind-Beziehungen miteinander verknüpft. Diese Struktur eignet sich hervorragend für die Definition von Inhalten, reicht aber nicht aus, wenn es um die Definition von Benutzeroberflächen geht. Beispielsweise wird in vielen Websites und Webanwendungen ein Inhaltsbereich durch Schaltflächen innerhalb eines gleichgeordneten Elements gesteuert – die gleichgeordneten Elemente haben dasselbe übergeordnete Element, aber in HTML haben sie keine direkte Beziehung zueinander. Aus diesem Grund wird es schwierig zu definieren, welche Benutzeroberflächenelemente welche Inhalte steuern, wenn unterstützende Technologien verwendet werden.

Dies gilt auch für neuere Schnittstellen. Wenn Sie beispielsweise versuchen, eine Website durch ein intelligentes Gerät zu navigieren, wird es schwierig, wenn Elementänderungen nicht sichtbar sind.

Mit ARIA können Sie HTML-Elemente mithilfe zusätzlicher Attribute miteinander verbinden, um diese Steuerelementtypen darzustellen.

Nicht-starre Elementklassifizierung

Ein weiteres Manko von HTML ist seine Unfähigkeit, Struktur und Absicht zu trennen.

Sie können z. B. ein Bildelement zu einer anklickbaren Schaltfläche machen. HTML definiert dieses Bild jedoch immer noch weitgehend als ein Bild, und alles, was darüber hinausgeht, geschieht an anderer Stelle.

Mit ARIA kann Absicht von einem Element getrennt werden, sodass Bilder als Schaltflächen oder als Link als Tooltip markiert werden können. Dadurch erhält der Entwickler mehr Kontrolle in Bezug auf die Benutzeroberfläche, wodurch klarer festgelegte Beziehungen erstellt werden.

Erstellen von Orientierungs-Bereichen

Neben dem Markieren von Elementen innerhalb der Benutzeroberfläche gewährt ARIA auch Zugriff auf das Rollenattribut, das zum Definieren von Bereichen einer Seite verwendet wird. Sie können z. B. Ihr Hauptmenü als Navigation und den Inhaltsbereich Ihres Artikels als Hauptinhalt markieren. Dies erleichtert es den Benutzern, sich in den wichtigen Bereichen Ihrer Website zu bewegen, und kann Verwirrung bei Personen mit ungewöhnlichen oder komplexen Website-Layouts verhindern.

Anwendungsfall: Homepage für Kleinunternehmen

Um Erfahrung beim Hinzufügen von ARIA zu einer Website zu erhalten, erstellen wir einen Drahtmodell einer Website, die von einem kleinen Unternehmen verwendet werden könnte, und implementieren unsere Attribute Schritt für Schritt.

Example Page Wireframe
Das Seiten-Wireframe, das wir auszeichnen werden

Der Klarheit halber wurde der Code, mit dem wir arbeiten werden, gestrippt, wobei CSS-Klassen und jegliche Funktionalität aus einem CMS entfernt wurden.

Das erste, was wir tun möchten, ist unser Wireframe in Teile aufzuteilen, um das Hinzufügen in ARIA insgesamt einfacher zu machen. In der Folgenden Abbildung sehen Sie, dass ich mich entschieden habe, die Website in fünf Hauptteile aufzuteilen:

  • Navigation
  • Inhalt
  • Seitenleiste
  • Kontaktformulare
  • spezialisierte UI-Elemente

In unserem Fall sieht es so aus:

Wireframe broken into sections
Die Abschnitte, mit denen wir arbeiten werden

Wenn Sie Ihre Website in Bereiche wie diese aufteilen, suchen wir nach zwei Dingen. Die erste ist nach wichtigen Elemente, die durch eine ARIA-Orientierungspunkt definiert werden können: Banner, Navigation, Hauptinhalt, komplementärer Inhalt, Inhaltsinformationen, Suche und Formular. Diese stellen die notwendigen Teile unserer Website dar, und alles, was für die Nutzung unnötig ist, wird nicht als Orientierungspunkt markiert (z.B. Werbung).

Die zweite Sache, nach der gesucht werden muss, sind spezifische Elemente, die mit ARIA geklärt werden müssen. In den meisten Fällen ist dies ziemlich einfach (z. B. das Markieren eines Bildes als Bild), aber für einige UI-Elemente kann es etwas schwierig werden.

Sobald wir wissen, welche Bereiche mittels ARIA ausgezeichnet werden müssen, können wir beginnen, sie systematisch zu durchlaufen. Beginnen wir mit der Navigation der Website.

Navigation

In unserem Beispiel werden Sie feststellen, dass wir ein paar Arten von Navigation haben. Das erste ist ein Menü, wie auf den meisten Websites gesehen, einige Seiten der Website auflistet. Direkt unten befindet sich ein kleineres Menü, das Optionen für Benutzer enthält.

Wir möchten diese mit dem Attribut role="navigation" markieren, damit sie leicht als Menüs der Website ausgewählt werden können. Dies führt zu der Frage: Sollen sie zu einer einzigen Navigations-Orientierungspunkt zusammengefasst oder als zwei separate Orientierungspunkte markiert werden?

Um diese Frage in Ihren eigenen Projekten zu beantworten, können Sie sich in der Regel zwei Fragen stellen:

  1. Ist die Absicht für diese Menüs unterschiedlich? In unserem Beispiel navigiert das obere Menü durch die Säulenseiten der Website, während sich das kleinere Menü auf Dinge konzentriert, die ein angemeldeter Benutzer benötigen könnte. Diese Absichten sind unterschiedlich, so dass es Sinn macht, sie zu trennen.

  2. Befinden sich die Menüs innerhalb desselben übergeordneten Elements? Ich weiß, dass dies kontraintuitiv erscheint, da ARIA uns helfen soll, diese Art von Beziehungsbeschränkungen zu überwinden, aber in diesem Fall geht es weniger darum, was möglich ist, als mehr darum, was für den Benutzer richtig ist. Wenn ein einzelnes Menü definiert ist, aber die Hälfte davon an einem Ort und die andere Hälfte an anderer Stelle, wird die Navigation erschwert.

Für unseren Fall werden wir unsere Navigationen als zwei getrennte Orientierungspunkte behandeln. Daher nehmen wir einige Änderungen am Code vor. Zunächst haben wir nur unseren grundlegenden HTML-Code:

Nun kommentieren wir es mit einigen Orientierungspunkten.

Der nächste Schritt bei der Definition dieser Orientierungspunkte besteht darin, dem Benutzer einen Hinweis darauf zu geben, was die Absicht jedes Menüs ist. Wenn wir beide als Navigation ohne weitere Informationen lassen, macht es die Dinge nur schwieriger zu interpretieren. Fügen wir ihnen also sinnvolle Beschriftungen hinzu, indem wir das aria-label-Attribut verwenden:

Darüber hinaus möchten wir unserem Menü zusätzliches Rollenmarkup hinzufügen, um die Benutzer darüber zu informieren, dass es sich um ein Menü handelt, und jeden Link innerhalb als Menüelement markieren:

Inhaltsbereich

Nun zum Inhaltsbereich. Hier markieren wir den Container, der den gesamten Hauptinhalt enthält mit role="main". Zum Vergleich: Hier ist unser Ausgangscode.

Und so sieht es aus, nachdem wir den "main" Orientierungspunkt hinzugefügt haben.

Innerhalb dieses Inhalts werden wir jedes Element finden, das eine Absicht hat, die nicht mit seiner HTML-Definition übereinstimmt.

Zuerst kümmern wir uns um das Bild, das als Schaltfläche fungiert, indem wir die "button"-Rolle hinzufügen:

Dieser Link, der ein Modal aktiviert, ist etwas schwieriger, da er davon abhängt, was sich im Modal selbst befindet. Für uns werden wir sagen, dass es ein Tooltip ist:

Innerhalb unserer Hauptinhalte haben wir auch ein Suchformular. Dies hat eine zusätzliche Komplexitätsebene, da es sich um ein Suchformular handelt, das HTML-Elemente verwendet, und es gilt auch als Suchfeld-Orientierungspunkt. Wir würden es wie folgt markieren:

Darüber hinaus können Sie jedes Element mit seinem richtigen ARIA-Tag definieren. Für die meisten Sites kann dies eine zu große Zeitbelastung für den Entwicklungsprozess sein, obwohl es in den meisten CMS automatisiert werden kann. In Fällen, in denen dies nicht möglich ist, kann die HTML-Definition eines Elements bei der Erstellung von ARIA-Implementierungen als niedrige Priorität betrachtet werden. So sieht der Hauptinhaltsbereich nach all diesen Änderungen aus:

Seitenleiste

Die Seitenleiste einer Website kann viele Formen annehmen. In unserem Fall bietet es zusätzliche Inhalte im Zusammenhang mit der Website, mit einer Liste der verwandten Beiträge am unteren Rand.

Hier ist das Ausgangs-Markup für die Seitenleiste:

Um den Inhalt zu definieren, möchten wir ihm die "complementary" Rolle geben und den Benutzern mitteilen, dass es sich bei den Informationen in der Seitenleiste um zusätzliche Inhalte im Zusammenhang mit dem Hauptinhalt handelt. Das kann so aussehen:

Die entsprechenden Beiträge unten könnten als eine Form der Navigation betrachtet werden, so dass Benutzer die Beiträge der Website weiter erkunden können. Wir möchten sie mit einer "navigation"-Rolle markieren und ihr eine entsprechende Bezeichnung geben, wie folgt:

Die Seitenleiste jeder Website ist anders und erfordert möglicherweise eine andere Kombination von Rollen und Orientierungspunkten. Wenn Ihre Seitenleiste über eine Anzeige verfügt, ist es am besten, dieses Element nicht zu markieren. Wenn sich in der Seitenleiste ein Suchformular befindet, markieren Sie es auch mit der entsprechenden Rolle. Alle Menüs, die in einer Seitenleiste angezeigt werden, sollten dem gleichen Muster folgen, wie wir es im Navigationsabschnitt besprochen haben:

  • ein "navigation"-Orientierungspunkt
  • eine "menu"-Rolle für den Menücontainer
  • "menuitem"-Rollen für jedes der verschachtelten Elemente

So sieht unsere finale Seitenleiste aus:

Behandlung von Kontaktformularen

Schließlich, am Ende unserer Seite ist ein Call-to-Action-Formular, das nach dem Namen und der E-Mail des Benutzers fragt, mit einer Standard-Schaltfläche zum Absenden drunter. Wenn es um Formulare geht, gibt es drei Teile zu beachten:

  1. Geben Sie der Form die orientierungsgebende Rolle von "form": Da das Formular ein wichtiger Teil der Website ist, müssen wir es Benutzern leicht machen, dorthin zu gelangen. Wir tun dies, indem wir ihm einen Orientierungspunkt zuweisen

  2. Weisen Sie den Elementen übereinstimmende Rollen zu. Formulare sind ein allgemeiner Bereich in dem Absichten und HTML-Definitionen nicht übereinstimmen. Fügen Sie bei Bedarf ARIA-Rollen hinzu, insbesondere wenn es um Kontrollkästchen, Schieberegler, Tooltips und andere Elemente geht, die auf verschiedene Weise implementiert werden können.

  3. Passen Sie die Beschriftungen mit den entsprechenden Elementen an. HTML behandelt dies auf einfache Weise, sodass Sie das <label> Element verwenden können, um eine Bezeichnung einer Eingabe zuzuordnen. Formulare können leicht eine komplexere Struktur aufweisen, die verhindert, dass dies funktioniert. Glücklicherweise können wir das mit dem aria-labelledby-Attribut beheben.

Werfen wir einen Blick darauf, wie unser aktualisierter Code aussieht:

Testen Ihrer Implementierung

Nachdem alle unsere Implementierungen vorhanden sind, müssen wir jetzt überprüfen, ob sie ordnungsgemäß funktionieren. Dazu ist es am einfachsten, ein vorhandenes Eingabehilfentool wie Googles Accessibility Developer Tools oder IBMs Dynamic Assistant Plugin zu verwenden.

Beide sind in die Entwicklertools von Chrome integriert, um die Barrierefreiheit Ihrer Website in Echtzeit zu überprüfen. W3C verwaltet auch eine größere Liste von Tools für die Barrierefreiheit.

Das Internet zugänglicher machen

Unser Seiten Wireframe hat jetzt ARIA! Es gibt zwar noch viel ARIA zu erkunden, aber Sie haben jetzt genug Wissen, um einen großen Teil der Websites, an denen Sie arbeiten, zugänglicher zu machen. Darüber hinaus ist Ihre Website auch besser darauf vorbereitet, eine beliebige Anzahl neuer Internet-Traversing-Technologien zu verarbeiten, die entstehen könnten.

Gibt es einen weiteren Aspekt von ARIA, den Sie von uns erkunden möchten? Haben Sie Fragen zu diesem Artikel? Fühlen Sie sich frei, sie in den Kommentaren unten hinzufügen!

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.