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

Hands-on mit ARIA: Barrierefreiheit für eCommerce

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Hands-on With ARIA: Homepage Elements and Standard Navigation
Hands-on With ARIA: Accessibility Recipes for Web Apps

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

Möchten Sie Ihre Website besser zugänglich machen? Oder vielleicht möchten Sie die Navigation auf Ihrer Website mithilfe von Browsern und anderen Schnittstellen insgesamt erleichtern? Mit ARIA können Sie beides tun. Werfen wir einen Blick darauf, was ARIA ist und wie es einer eCommerce-Website zugute kommen kann. Wir werden auch einige Beispiele Schritt für Schritt durchgehen.

Was ist ARIA?

WAI-ARIA steht für Web Accessibility Initiative – Accessible Rich Internet Applications. Diese Initiative hat die Form einer Reihe von Richtlinien und Attributen, die vom W3C verwaltet werden. Mit diesen Attributen können wir Beziehungen zwischen unseren Websiteelementen erstellen, die nicht allein über HTML ausgedrückt werden können. Das Wichtigste für unsere Verwendung hier ist, dass wir Elementbeziehungen außerhalb der Eltern-Kind-Beziehung definieren und UI-Elemente für unsere Benutzer klarer verbinden können.

An diesem Punkt könnte es eine gute Idee sein, unsere ursprüngliche Einführung in ARIA zu lesen, um einige seiner Fundamente aufzufrischen.

ARIA zum eCommerce hinzufügen

Zuvor haben wir darüber gesprochen, wie ARIA auf eine allgemeine Website angewendet werden kann, die einer üblichen Homepage für kleine Unternehmen ähnelt. Dieses Mal werden wir einen genaueren Blick darauf werfen, wie ARIA die Benutzererfahrung für große E-Commerce-Websites verbessern kann.

Wir werden uns auf vier Schlüsselbereiche des eCommerce konzentrieren, die einzigartige Situationen darstellen: Produktseiten, Kategorieseiten (oder Produktaggregatseiten), mehrstufige Navigation und facettierte Navigation. Wir werden diese beiden Wireframes verwenden, um uns durch den Prozess zu führen:

Product Page Wireframe
Ein sehr einfaches Produkt-Mockup
Category Page Wireframe
Beispiel für ein Produktlisten-Seitenmockup

Vorbereitung für ARIA

Im Falle der meisten Websites ist das Hinzufügen von ARIA ein ziemlich einfacher Prozess. Sie definieren die Teile Ihrer Website, gliedern sie in Markierungen und Elemente und fügen den erforderlichen Code hinzu.

Wir werden mit unserer eCommerce-Site einen ähnlichen Prozess verfolgen, aber wir haben jetzt eine neue Ebene der Kompliziertheit. Mit der Komplexität, die mit eCommerce-Websites einhergeht, kann man mit ARIA in vielen Fällen vom Hundersten zum Tausendsten kommen. Obwohl es wichtig ist, die Zugänglichkeit Ihrer Website so weit wie möglich zu verbessern, stoßen wir leider oft auf geschäftliche Einschränkungen. Aus diesem Grund möchten wir im Voraus etwas mehr planen und jede unserer ARIA-Erweiterungen priorisieren.

Durch diese Priorisierung können wir sicherstellen, dass die wichtigsten Aspekte unserer Website zuerst verbessert werden, so dass die Benutzererfahrung mit der verfügbaren Zeit so gut wie möglich ist.

Lassen Sie uns es starten, indem wir einen Blick auf einige Produktseiten werfen.

ARIA für Produktseiten

Diese Seiten sind Standard für jede eCommerce-Website und zeigen in der Regel ein Produkt, seine verfügbaren Variationen und eine Möglichkeit, den Artikel zu einem Warenkorb hinzuzufügen. Jedes dieser interaktiven Elemente sollte separat betrachtet werden.

Lassen Sie uns für unsere Produktseite in diese Stücke aufteilen: unsere Kernproduktinformationen, interaktive Elemente, die das Produkt beeinflussen, unseren Schaltfläche "Hinzufügen zum Warenkorb" und einen erweiterten Inhaltsbereich.

Wenn wir die Implementierung auf dieser Seite priorisieren müssen, möchten wir sie wie folgt gruppieren:

  1. Kernproduktinformationen, interaktive Elemente, zum Warenkorb hinzufügen
  2. Erweiterter Produktinhalt

