Kontakt

Wie schaffst du Toleranz in deinem Online-Business?

Wir zeigen dir die sechs wichtigsten Punkte, um deine Webseite barrierefrei zu machen.

Von Antje Heymann

Bild zeigt zwei Personen, die auf einen Laptop schauen und um die beiden herum sind verscheidene Icons zum Thema Barrierefreiheit zu sehen, wie z.B. ein Lautsprecher.

Nicht barrierefrei, nicht zukunftsfähig.

Achtung: Ab dem 28.06.2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft und verpflichtet Betriebe dazu, Barrierefreiheit in sämtlichen Geschäftsbereichen wie dem E-Commerce zu gewährleisten.
Somit müssen Webpräsenzen und Online-Shops so gestaltet werden, dass sie für alle Nutzer uneingeschränkt zugänglich und anzuwenden sind.
Bei verzeichneten Verstößen gegen die Bestimmungen des BFSG können Geldstrafen verhängt werden.
Darum solltest du dir die Frage stellen, ob dein Online-Business bereits vollständig barrierefrei ist oder zentrale Anpassungen benötigt.

Im Folgenden haben wir dir die sechs wichtigsten Aspekte aufgelistet, die du unbedingt beachten und umsetzen solltest. So wirst du garantiert alle Barrieren aufheben können und für das Barrierefreiheitsstärkungsgesetz gewappnet sein:

1. Hilfe bei Sehbehinderungen und Analphabetismus

Um die Zugänglichkeit von Websites zu verbessern und eine inklusivere Nutzererfahrung zu schaffen, gibt es verschiedene Maßnahmen, die bei der Webentwicklung berücksichtigt werden sollten. Ein zentraler Aspekt ist die Sicherstellung der Screenreader-Kompatibilität, welche sehbehinderten oder vollständig erblindeten Nutzern eine bessere Navigation und Interaktion mit den Inhalten ermöglicht.

Darüber hinaus sollte eine Text-zu-Sprache-Funktion implementiert werden, die sämtliche Inhalte vorliest und auch Analphabeten umfassend unterstützt. Zusätzlich sollten alle Bilder mit beschreibenden Alt-Texten versehen werden, um auch einen Zugang zu visuellen Informationen zu ermöglichen.

Ebenso sind farbenblindheitsfreundliche Designs wichtig, die sich durch gut erkennbare Farbkombinationen auszeichnen. Schließlich sollten alle Schriften skalierbar sein, damit jeder Nutzer die Textgröße individuell nach seinen Bedürfnissen anpassen kann und den Lesekomfort erhöht.
Das Bild zeigt zwei Beispiele für die Umsetzung von Barrierefreiheit auf Webseiten. Das obere Beispiel zeigt eine Webseite mit gut umgesetzten barrierefreien Funktionen: Es gibt Schaltflächen zum Vorlesen des Textes und zur Anpassung der Schriftgröße. Der Text ist klar und gut lesbar. Daneben ist ein grünes Symbol mit einem Häkchen zu sehen, das den positiven Aspekt der Umsetzung hervorhebt. Das untere Beispiel zeigt dagegen eine Webseite, die schlecht umgesetzt ist: Der Text ist grau und schwer lesbar, was auf unzureichenden Kontrast hinweist. Daneben befindet sich ein rotes Symbol mit einem Kreuz, das auf die negativen Auswirkungen dieser schlechten Umsetzung hinweist.
Oben eine barrierefreie Umsetzung mit gut lesbarem Text, Vorlesefunktion und anpassbarer Schriftgröße. Unten ein Negativbeispiel mit schlechtem Kontrast und fehlenden Barrierefreiheitsfunktionen.

2. Alternativen bei Hörbehinderungen

