Barrierefreiheit & SEO
Werde Teil von #A11YFans und nutze die Chance auch für SEO
Wenn wir uns fit und gesund fühlen und alle Sinne und Geräte einfach nutzen können, machen wir uns selten Gedanken über Barrierefreiheit, wir sind ja nicht eingeschränkt. Doch ist das immer so?
Statistisch erfasst fallen allein in Deutschland knapp 8 Millionen Personen unter den Begriff „Schwerbehinderte“ und nur etwas mehr als 3 % davon sind das von Geburt an – 97 % bekommen somit die Einschränkung/en erst im Laufe des Lebens.(1) Ähnlich ist es auch mit eingeschränktem Sehen, Hören und anderen „Behinderungen“, sie betreffen uns erst „morgen“.
Davon abgesehen haben wir es auch immer wieder mit temporären Einschränkungen und damit verbundenen Barrieren zu tun. Zwei Beispiele:
Mit dem Smartphone unterwegs
Wenn man so manchen Mockups Glauben schenken kann, dann ist bei einer „mobile First“-Website auch bei der Nutzung in Zug, U-Bahn oder Straßenbahn alles einfach und klar.
Doch in der Realität hat man zumindest mit Spiegelungen, wechselndem und schlechtem Licht zu tun und wenn man nicht gerade das neue Handy in der Tasche hat, vielleicht sogar mit dem einen oder anderen Kratzer oder Sprung im Display.
Das Ergebnis: Ein visuell sonst leicht erkennbares Element oben rechts oder unten links ist selbst ohne Einschränkung nur eingeschränkt erkennbar und vielleicht auch gar nicht nutzbar!
Quelle: Grafiken e-dvertising
Sport ist gesund …
„Ein gesunder Geist in einem gesunden Körper“, ein verkürztes Zitat, das in der Langversion „Beten sollte man darum, dass ein gesunder Geist in einem gesunden Körper sei.“ lautet.(2) Doch gerade im Sport kann es auch immer wieder zu Verletzungen und damit verbundenen Einschränkungen kommen. Dann kann man nicht wie gewohnt laufen oder hat einen oder sogar beide Arme ruhiggestellt. Erster Triathlon mit dem Ergebnis: 2. Platz in der Altersklasse und zwei gebrochene Arme.(3)
Spätestens jetzt ist man froh, wenn man nicht mit Finger oder Maus navigieren muss, sondern alternative Möglichkeiten nutzbar sind.
Quelle: (3)
SEO & CRO
Was haben die Beispiele nun mit Suchmaschinenoptimierung (SEO) oder Conversion-Optimierung (CRO) zu tun?
Eine ganze Menge, denn letztlich müssen möglichst viele Menschen die Website nutzen um positive Signale abzugeben. Erst damit kommen die Seiten in Ranking und Re-Ranking auch nach vorne und sind somit gut auffindbar. Dem trägt auch „Search Engine Land“ in seinem aktuellen Periodic Table of SEO Rechnung und hat 2024 in der Gruppe „User“ das Element „[Ae] Accessible“ eingeführt.
Quelle: searchengineland.com/seotable
Wenn man „Search Engine Land’s SEO Periodic Table GPT“ befragt, wie dieser Punkt zu sehen ist, erfährt man Folgendes: [Ae] unterstreicht, dass die Bereitstellung einer barrierefreien Erfahrung sowohl eine bewährte Methode (aka „Best Practice“) für die Benutzerfreundlichkeit als auch für die Suchmaschinenoptimierung ist.
Inzwischen wurde ja enthüllt, dass auch User-Signale bei der Nutzung des Chrome-Browsers an Google gesendet werden.(4) Damit zahlen ja wohl auch und gerade einfache Zugänglichkeit und ein hohes Maß an Barrierefreiheit positiv auf SEO mit ein. Indirekt, weil die User sich besser zurechtfinden und entsprechend mehr und besser durch die Seiten navigieren und damit mehr positive Signale erzeugen. Direkt, weil damit auch die Crawler leichter und besser den Weg durch die Seiten und Unterseiten finden.
Wie findet man nun einigermaßen barrierefrei den Weg?
Dazu ist es einmal notwendig das Menü zu finden. Easy? Nicht immer und nicht für alle, das zeigte ein Test mit dem „Hamburger-Menü“. Dabei wurden in einem Online-Shop der Variante mit den drei Strichen vier andere gegenübergestellt. Das Ergebnis waren bei diesen Varianten höhere Einnahmen („Revenue“) zwischen 4,8 und 6,0 %!6
Quelle: cxl.com/blog/testing-hamburger-icon-revenue/
Mitdenken, testen und planen
„Accessibility is not about designing for the few. It is designing for us all.“
Dieses Zitat stammt von Paul Boag (5)und er hat im selben Beitrag „Accessibility“ (also Barrierefreiheit) durch „Inclusive Design“ (Inklusives Gestalten) ersetzt, somit ist die Übersetzung:
„Inklusives Gestalten ist nicht gestalten für wenige. Es ist Gestalten für uns alle.“
Was meint das? Je nach Statistik sind 10 bis 15 % der Einwohner in Deutschland auf Barrierefreiheit angewiesen. Doch im Umkehrschluss gibt es wohl kaum Fälle, in denen Kunden einen Shop verlassen, weil die Navigation zu einfach zu finden oder Text zu leicht zu lesen ist.
Barrierefreiheit ist essentiell für 10 Prozent, notwendig für 40 Prozent und komfortabel für 100 Prozent der Bevölkerung.(6)
Mit diesem Gedanken sollte man möglichst früh das gesamte Team mit an Bord holen. Die Verantwortung liegt dabei sowohl bei Design, Redaktion und Technik und als auch bei den Entscheider:innen. Somit gilt es
1. das Team zu sensibilisieren,
2. Zeit im Projekt dafür zu reservieren,
3. Tests und Qualitätssicherung einzuplanen!
Die einfachsten Tests von bereits laufenden Webprojekten oder Prototypen hat man zum Teil schon direkt „zur Hand“, im Chrome-Broser beispielsweise mit dem Lighthouse:
Quelle: Grafik e-dvertising
Da werden Fehler und Empfehlungen zur Barrierefreiheit direkt ausgegeben und man kann die Desktop-Version und Mobile Versionen prüfen. Wichtig dabei ist auch, was unter dem Punkt „Manuelle Checks“ zu sehen ist. Denn wie in dem Beispiel hier, ist der Wert (Score) mit 93 sehr gut und scheinbar schon so gut wie alles im grünen Bereich. Doch da gibt es noch Punkte, die dieser Test nicht erkennt und da sollte man manuell ran oder ein anderes Tool hinzuziehen.
Meine Empfehlung hier ist die Browser Extension (7) von Silktide.(8) Damit kann man neben dem Testen auch für die unterschiedlichen Einschränkungen die Ausgabe simulieren, sowie Assistenzausgaben wie den Screenreader nutzen.
Quelle: silktide.com/
Beim Test sieht man hier beispielsweise, dass man mit dem Keyboard derzeit keine Möglichkeit hat das Menü zu erreichen. Nach dem Logo oben links (1) wechselt der Fokus zum CTA (2) und dann weiter zu einem „Button“ (3). Dieser Schaltfläche fehlt ein sprechender Text. Das ist kein Einzelfall, selbst manche „Dem Warenkorb hinzufügen“-Buttons funktionieren nur grafisch. Saskia Bader (9) hat davon einmal auf der Campixx (10) von einem gescheiterten Einkauf in einem Online-Shop berichtet, weil genau diese Bezeichnung gefehlt hatte.
Zur Fokus-Reihenfolge passend ein cooler Test im Unternehmen: Am Morgen in der Entwicklungsabteilung von Websites und Apps die Mäuse einsammeln und dem Team dann in den selbst entwickelten Oberflächen Aufgaben wie „Waren bestellen“, „Formular ausfüllen“ oder „Reise buchen“ stellen. Das beschert sicher einige Aha-Erlebnisse und ist ein erster Schritt beim „Team sensibilisieren“!
Das mit dem nicht navigierbaren Button ist klarerweise auch im Magazinbereich zu sehen – oder besser „nicht zu sehen“, wenn man versucht mit dem Screen-Reader zu navigieren.
Quelle: silktide.com/
Was man in weiterer Folge mit Silktide im Magazinbereich sehen kann, wie schwerwiegend die Fehler hier eingestuft werden (rot-orange-gelb) und in welchen Bereichen die Fehler liegen: Beispielsweise zu geringer Kontrast zwischen Texten und Hintergrund, fehlende Alternativ-Texte oder eben fehlende Beschriftungen von Formfeldern und Schaltflächen (Buttons).
Quelle: silktide.com/
Genau hier liegt viel Potenzial in zentral steuerbaren Elementen, denn wenn man das Menü einmal für die gesamte Seite sauber umstellt, gewinnen alle Seiten und die interne Verlinkung mit dazu. Ähnlich ist es mit zentralen Farbeinstellungen (CSS) für Schriften oder die Definition, wie ein „Warenkorb-Button“ ausgespielt wird. Bei Elementen wie ALT-Texten kann man im großen Stil an Automatisierungen über bestehende Datenquellen oder auch Assistenz durch KI-Anwendungen eine bessere Basis schaffen.
Basics, basics, basics!
Stichwort Basis: Bei Tests von WEBAIM mit einer Million „Homepages“ (11) fallen nach wie vor über 95 % der getesteten Seiten durch. Dabei fallen – Stand 2024 – wiederum über 96 % der Fehler in nur sechs Kategorien.
Das sind doppelt gute Nachrichten um mit den eigenen Maßnahmen zu punkten: Wenn man für seine Seiten diese sechs Kategorien meistert, hat man einen hohen Prozentsatz abgedeckt und ist zudem rasch unter den Top 10 % der Seiten, die dann die Kriterien erfüllen. Ein klarer SEO-Vorteil!
Quelle: webaim.org/projects/million
Hier sind für die meisten Projekte wohl wieder einige „Low Hanging Fruits“ zu holen, denn wie schon beschrieben lassen sich Kontrast und Schaltflächen oft zentral richtigstellen. Ebenso die fehlende Angabe „Document Language“ (Sprachkürzel im Header). Das Optimieren von Formularen sollte meist auch recht gut zentral lösbar sein. Damit bleiben noch die beiden Balken mit den fehlenden Alternativ-Texten und Leere Links. Hier gilt es vor allem auch das Content-Team zu schulen, damit beim Einarbeiten von neuen Inhalten automatisch darauf geachtet wird.
Go for the basics (low hanging fruits) and think „accessibility first“ overall.
Die Basis – hier gehört eben auch die „klassische“ Dokumentenstruktur mit H1, H2 etc. sowie eine für alle Endgeräte gut erreichbare und intuitive Navigation dazu – muss stimmen. Bei vielen CMS schon im Standard an Bord sind die richtigen Auszeichnungen der Seitenregionen (12) sowie die Möglichkeit beispielsweise die Navigation überspringen zu können (e.g. WCAG – Kriterium 2.4.1, Bypass Blocks (Level A)(13).
Ressourcen und Ansätze zum Einlesen:
Die Gehirngerecht Digital GmbH mit Tobias Roppelt & Nina Jameson bietet auf ihrer Website mit dem Motto „Das Verstehen der WCAG tut gar nicht so weh!“ eine Übersicht mit eingängigen Reimen: https://gehirngerecht.digital/wcag-kriterien/
Für Designer hat Johannes Lehner in Figma ein Card-Deck aufgebaut, das inzwischen von der Community übersetzt und gemeinsam weiterentwickelt wird: https://www.figma.com/community/file/1409436654182046971
Folgt auf den verschiedenen Social Media Kanälen dem Hashtag #A11YFans für positive Beispiele rund um das Thema „Accessibilty“ (kurz A11Y)!
Gesetzliche Vorgaben & Richtlinien
Last but not least: Die Gesetzlichen Vorgaben sollten in Anbetracht des „Inklusives Gestalten ist für uns alle!“-Gedanken eher zweitrangig sein. Dennoch läuft ein Countdown (14) bis zum 28. Juni 2025, an dem der European Accessibility Act (EAA) in Kraft tritt und damit Webseiten von Firmen mit mehr als 10 Mitarbeiter:innen und mehr als 2 Mio. EUR Jahresumsatz barrierefrei sein müssen.
Die Regelungen sind in Deutschland im Barrierefreiheitsstärkungsgesetzes (BFSG) (15) und in Österreich im Barrierefreiheitsgesetz (BFG) (16) verankert. Abgesehen von den erwähnten Ausnahmen ist dann für alle neuen Websites auf die Grundprinzipien der WCAG (Web Content Accessibility Guidelines) zu achten, vgl. Textauszug aus dem BFG: „3. Abschnitt Allgemeine Barrierefreiheitsanforderungen […] c) müssen Websites einschließlich der zugehörigen Online-Anwendungen und auf Mobilgeräten angebotenen Dienstleistungen, einschließlich mobiler Apps, auf kohärente und angemessene Weise wahrnehmbar, bedienbar, verständlich und robust gestaltet werden; … .“
Prinzip 1: Wahrnehmbar – Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können.
Beispiele: Textalternativen, Untertitel, Videobeschreibung, Reihenfolge der Inhalte, Kontraste, Größenänderung, …
Prinzip 2: Bedienbar – Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein.
Beispiele: Tastaturbedienbarkeit, ausreichend Zeit, keine Blitze, Fokus-Reihenfolge, Überspringen von Inhalten, Skiplinks, Definition und Reihenfolge von Überschriften, …
Prinzip 3: Verständlich – Informationen und Bedienung der Benutzerschnittstelle müssen verständlich sein.
Beispiele: gute Lesbarkeit, konsistente Navigation, Eingabehilfen, Fehlererkennung, …
Prinzip 4: Robust – Inhalte müssen robust genug sein, damit sie zuverlässig von einer großen Auswahl an Benutzeragenten einschließlich assistierender Techniken interpretiert werden können.
Beispiele: Screenreader, Braillezeile, Vergrößerungssoftware, …
Denke an BARRIEREFREIHEIT! Denke an dich selbst – heute und nicht erst morgen!