Der Hauptfaktor, über den wir hier sprechen, ist etwas, worüber wir in einem früheren Artikel gesprochen haben: ARIA hilft, die Absicht eines Elements zu definieren. Im Fall des erweiterten Inhalts verfügen die meisten der verwendeten HTML-Elemente über Elemente mit semantischer Bedeutung und Absicht, die übereinstimmen. Das bedeutet, dass es zwar sinnvoll ist, zusätzliche ARIA-Informationen zu setzen, wenn wir können, aber es ist wahrscheinlich weniger wichtig als die Fertigstellung der anderen drei Bereiche.

Kernproduktinformationen

Beginnen wir mit dem Hinzufügen von ARIA zu unseren Kernproduktinformationen. Dies ist ziemlich einfach aufgrund der Einfachheit der Elemente, die hier verwendet werden. Der Code sieht wie folgt aus:

Zunächst einmal fügen wir dem Haupt-Div eine Rolle und eine Beziehung zwischen dem Bild und der Produkttitelüberschrift hinzu.

Interaktive Produktelemente

Hier können Produktseiten etwas knifflig werden. Produkte auf einer eCommerce-Website können eine ganze Reihe verschiedener Arten von Variationen aufweisen. Abgesehen von den verfügbaren Typen fügt die Anzahl der erweiterbaren Typen eine weitere Komplexitätsebene hinzu. In unserem Beispiel haben wir drei Elemente, die ins Spiel kommen: Größe, Farbe und Menge.

Werfen wir einen Blick darauf, wie Sie das auszeichnen können. Hier ist der Code für die durch ARIA erweiterten Auswahl- und Kontrollkästchenelemente:

Zum Warenkorb hinzufügen Button

Der Warenkorb-Button ähnelt einem Standard-Button, aber wir werden unser Bestes geben, um ihn klarer zu beschriften als andere Buttons:

Erweiterte Produktinhalte

Schließlich wird der erweiterte Inhaltsbereich wie ein typischer Inhaltsbereich behandelt. Je nach Produktseite kann es jedoch sinnvoll sein, ihre wichtigsten Inhalts-Orientierungspunkte von Ihren ergänzenden Inhalts-Orientierungspunkten zu trennen. Die Registerkarten fügen dem Code auch hier eine zusätzliche Ebene hinzu. So würden wir es in unserem Beispiel tun:

ARIA zu Kategorieseiten hinzufügen

Während Produktseiten in den meisten Punkten als alternative Form von Inhaltsseiten betrachtet werden können, sind die Kategorieseiten einer Website, auch Produktlistenseiten (PLPs) genannt, ein ganz anderes Biest. Sie arbeiten als große Navigationsstruktur, so dass Benutzer Hunderte oder sogar Tausende von Produkten sortieren können.

Dadurch werden sie immer komplexer, was umso mehr der Fall ist, je mehr zusätzliche Inhaltsebenen und Filter hinzugefügt werden (wir werden im nächsten Abschnitt über facettierte Navigation und Filter sprechen). Betrachten wir die beiden Hauptbereiche unserer PLP außerhalb der Filter: die Produktblöcke und die Paginierung.

Hier ist unser Ausgangs-Code-Rahmen:

Umgang mit Paginierung

Paginierung ist der Name der kleinen Links am Ende unserer Produktlisten hier. In der Regel werden sie durch Zahlen oder Pfeile dargestellt, aber sie können in verschiedenen anderen Formen auftreten. Auf der HTML-Seite der Dinge sehen Paginierungslinks wie normale Links aus. Wir werden sagen, dass unsere die Produktlisten kontrolliert, ohne auf eine andere Seite umzuleiten.

Um erkennbar zu machen, dass die Paginierung einen Inhaltsbereich auf diese Weise steuert, müssen wir sie als Controller deklarieren, definieren, was sie steuert, und dann diesen Inhaltsbereich als live markieren. So sieht das in unserem Fall aus:

Wenn wir hier unseren Live-Bereich erstellen, nutzen wir die "polite" Einstellung, die ARIA zur Verfügung stellt. Wenn Ihre Änderungen relevant sind und vom Benutzer schnell behandelt werden müssen, oder Sie mehrere Live-Bereiche priorisieren müssen, können Sie auch den Wert "assertive" verwenden.

Auszeichnen von sich wiederholenden Elementen

