Barrierefreie Produktpräsentation

Screenreader trifft auf leere Felder

Olga aktiviert den Screenreader auf ihrem Workshop-Laptop und öffnet den Onlineshop ihres Ausbildungsbetriebs. Die synthetische Stimme liest: "Grafik, Bild1.jpg." Nächstes Produkt: "Grafik, Bild2.jpg." Und so weiter, 300 Mal. Kein Produktname, keine Farbe, kein Material. Eine blinde Person könnte in diesem Shop keinen Sneaker von einer Sandale unterscheiden.

Es ist Samstag, 10:30 Uhr, Accessibility-Workshop im Schulungsraum. Die Workshopleiterin ordnet ein: Seit dem 28.06.2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG, BGBl. 2021 I S. 2970) i.V.m. der Barrierefreiheitsstärkungsgesetz-Verordnung (BFSGV). Es setzt die EU-Richtlinie (EU) 2019/882 (European Accessibility Act) in deutsches Recht um. Pflichtig sind alle Online-Shops mit Verbrauchergeschäften, ausgenommen Kleinstunternehmen mit weniger als 10 Beschäftigten und unter 2 Mio. € Jahresumsatz. Bei Verstößen drohen Bußgelder bis 100.000 Euro nach § 37 BFSG; technische Vorgaben referenzieren auf WCAG 2.1 Level AA. Olgas Teamleiterin hat die Frist gesetzt: Bis Freitag müssen alle Produktseiten konform sein.

Was muss in das Alt-Text-Feld, damit ein Screenreader ein Produkt so beschreibt, dass jemand eine Kaufentscheidung treffen kann?

Vier Grundprinzipien barrierefreier Webinhalte

Die internationale Richtlinie WCAG (Web Content Accessibility Guidelines) definiert vier Grundprinzipien:

1. Wahrnehmbarkeit - alle Inhalte müssen über mindestens einen Sinneskanal erreichbar sein. Im Shop: Produktbilder brauchen Alternativtexte, Videos brauchen Untertitel.
2. Alle Funktionen müssen per Tastatur steuerbar sein - das Prinzip heißt Bedienbarkeit. Im Shop: Der "In den Warenkorb"-Button muss ohne Maus erreichbar sein.
3. Sprache und Navigation sind klar und vorhersehbar - das nennt sich Verständlichkeit. Im Shop: Fehlermeldungen erklären, was genau korrigiert werden muss.
4. Robustheit - der Code funktioniert mit verschiedenen Hilfstechnologien. Im Shop: Screenreader können Formulare und Produktdaten korrekt vorlesen.

Olgas leere Alt-Text-Felder verletzen Prinzip 1 direkt. Aber auch die anderen drei Prinzipien spielen im Shop eine Rolle.

🎬 Vorstellung: Öffne im Kopf deinen Lieblings-Onlineshop und schalte gedanklich den Bildschirm aus. Was hörst du - und reicht das, um ein Produkt in den Warenkorb zu legen?

Drei Regeln für gute Alternativtexte

Ein Alternativtext (alt-Text) ersetzt das Bild für alle, die es nicht sehen können. Drei Regeln helfen dir beim Formulieren:

Beschreibe, was kaufrelevant ist. Farbe, Material, Modellname, besondere Merkmale gehören rein. "Weißer Leder-Sneaker Nike Air Max 90, schwarze Sohle, Seitenansicht" liefert eine Kaufentscheidung. "Schuh" nicht.

Halte dich an maximal 125 Zeichen. Screenreader lesen den Text am Stück vor. Zu lange Texte werden abgeschnitten oder stören den Lesefluss.

Vermeide "Bild von" oder "Foto zeigt". Der Screenreader kündigt ohnehin an, dass es sich um ein Bild handelt. "Bild von einem Sneaker" verdoppelt die Information ohne Mehrwert.

Schlecht vs. gut - drei Produktbeispiele

Drei Vorher-Nachher-Vergleiche aus Olgas Shop:

Bild1.jpg → "Roter Textil-Laufschuh Adidas Ultraboost, weiße Sohle, Seitenansicht"

Produktfoto → "Schwarze Leder-Sandale Birkenstock Arizona, zwei Riemen, Korkfußbett"

Schuh blau → "Blauer Velours-Sneaker Veja Campo, weißes V-Logo, Frontalansicht"

Jeder gute Alt-Text beantwortet drei kaufrelevante Fragen: Was ist es? Wie sieht es aus? Von welcher Marke und welchem Modell? Mit diesen Angaben kann eine blinde Person genauso gezielt einkaufen wie jemand, der das Bild sieht.

🤔 Frage dich: Wie würdest du den Alt-Text für ein Produktbild formulieren, das einen olivgrünen Canvas-Rucksack mit Lederriemen von vorne zeigt?

Der Tastatur-Test

Gute Alt-Texte lösen nur einen Teil des Problems. Das WCAG-Prinzip Bedienbarkeit verlangt, dass der gesamte Shop per Tastatur funktioniert. Der schnellste Test: Maus weglegen und nur mit drei Tasten durch den Checkout navigieren.

Tab springt zum nächsten Element, Shift + Tab springt zurück, Enter aktiviert Buttons und Links.

Drei typische Barrieren fallen dabei auf:

1. Fehlende Fokusmarkierung - du drückst Tab, siehst aber nicht, welches Element gerade aktiv ist. Ohne sichtbaren Rahmen verlierst du die Orientierung.
2. Nicht erreichbare Buttons - der "Jetzt kaufen"-Button lässt sich per Tab nicht ansteuern, weil im Code ein div statt eines button-Elements steht.
3. Dropdown ohne Tastatursteuerung - das Feld "Versandart wählen" öffnet sich nur per Mausklick.

Barrieren dokumentieren und Lösungen vorschlagen

Für jede Barriere hältst du drei Punkte fest: wo sie auftritt (z.B. "Zahlungsseite, Feld Kreditkartennummer"), was genau passiert ("Fokus springt zum Seitenanfang zurück") und welche Verbesserung du vorschlägst ("Fokus-Reihenfolge im Code korrigieren").

So hätte es in Olgas Workshop laufen müssen: Alt-Texte für alle 300 Produkte schreiben, den Checkout per Tastatur durchtesten, die gefundenen Barrieren dokumentieren und die Liste an die Teamleiterin weiterreichen. Dann ist der Shop nicht nur BFSG-konform, sondern auch für 1,6 Millionen blinde und sehbehinderte Menschen in Deutschland nutzbar.

🧑‍🏫 Erkläre es im Kopf: Stell dir vor, du erklärst einer neuen Auszubildenden Person, wie sie in fünf Minuten prüft, ob ein Checkout per Tastatur bedienbar ist - welche drei Schritte nennst du?