Das Bild zeigt zwei Darstellungen von Videos auf Webseiten. Im oberen Beispiel wird eine Präsentation gezeigt, bei der die gesprochenen Inhalte durch Grafiken unterstützt und mit Untertiteln versehen werden. Ein grünes Häkchen-Symbol weist auf die gute Barrierefreiheit hin. Im unteren Beispiel fehlt sowohl die grafische Unterstützung als auch die Untertitel, was durch ein rotes Kreuz-Symbol als nicht barrierefrei markiert ist.
Oben ein barrierefreies Video mit grafischer Unterstützung und Untertiteln. Unten ein Video, wo beides fehlt.
Bei der verbesserten Nutzung von Websites für gehörlose und schwerhörige Anwender gehört das Angebot von effektiven Unterstützungen, wie die Bereitstellung von Videos und Tutorials in Gebärdensprache. Dies ermöglicht Kunden einen leichteren Zugang zu auditiven Inhalten und erhöht deren Verständnis.

Zusätzlich sollten Transkripte für alle Audioinhalte zur Verfügung gestellt werden, sodass auch diese Informationen von gehörlosen und schwerhörigen Nutzern vollständig erfasst werden können und ein einwandfreies Erlebnis der Inhalte bieten. Dies sollte durch die Bereitstellung von Untertiteln für alle Videos ergänzt werden, da so gesprochene Inhalte vollständig visuell erfasst werden können.

3. Unterstützung bei kognitiven Einschränkungen

Um die Zugänglichkeit von Websites für Menschen mit kognitiven Beeinträchtigungen zu verbessern, sind zwei zentrale Maßnahmen von besonderer Bedeutung. Erstens sollte die Navigation der Website so einfach und intuitiv wie möglich gestaltet werden. Eine übersichtliche und klar strukturierte Navigation hilft diesen Nutzern dabei, sich problemlos auf der Website zurechtzufinden und die gewünschten Informationen schnell zu erreichen. Zweitens ist die Verwendung von einfach verständlicher Sprache essenziell. Inhalte sollten in klarer und einfacher Sprache verfasst sein, um das Verständnis für Menschen mit kognitiven Beeinträchtigungen zu erleichtern. Komplexe Sätze und Fachjargon sollten vermieden werden, damit alle zur Verfügung gestellten Informationen leicht nachzuvollziehen bleiben.
Das Bild zeigt zwei Textbeispiele auf Webseiten. Im oberen Beispiel wird ein Fachbegriff durch farbliche Hervorhebung markiert, und ein "i"-Infobutton unten rechts bietet eine Erklärung des Begriffs bei Bedarf. Daneben unterstützt eine Grafik den Textinhalt. Ein grünes Häkchen-Symbol hebt die Benutzerfreundlichkeit hervor. Im unteren Beispiel fehlt die Hervorhebung des Fachbegriffs sowie der Infobutton, was durch ein rotes Kreuz-Symbol als weniger benutzerfreundlich markiert ist.
Oben wird ein Fachbegriff farblich hervorgehoben, durch einen "i"-Infobutton erklärt und von einer Grafik unterstützt. Unten fehlen diese Elemente, es gibt zu viel Fließtext.

4. Responsives Design und Eingabehilfen

Das Bild zeigt zwei Beispiele für responsive Design und Barrierefreiheit auf mobilen Webseiten. Im oberen Beispiel passt sich der Inhalt gut an die Bildschirmgröße an, mit klarer Darstellung, lesbarem Text und leicht zugänglichen Funktionen, wie einem gut sichtbaren "E-Mail"-Button sowie Icons für zusätzliche Informationen. Ein grünes Häkchen symbolisiert die gelungene Umsetzung. Im unteren Beispiel ist der Text zu klein und unübersichtlich, wichtige Funktionen wie der "E-Mail"-Button sind schlecht platziert, was durch ein rotes Kreuz als nicht barrierefrei markiert ist.
Links ein gelungenes Beispiel für responsives Design mit gut lesbarem Text und klaren Funktionen, visualisiert durch Buttons. Rechts ein schlechtes Beispiel, bei dem die Elemente aus dem Bildschirm herauslaufen und das Bild verzerrt ist.
Die Entwicklung eines responsiven Designs ist von großer Bedeutung, wenn es darum geht, eine breite Zielgruppe zu erreichen und jeden Kunden miteinzubeziehen. Ein responsives Design sorgt dafür, dass die Website auf allen Geräten und Bildschirmgrößen einwandfrei funktioniert. Dies unterstützt Menschen, die verschiedene Zugangsgeräte verwenden, und stellt sicher, dass die Nutzererfahrung unabhängig vom verwendeten Gerät konsistent und benutzerfreundlich bleibt. Des Weiteren sollten die Eingabemöglichkeiten optimiert werden, um Anwender mit motorischen Einschränkungen die Interaktionen zu erleichtern. Dazu gehört die Bereitstellung alternativer Eingabemöglichkeiten wie eine Sprachsteuerung und die Verwendung von Tastaturkürzeln. Diese Optionen ermöglichen es Personen mit eingeschränkter Beweglichkeit, die Website effizient und individuell angepasst an ihre Bedürfnisse zu nutzen.

5. Barrierefreie Kaufabwicklung

Für eine barrierefreie Kaufabwicklung sollten sämtliche Formulare und Zahlungsoptionen auf alle obengenannten Zielgruppen angepasst und individuell zugeschnitten werden. Zunächst ist es wichtig, Formulare so zu gestalten, dass sie übersichtlich aufgeführt werden und leicht verständlich sind. Dies beinhaltet die Verwendung klarer Labels und konkreter Fehlermeldungen, um den Nutzern eine einfache und reibungslose Interaktion zu ermöglichen. Ebenso sollten alle Zahlungssysteme barrierefrei und einfach zu bedienen sein. Dies stellt sicher, dass jeder Käufer, unabhängig von seiner Beeinträchtigung, problemlos Einkäufe tätigen und Zahlungen durchführen kann. Der Aspekt der barrierefreien Zahlungsoptionen ist insbesondere dafür entscheidend, Personen mit Behinderungen ein gleichwertiges Online-Erlebnis zu bieten und deren Bedürfnisse zu berücksichtigen.
Links ist ein schlecht umgesetztes Formular abgebildet, das keine Labels für die Eingabefelder hat, unbeschriftete Buttons verwendet und Slider enthält, die von Screenreadern schwer erkannt werden. Dieses Formular ist mit einem roten Kreuz markiert. Rechts daneben ist ein gut umgesetztes Formular dargestellt. Es enthält klare Beschriftungen für die Felder, gut lesbare Labels, Checkboxen zur Auswahl und klare Beschriftungen für die Buttons.
Links ist ein schlecht umgesetztes Formular abgebildet, das keine Labels für die Eingabefelder hat, unbeschriftete Buttons verwendet und Slider enthält, die von Screenreadern schwer erkannt werden. Rechts daneben ist ein gut umgesetztes Formular dargestellt. Es enthält klare Beschriftungen für die Felder, gut lesbare Labels, Checkboxen zur Auswahl und klare Beschriftungen für die Buttons.

6. Angepasster Kundensupport und weitere Dienstleistungen

Das Bild zeigt Beispiele für gut und schlecht umgesetzte Webseiten im Hinblick auf Barrierefreiheit. Auf der linken Seite sind positive Beispiele dargestellt, darunter ein Symbol für Kommunikation zwischen zwei Personen, ein Support-Chat-Fenster und eine Webseite dir regelmäßig getestet wird. Auf der rechten Seite ist ein negatives Beispiel abgebildet: Eine unübersichtliche, sehr textlastige Webseite, die durch ein rotes Kreuz als schlecht umgesetzt markiert ist.
Auf der linken Seite sind positive Beispiele dargestellt, darunter die Kommunikation im Team, ein Support-Chat-Fenster und eine Webseite dir regelmäßig getestet wird. Auf der rechten Seite eine unübersichtliche, rein textlastige Webseite.
Um die Barrierefreiheit von Websites weiterhin zu gewährleisten, sollten regelmäßige Tests mit Nutzern mit verschiedenen Beeinträchtigungen durchgeführt werden. Vereinfachte Feedback-Mechanismen bieten Anwendern die Möglichkeit, Rückmeldungen zur Barrierefreiheit zu geben und zur Verbesserung der Benutzerfreundlichkeit der Website beizutragen. Auch regelmäßige Schulungen des Personals über die neuesten Barrierefreiheits-Features stellen sicher, dass das Team stets auf dem neuesten Stand bleibt und die neuesten Änderungen im Blick behält. Zusätzlich können Assistenz-Chatbots den Nutzern bei der Navigation durch den Online-Shop und beim Einkauf helfen. Abschließend stärkt der Aufbau einer Testimonial-Sektion das Vertrauen in dein inklusives Unternehmen und beweist dein ausgezeichnetes Engagement für Barrierefreiheit im Bereich des E-Commerce.

Zwar weißt du jetzt in der Theorie, was alles zu einem barrierefreien Onlinebusiness dazu gehört, allerdings besteht nun die Herausforderung darin, dieses Wissen einwandfrei in die Tat umzusetzen.

Aber mache dir keine Sorgen, falls du dich im ersten Moment mit der Flut an Informationen überfordert fühlst oder nicht genau weißt, wo du mit der Umsetzung der Barrierefreiheit beginnen sollst. Wir unterstützen dich gerne von Anfang bis Ende und entwickeln gemeinsam ein überzeugendes und benutzerfreundliches Konzept und setzen es auch direkt um.

Kostenloses Beratungsgespräch

Was du mit Barrierefreiheit bekommst

  • Höheres Google-Ranking, für mehr Besuche und Reichweite
  • Stärkere Markenbindung , durch den Aufbau eines inklusiven und sozialen Images
  • Verbesserte Zugänglichkeit, was zur Erhöhung der Conversion-Rate führt

Neben den technischen Aspekten eines Onlinebusiness liegt uns ebenfalls das Thema Barrierefreiheit sehr am Herzen. Daher sehen wir es als unsere Aufgabe, dich kompetent und lösungsorientiert in diesem Bereich zu unterstützen. Das Ziel ist es, dein Geschäft zu einem leicht zugänglichen, barrierefreien Ort umzugestalten und jedem Kunden die Möglichkeit zu bieten, dasselbe Onlineerlebnis genießen zu können.

Dies erreichen wir insbesondere durch die Entwicklung individueller Methoden, innovativer Ideen und unserem unaufhörlichen Herzblut, welches wir in BumbleBits fließen lassen und zu der verlässlichen Unterstützung machen, die du für dein Onlinebusiness benötigst.

Ablauf der Zusammenarbeit

1.

Anfrage stellen

Du füllst unser Kontaktformular aus und teilst uns mit, dass du Unterstützung bei der Barrierefreiheit deiner Website benötigst. Wir melden uns schnellstmöglich bei dir.

2.

Erstgespräch

Wir vereinbaren einen gemeinsamen Call, in dem wir über deine aktuellen Herausforderungen und Ziele sprechen. Hier lernen wir deine Bedürfnisse besser kennen.

3.

Analyse & Konzept

Wir analysieren deine Website auf Barrieren und entwickeln ein maßgeschneidertes Konzept. Dieses Konzept besprechen wir mit dir, um sicherzustellen, dass alles, was für eine barrierefreie Website nötig ist, klar und verständlich ist.

4.

Umsetzung

Sobald du das Konzept freigegeben hast, beginnen wir mit der technischen Umsetzung, um deine Website barrierefrei zu gestalten. Während des gesamten Prozesses halten wir dich stets auf dem Laufenden.

Abbildung von Sophia Friedrich
Bereit für die nächste Evolution?

Schick uns gerne Anfrage über den Button unten oder ruf uns einfach an unter +49 (0) 6196-2045480 (Mo. – Fr. 09:00 – 16:30 Uhr)

Kostenloses Beratungsgespräch