Eine einzigartige Herausforderung, die bei Produkt-Landingpages auftritt, ist die intensive Navigationskomplexität innerhalb der Produktlistings selbst. Aus visueller Sicht kann es einfach genug sein, die Informationen zu gruppieren und anhand visueller Hinweise zu bestimmen, welche Informationen auf welches Produkt zutreffen.

Dies hat mit ARIA ein paar mehr Ebenen als die vorherigen Anwendungen, die wir besprochen haben. Wenn Sie einen "Jetzt kaufen"-Button auszeichnen, kann eine Standardschaltfläche Verwirrung stiften, wenn sich 20 dieser Schaltflächen auf einer Seite befinden. Um dieses Problem zu lösen, müssen wir klare Verbindungen zwischen jedem Produkt und den zugehörigen Elementen herstellen.

So werden wir das tun:

Dies hilft zwar ein wenig bei der Klärung von Beziehungen für den Benutzer, aber es ist immer noch nicht die beste Implementierung. Eine bessere Möglichkeit wäre, dynamisch ein ARIA-Label zu generieren, indem das Produkt-Titel-Element mit einem zusätzlichen Ausdruck wie "zum Warenkorb hinzufügen" verkettet wird.

ARIA mit facettierter Navigation verwenden

Facettierte Navigation bezieht sich auf die Filter und Optionen, die häufig auf eCommerce-Websites angezeigt werden, sodass Sie Ihre Suchergebnisse eingrenzen können. Diese gibt es in vielen Variationen – von Größen bis zur Farbe und darüber hinaus. Für unser Beispiel werden wir zwei Annahmen treffen:

  1. Unsere facettenreiche Navigation aktualisiert die Produkte live auf der Seite. Dies ist nicht immer der Fall, da eCommerce-Websites manchmal eine neue Seite generieren können, wenn ein Filter angewendet wird, aber wir arbeiten so, als ob die Website Inhalte live aktualisiert.

  2. Unsere facettenreiche Navigation ermöglicht die Auswahl mehrerer Filter. Nicht jede eCommerce-Website tut dies, und es gibt definitiv Fälle, in denen es nicht erlaubt sein sollte. Dadurch entsteht jedoch eine zusätzliche Komplexitätsebene außerhalb des Rahmens dieses Artikels.

Einrichten Ihrer Steuerelemente

Der HTML-Code hinter unseren Filtern ähnelt dem der Paginierung und wird im Code als grundlegende Links angezeigt. Für unsere Verwendung ist die Absicht der Filter jedoch, Informationen zu ändern, die sich derzeit auf der Seite befinden. Aus diesem Grund möchten wir den gesamten Container um die Filter auszeichnen, um deutlich zu machen, dass dies ein Controller für einen anderen Bereich auf der Seite ist:

Definieren von Live-Bereichen

Wie bei der Paginierung finden diese Updates live auf der Seite statt. Aus diesem Grund möchten wir den Hauptinhalt auf unserer Seite als "live" markieren. Beachten Sie, dass wir dies zuvor im Paginierungsabschnitt getan haben, aber wir wiederholen den Schritt hier aus Gründen der Konsistenz.

Der Code sollte wie folgt aussehen:

Testen Ihrer Implementierungen

Unsere Implementierungen sind jetzt alle vorhanden, also lassen Sie uns sie einigen Tests unterziehen. Meine bevorzugten Tools hierfür sind Googles Accessibility Developer Tools oder IBMs Dynamic Assistant Plugin, aber je nach Größe Ihres Projekts müssen Sie möglicherweise Ihr eigenes Testskript erstellen.

Wenn Sie ein Werkzeug benötigen, das außerhalb von Chrome arbeitet, oder einfach nicht die beiden oben genannten bevorzugen, hat W3C eine Liste anderer Eingabehilfen, die verfügbar sind.

E-Commerce zugänglicher machen

Mit diesen neuen Ergänzungen zu Ihrem ARIA-Toolset sollten Sie nun in der Lage sein, fast jede eCommerce-Website entsprechend zu auszuzeichnen. Um die beste Benutzererfahrung mit einer eCommerce-Website zu gewährleisten, denken Sie daran, Ihre Navigation so einfach wie möglich zu halten und Ihre Absicht klar auszudrücken.

Haben Sie weitere Fragen zu diesem Thema? Habe ich etwas Wichtiges vermisst? Sagen Sie es mir in den Kommentaren unten!

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.