Laut Google-Experte John Mueller ist Barrierefreiheit zwar bislang kein direkter Ranking-Faktor, hat jedoch einen indirekten Einfluss auf dein SEO, da sie die Zugänglichkeit deiner Seite und damit die Nutzererfahrung verbessert. Sie ermöglicht es allen Nutzer:innen, unabhängig von möglichen Einschränkungen, problemlos auf die Website zuzugreifen und einzukaufen. Das betrifft Menschen mit Seh-, Hör- oder motorischen Einschränkungen ebenso wie ältere Nutzer:innen oder Nicht-Muttersprachler:innen.
Google Experte Johne Mueller bei den SEO Office Hours von Google
Barrierefreiheit ist jedoch nicht nur eine soziale Verantwortung – sie wird bald zur Pflicht. Mit dem European Accessibility Act (EAA), der ab dem 28. Juni 2025 in der EU gilt, sind Unternehmen dazu verpflichtet, ihre Online-Dienste barrierefrei zu gestalten. In Deutschland wird dies auf nationaler Ebene mit dem Barrierefreiheitsstärkungsgesetz (BSFG) unterstützt. Wer die Vorgaben nicht erfüllt, riskiert rechtliche Konsequenzen sowie mögliche SEO-Nachteile. Wir denken, dass Online-Shops, die frühzeitig auf Barrierefreiheit setzen, nicht nur ein besseres Kundenerlebnis fördern, sondern sich auch einen klaren Wettbewerbsvorteil sichern.
Wieso Barrierefreiheit deinen Onlineshop boosten kann 📈
Inklusion ist im E-Commerce wahnsinnig wichtig: Denn als Onlinehändler:in möchtest du möglichst ALLE deine potenziellen Kund:innen erreichen und von deinem Produkt überzeugen. Wer seine Seite nicht barrierefrei gestaltet, übergeht einen großen Teil seiner möglichen Zielgruppe. In Deutschland haben laut dem statistischen Bundesamt ca. 9,3% aller Menschen eine schwere Behinderung und eben diese Menschen gilt es mitzudenken.
Quelle: Statistisches Bundesamt
Im E-Commerce ist das sogar besonders wichtig🛒
Laut einem Testbericht zum Thema Barrierefreiheit von Aktion Mensch und Google sind Menschen mit Behinderungen sogar besonders aktive Onlineshopper. So gaben 61 % von ihnen an, regelmäßig oder sehr oft online zu shoppen, während dieser Anteil bei Menschen ohne Beeinträchtigung nur bei 51 % liegt.
👴🏽👵🏻Außerdem: Da unsere Gesellschaft immer älter wird, steigt auch die Zahl der Menschen mit Beeinträchtigungen – eine wachsende und wichtige Zielgruppe.
Quelle: Aktion Mensch
👍Kurz gesagt, bringt dir ein barrierefreier Online-Shop folgende Vorteile:
- Deine Zielgruppe wächst: Barrierefreie Websites ermöglichen es, dass wirklich alle Nutzer:innen, einschließlich Menschen mit Behinderungen, mühelos durch deinen Shop navigieren können.
- Markenimage und Inklusion: Ein Online-Shop, der Barrierefreiheit integriert, signalisiert Verantwortung und Inklusion. Das kann das Vertrauen und die positive Wahrnehmung deiner Marke stärken.
- Eine verbesserte User Experience: Eine barrierefreie Website ist klar strukturiert und einfacher zu navigieren. Das ist für alle Kund:innen gut.
- Rechtliche Sicherheit: Mit Blick auf die kommende Barrierefreiheit-Pflicht bist du als Early-Adopter auf der sicheren Seite und kannst rechtliche Konsequenzen sowie Abstrafungen durch Google frühzeitig vermeiden.
- Indirekte SEO-Vorteile: Noch ist es kein direkter Faktor, aber wer weiß was noch kommt? Zusätzlich wirken sich alle zuvor erwähnten positiven Effekte der Barrierefreiheit indirekt positiv auf deine Sichtbarkeit aus. Ein echter Win-Win also!
Wie du deine Seite direkt barrierefreier machen kannst:
Vor dem Hintergrund der vielen Vorteile fragst du dich nun sicher, wie du deinen Shop möglichst Zeit-Effizient barrierefrei(er) gestallten kannst. Hier gibt es mehrere Herangehensweisen, sie haben aber alle das selbe Ziel: Nämlich die Seite für Nutzer:innen von Assistiven Technologien wie z.B. Screenreadern besser navigierbar zu machen.
💡Falls du von Screenreadern noch nie gehört haben solltest – hier eine schnelle Erklärung:
Screenreader sind Programme, die blinden oder sehbehinderten Menschen den Inhalt einer Webseite oder eines Dokuments vorlesen. Sie nutzen die HTML-Struktur, um Text und Elemente wie Überschriften korrekt zu erfassen und ermöglichen so die Navigation und Interaktion mit der Seite. Die Nutzer:innen können dabei per Tastatur von einem Element zum nächsten springen und so die Inhalte verstehen.
So sieht z.B. der Windows-Narrator, das Screenreader-Programm von Windows aus
Im Folgenden werde ich dir zeigen, welche Punkte du beachten musst, damit deine Seite möglichst Screenreader-freundlich und somit barrierefrei gestalten kannst. Lass uns direkt einsteigen!
Als Erstes auf eine saubere HTML-Struktur achten
Der HTML-Code ist der sogenannte „Backbone“ einer jeden Webseite und bildet dessen Grundgerüst. Wie eben schon beschrieben nutzen die meisten Assistiven Technologien wie z.B. Screenreader eben dieses Grundgerüst um die Seite zu navigieren. Für die Barrierefreiheit ist eine saubere HTML-Struktur daher absolut essenziell.
Deswegen ist es sehr wichtig, dass ihr beim Anlegen von Inhalten auf eurer Website immer auf die HTML-Struktur achtet. Wir formatieren unsere Texte zum Beispiel standardmäßig immer mit diesem HTML-Online-Editor.
💡Ein kleiner Tipp: Mit der „Clean“-Funktion wird euer HTML-Code automatisch „gesäubert“.
Unsere persönliche Empfehlung: HTML-5-Editor.Net
Generell ist eine saubere HTML-Struktur im SEO-Bereich das absolute „Bare-Minimum“ und gehört zur Best-Practice. Sie verbessert nicht nur die Nutzererfahrung, sondern sorgt auch dafür, dass Google deine Website „mag“ und besser bewertet.
Halte deine Sprache einfach
Google legt heute großen Wert auf einfache und verständliche Sprache. Warum? Klar formulierte Sätze sind nicht nur für deine „Leserschaft“, sondern auch für Screenreader-Nutzer:innen leichter zu erfassen. Lange und verschachtelte Sätze erschweren das Verstehen, daher solltest du klare und präzise Sprache verwenden. Im deutschen Raum ist zum Beispiel die Sparkasse ein sehr positives Beispiel für barrierefreie Sprache:
Quelle: Sparkasse
Indem du deine Texte leicht verständlich schreibst, können alle deine Kund:innen sowie Suchmaschinen deine Inhalte gut verstehen. Vermeide komplizierte Fachbegriffe und lange, verschachtelte Sätze – formuliere klar, kurz und präzise.
Schreibe präzise Alt-Texte für deine Bilder
Suchmaschinen und Screenreader können Bilder nicht direkt „sehen“, sondern müssen den Alternativtext (Alt-Text) lesen, um den Inhalt zu verstehen. Ein präziser und beschreibender Alt-Text hilft nicht nur Menschen mit Behinderungen, indem er erklärt, was auf dem Bild zu sehen ist, sondern trägt auch dazu bei, dass Bilder besser in den Suchmaschinen und insbesondere in der Google-Bildersuche platziert werden.
Auch hier ist die Sparkasse vorbildlich
Auch hier gilt: Diese Disziplin gehört schon lange zum Standard-SEO Best-Practice. Mit gutem Bilder-SEO hilfst du also nicht nur Menschen mit Beeinträchtigungen, sondern auch deiner Sichtbarkeit.
Verwende hohe Farbkontraste
Damit Menschen mit Sehbehinderungen oder eingeschränktem Sehvermögen Inhalte gut erkennen können, sind hohe Farbkontraste auf deiner Seite sehr wichtig. Die Seite der britischen Regierung hat das zum Beispiel sehr gut gelöst:
Die Seite GOV.uk verwendet vorbildlich sehr hohe Kontraste und ist mit der Tastatur einfach zu navigieren
Unsere Empfehlung: Dein normaler Text sollte einen Kontrast von mindestens 7:1 haben und großer Text auf deiner Seite mindestens 4.5:1. Diese Kontraste sorgen dafür, dass deine Inhalte auch für Menschen mit Sehschwächen optimal lesbar bleiben. Mit der Browser-Erweiterung WCAG Color Contrast Checker kannst ganz einfach selber prüfen ob deine Kontraste WCAG 2.1 konform sind – das rote X zeigt dir wenn der Kontrast zu gering ist.
Für Fortgeschrittene: Aria-Attribute
Wie du im vorigen Video sehen konntest, ist die Seite GOV.UK einfach per Tastatur bedienbar. Menschen mit Behinderungen navigieren oft über die Tasten Tab (für das nächste Element), Shift + Tab (für das vorherige Element) und Enter (um Aktionen auszuführen). Damit diese Navigation flüssig verläuft und funktioniert, gibt es die sog. ARIA-Elemente. ARIA (Accessible Rich Internet Applications) sorgt dafür, dass interaktive Elemente wie Schaltflächen, Links oder Menüs korrekt als solche markiert werden, auch wenn sie kein typisches HTML-Element wie <button> oder <a> sind.
Beispiel: Ein Button kann durch ARIA z.B. die Zusatzinformation „pressed“ erhalten, wodurch angezeigt wird das er schon gedrückt wurde.
Es gibt sehr viele ARIA-Attribute, hier eine Liste
Die gängigen Shop-Systeme wie Shopify, JTL oder Shopware bieten grundsätzlich die Möglichkeit, ARIA-Attribute zu integrieren. Allerdings hängt die tatsächliche Barrierefreiheit stark vom verwendeten Template ab. Wir würden euch daher empfehlen euer Template gründlich zu testen, um sicherzustellen, dass es mit der Tastaturnavigation gut funktioniert.
Mit ARIA-Attributen hat man sehr vielfältige Möglichkeiten den eigenen Shop barrierefrei zu machen. Mehr Details zu den wichtigsten ARIA-Elementen und ihrer Anwendung findest du hier.
Assistive Technologien für deine Website:
Tools wie z.B. Screenreader, die deine Inhalte vorlesen oder den Kontrast erhöhen, lassen sich auch direkt in deine Seite integrieren. Meistens wird das über Plugins bzw. in die Seite integrierte Software umgesetzt. Einige unserer Kund:innen nutzen zum Beispiel die Software EyeAble®Assistent. Du kannst das Tool als kleines seitliches Pop-Up irgendwo, oder direkt als Button in deiner Haupt-Navi platzieren. Das fällt kaum auf, macht deine Seite direkt Barrierefrei und hat keine Nachteile.
Ein Klick auf den Button in der Navi öffnet den Barrierefreiheits-Assitent
Mit der Tastatur lässt sich der Assistent dann bedienen und mühelos einstellen
Barrierefreiheit: Ein klarer win-win für alle🙌
„Barrierefreiheit im Netz nutzt allen –
Für 100 Prozent Ihrer Besucher:innen ist sie hilfreich“
So betont es Aktion Mensch in Ihrem Test zur Barrierefreiheit deutscher Onlineshops. Wir von ReachLab sehen das genau so. Insbesondere vor dem Hintergrund des kommenden Barrierefreiheitsstärkungsgesetzes tut Ihr euch und euren Kund:innen einen Gefallen, wenn Ihr jetzt schon damit beginnt, eure Seite barrierefrei(er) zu machen.
Wenn ihr Unterstützung bei den Themen SEO für Onlineshops oder Barrierefreiheit braucht, stehen wir euch gerne zur Seite. Hier könnt ihr ganz einfach ein kostenloses Beratungsgespräch mit uns vereinbaren. ⬇️😊
Für weitere Informationen und praktische Tipps zum Thema SEO bei Onlineshops lies gerne auch unsere anderen Blogbeiträge:
