barrierefreier Webshop erstellen – was sollte man beachten – barrierefreie webseite

Barrierefreier Online-Shop

Am 28.06.2025 tritt das Barrierefreiheitsstärkungsgesetz in Kraft.  

Wichtiger Hinweis! 

Die Seite ist keine Rechtsberatung – bietet keine Vollständigkeit – ohne Gewähr – 

Allgemeine Orientierungshilfe aus programmiertechnischer Sicht 

Ein barrierefreier Online-Shop sollte so gestaltet sein, dass er für alle Nutzer zugänglich ist, einschließlich Menschen mit Behinderungen. Hier sind einige wichtige Aspekte, die Sie beachten sollten:

1. **Web Content Accessibility Guidelines (WCAG) einhalten:**
Die WCAG bietet Richtlinien zur Verbesserung der Zugänglichkeit von Webinhalten. Die wichtigsten Prinzipien sind:
– **Wahrnehmbar:** Inhalte sollten so präsentiert werden, dass sie von allen Sinnen erfasst werden können.
– **Bedienbar:** Die Navigation und Interaktionen sollten für alle Nutzer möglich sein.
– **Verständlich:** Informationen und Bedienung der Benutzeroberfläche sollten verständlich sein.
– **Robust:** Inhalte sollten mit verschiedenen Benutzeragenten, einschließlich assistiver Technologien, kompatibel sein.

2. **Struktur und Navigation:**
– **Überschriften und Struktur:** Verwenden Sie klare und konsistente Überschriftenstrukturen (H1, H2, H3 usw.).
– **Navigation:** Sorgen Sie für eine einfache und intuitive Navigation. Alle Bereiche der Website sollten leicht erreichbar sein.

3. **Texte und Inhalte:** – Was genau sind Alt-Texte – Das solltest du unbedingt wissen 

– **Alternativtexte:** Verwenden Sie Alt-Texte für Bilder, damit Screenreader den Inhalt beschreiben können. Was sind Alt-Texte? – Haben Sie keine Alt-Texte hinterlegt im Code, so kann der Screenreader  (Sprachsoftware) einer blinden Person z. B. nicht vorlesen, was auf dem Artikel Bild ist oder was Sie verkaufen möchten.  Der Kunde  mit Seh-Beeinträchtigung oder Blindheit oder sonstiger körperlicher Einschränkung hat dann keine Möglichkeit Ihre Seite zu besuchen und z. B. einzukaufen auf Ihrer Online-Seite. Stellen Sie sicher, dass hier Alt-Texte hinterlegt sind. Dazu müssen Sie sich den Code anschauen, oder jemand finden, oder jemand beauftragen, der sich hier auskennt und dies entsprechend ändert, falls hier nichts eingetragen ist.

Die Sache mit dem “mehr”   – Die Problematik

Achten Sie unbedingt darauf, dass Sie in Ihrem Shop nicht einfach schreiben: “Hier mehr” sondern genau formulieren, für den Screenreader, wo der Link dann genau hinführt. Mit “hier mehr” oder nur “mehr” zu schreiben, dann weiß die blinde Person nicht, wo führt der Link genau hin. Der Screenreader liest dann nur das Wort “mehr” vor. Es ist allgemein ratsam, sich mal einen Screenreader selber downzuloaden und dann gehen Sie auf Ihren Shop und lassen Sie sich mal Ihre Seite vorlesen. Sie können den NVDA nutzen. Dieser ist kostenlos. Schalten Sie den NVDA ein und lassen Sie sich Ihren Webshop mal vorlesen von dieser Software. Achten Sie darauf, wenn Sie mit der Maus auf ein Artikelbild gehen, ob dann vom Screenreader ihr Artikel auch vorgelesen wird. Zum Beispiel verkaufen Sie dort ein Tablet, dann würde der Screenreader z. B. “Tablet schwarz 300 Euro” vorlesen. Allerdings muss eben dieser Text, der dann vorgelesen wird natürlich im Alt-Tag im Code hinterlegt sein. Haben Sie keine Bildbeschriftung ( oder Alt-Tag – Texte, hinterlegt,), so wird da auch  nichts vorgelesen vom Screenreader. Das heißt, die Person wird sehr schnell Ihre Seite verlassen und nie wieder kommen. Das heißt, Sie sperren bestimmte Personengruppen aus, wenn Sie keine Alt-Texte hinterlegen. ( Barriere)

Auch müssen Sie davon ausgehen, dass viele Nutzer vielleicht eine körperliche Einschränkung haben, das heißt, diese  benutzen vielleicht gar keine Computer-Maus, wie Sie zuhause. Sondern diese Nutzer arbeiten mit der Tab-Taste auf der Tastatur. Diese finden Sie meist links oben auf der Tastatur. Das heißt, und dies wird unter Punkt 6 näher beschrieben, Sie sollten auch darauf achten, dass wenn der User die Tab-Taste nutzt und sich durch Ihren shop klickt, dass wenn jemand eine starke Sehbeeinträchtigung hat und z. B nicht blind ist, sofort sehen kann, wo er jetzt genau auf Ihrem Artikel ist. Es wird dann ein zusätzlicher Rand eingeblendet, z. B. rot umrandet, dass derjenige sich gerade hier befindet. Es nennt sich “Fokus-State”.  Siehe Punkt 6 – Tastaturbedienbarkeit. ( Technisches Programmier-Video folgt noch zur Anschauung)

– **Klare Sprache:** Vermeiden Sie komplizierte Formulierungen und Fachjargon.

4. **Formulare und Interaktionen:**
– **Beschriftungen:** Alle Formularelemente sollten klare und eindeutige Beschriftungen haben.
– **Fehlermeldungen:** Geben Sie klare Fehlermeldungen und Anweisungen zur Behebung an.

5. **Farbe und Kontrast:**
– **Kontrastverhältnis:** Achten Sie auf ausreichende Kontraste zwischen Text und Hintergrund.
Kontrast-Checker was ist das?

6. **Tastaturbedienbarkeit:**
– **Navigation:** Stellen Sie sicher, dass die gesamte Website ohne Maus, nur mit der Tastatur, bedienbar ist.
– **Fokus:** Der Fokus sollte immer sichtbar sein, damit Nutzer sehen können, wo sie sich auf der Seite befinden. Was ist ein Fokus?

7. **Multimedia:**
– **Untertitel und Transkripte:** Videos sollten Untertitel haben und Audioinhalte Transkripte.
– **Audiobeschreibungen:** Für wichtige visuelle Inhalte in Videos sollten Audiobeschreibungen bereitgestellt werden.

8. **Kompatibilität mit assistiven Technologien:**
– **Screenreader:** Testen Sie die Website mit verschiedenen Screenreadern.  ( Sprach-Software für blinde Menschen – Text wird vorgelesen)
– **Vergrößerungssoftware:** Stellen Sie sicher, dass die Website auch bei Vergrößerung gut lesbar und bedienbar bleibt.

9. **Testing und Feedback:**
– **Benutzerfeedback:** Sie haben die Möglichkeit den Shop auch von einer blinden Person gegen Bezahlung  überprüfen zu lassen auf Barrierefreiheit. 

– **Barrierefreiheitstests:** Führen Sie regelmäßige Barrierefreiheitstests durch, um sicherzustellen, dass alle Aspekte abgedeckt sind.

 

Weitere hilfreiche Links:

Große  Übersicht zum Thema Barrierefreiheit  und Tipps für Programmierer    Schulhof-Programmierung

Barrierefreier-Shop-  für   Anfänger Video ( 70 Minuten)

Berliner – Facebook-Gruppe – Barrierefreiheit  – Erstellt von einem Programmierer  Neu   Group – FB 

Was ist Wave?  ( Prüftool) Wave 

1 – Minute- Hörtest – Screenreader ( blinde Menschen nutzen einen Screenreader und lassen sich den Inhalt vorlesen)  Video 

Webseite von Aktion-Mensch zum Thema Online-Shop link 

Online-Shop & E-Commerce barrierefrei machen  – 2 Minuten – Video 

Online-Shop barrierefrei machen, Beispiel mit Prüfkriterien, Welche Test-Tools kann ich nutzen? Hochzeit-Video Shop

Ich kapier nicht: Was ist skip to link genau? mehr 

 Wichtig !   Bitte unbedingt  beachten! 

Bitte beachten Sie dass dies nur einige wichtige Dinge zur Orientierung sind und keine vollständige Liste. Informieren Sie sich zusätzlich auf der Webseite der Bundesfachstelle für Barrierefreiheit  bzw. wählen Sie einen Anwalt für Medienrecht