Welche E-Commerce-Barrieren Sie zuerst angehen sollten

Für alle zugängliche Online-Shops sind nicht nur gesetzliche Pflicht, sondern auch moralisches Imperativ und selbst kaufmännisch schlau. Aber als einer der ersten Fragen auf dem Weg zu einem zugänglichen E-Commerce-Projekt taucht häufig die Frage au : Mit was genau fange ich an auf meinem Weg zu E-Commerce-Barriefreiheit?

Einerseits muss man auf diese Frage antworten, dass die „Next Steps“ sehr individuell mit dem Projekt zusammenhängen, das sie inklusiver machen wollen oder müssen. Wie viele Barrieren bestehen, wie fit sind Ihre Teams (oder ist ein allgemeines „Aufschlauen“ zu bestimmten Themen, Prozessen oder Regelungen nötig).

Andererseits haben Barrierefreiheits-Prüfende aber gewisse rote Fäden in Webauftritten gefunden, gewisse Barrieren die häufiger auftreten als andere, oder solche, die einfach zu lösen sind (aber einen großen Einfluss auf die Zugänglichkeit vieler haben).

Darüber hin aus gibt es auch ein paar Studien, die sich um einen Gesamtüberblick des „Status Quo“ kümmern. Angesichts gesetzlicher Regelungen wie dem European Accessibility Act/dem Barrierefreiheitsstärkungsgesetz, die das zu erreichende Ziel definieren (Zugänglichkeit oder zumindest Konformität zu Barrierefreiheitsrichtlinien), stellten sich die Schöpfer und Schöpferinnen dieser Betrachtungen die Frage: An welchem Barrierefreiheits-Start-Punkt steht der E-Commerce-Sektor eigentlich?

Auch wenn diese Studien nicht perfekt sind, methodische Voreingenommenheit oder Missverständnisse aufweisen ¹ , so lassen sich dennoch erste Ideen aus ihren Untersuchungen ableiten:

Laut Baymard-Studie

• Fehlen häufig Alternativtexte für Bilder
• Gibt es vermehrt Problemen mit Links (diese haben programmatisch keine Bezeichner, kontrastieren schlecht oder haben keine interaktive semantische Rolle)
• Sind Formulare und ihre Bestandteile fehlerhaft (keine Assoziierung zwischen Beschriftung und Feld, nicht aussagekräftige Beschriftungen, falsche Gruppenbeschriftungen)

Laut PMC-Studie

• Fehlen ebenfalls häufig Alternativtexte für Bilder
• Sind Kontrastprobleme bei Texten und Nicht-Text-Inhalten zu beklagen
• Herrschen Probleme mit Überschriften, was deren Auszeichnung als solche und Aussagekraft angeht
• Gibt es Probleme mit der Tastaturbedienbarkeit (und der Nachvollziehbarkeit dieser)
• Findet zu wenig Fehlererkennung (und Hilfestellung) bei Formulareingaben statt

Die Aktion-Mensch-Studie bezeugt

• Fehlende Tastaturbedienbarkeit, inklusive unklarem oder unsichtbaren Fokusindikator (Markierung der aktuellen Position)
• Fehlende Medienalternativen, neben Alternativtexten sind hier auch fehlende Untertitelungen von Videos angesprochen
• Fehlende Möglichkeiten, Animationen zu stoppen oder anzuhalten
• Unklare Überschriftenbäume („Was gehört inhaltlich zu was“) und wenig aussagekräftige Überschriften

Bestimmte Fehlermuster tauchen immer wieder auf, was nicht allein an der jeweiligen Studien-Methodik liegt. Auch wenn der zentrale, internationale Web-Barrierefreiheitsstandard WCAG (Web Content Accessibility Guidelines) keine Gewichtungen und Priorisierungen von Barrieren vorsieht – alle sind gleich problematisch – so lassen sich die Studien dennoch auswerten, und mit meiner Erfahrung als BIK BITV-Test und WCAG-Prüfer kombinieren:

Der beste Start hat mit dem individuellen Projekt zu tun, ist aber üblicherweise folgender:

Formulare

Dateingaben sind das A und O von Online-Shops – wieviel von welcher Ware wohin geschickt werden soll (und wie die Zahlungsdaten sind) wird über Formularfelder abgefragt. Entsprechend sollten Sie den Umgang mit Ihnen und ihre Verständlichkeit optimieren.

Tastaturbedienbarkeit inklusive Focusindikation

Nicht jede*r Nutzende*r nutzt Websites mit einem so genannten "Zeigegerät" wie der Maus oder den eigenen Fingern. Insofern sollte eine Bedienung per Tastatur (oder artverwandten Hilfstechnologien) möglich sein. Gleichzeitig sollte man auch (gut) sehen können, wo der Tastaturfokus gerade ist.

Medienalternativen

Neben guten Alternativtexten, die Bilder und ihre Wirkungen ersetzen können ist es wichtig, auch andere Formen der Multimedia zugänglich zu machen. Bei Videos können das beispielsweise Untertitel sein – eine Funktion, die wahrscheinlich nicht nur von Gehörlosen und Schwerhörigen genutzt werden wird.

Kontraste

Texte sind der Grundbaustein des World Wide Web und "Wahrnehmbarkeit" eines der vier Grundprinzipien der digitalen Barrierefreiheit. Wenn diese Grundbausteine aber aufgrund zu schlechter Farbkontraste nicht wahrgenommen werden können, wackelt für einige sehbehinderte Menschen das Fundament des Web-Mediums. Insofern lohnt es sich sehr, die Farbkontraste von Texten, wichtigen Bildern und Nicht-Text-Bedienelementen genauer anzuschauen und zu korrigieren.

Animationen

Selbststartende, schlimmstenfalls visuelle Animationen (wie Karussells) sind für viele Menschen entweder Ärgernis, Konzentrationskiller oder Anfallauslöser. Entsprechend fordern Barrierefreiheitsrichtlinien – und übrigens auch die Teilnehmenden aus dem Aktion-Mensch-Panel – dass Animationen mindestens einfach anhaltbar sein müssen. Im besten Fall wird der umgekehrte Weg gewählt und Animationen sind stattdessen einschaltbar und Teil eines Nutzungsangebots.

Semantische Rollen

Etwas, das klickbar oder per Tastatur aktivierbar ist, sollte sich auch als solches zu erkennen geben. Ein Link soll sich auch nicht-visuell als solcher vorstellen und entsprechend klar und deutlich sagen, dass man ihn aktivieren kann. Diese Aussagekraft von HTML-Elementen des Interfaces wird „Semantik“ genannt und ist in Sachen Barrierefreiheit (und übrigens auch Suchmaschinen) ein zentrales Thema. Baut man beispielsweise eine Schaltfläche mit den falschen semantischen Mitteln, entzieht man dem eigenen Interface an dieser Stelle technische Aussagekraft und häufig auch Tastaturerreichbarkeit (was uns wieder an den Anfang dieser kleinen Auflistung bringt).

Deutlich mehr Einsichten, Nutzungsmuster und Web-Barrierefreiheitswissen wird mein Kurs „E-Commmerce Barrierefrei“ bereit halten, der 2024 erscheint. Lassen Sie sich gerne per E-Mail über den Projektstart informieren: