aiMOOC

E-Commerce und digitale Produktinformationen – Barrierearme Produktseiten gestalten

QR-Code

E-Commerce und digitale Produktinformationen – Barrierearme Produktseiten gestalten

Ein praxisorientierter aiMOOC für die kaufmännische Ausbildung

Zielgruppe: Auszubildende im E-Commerce, Einzelhandel, Groß- und Außenhandelsmanagement und verwandten kaufmännischen Berufen.

Lernzeit: etwa 90 Minuten einschließlich der Praxisaufgaben; als mehrere kurze Unterrichtseinheiten einsetzbar.

Dein Lernziel: Du kannst Produktseiten verständlich gestalten, passende Alternativtexte schreiben, die Bedienbarkeit prüfen und kaufmännische Informationen korrekt darstellen.

Lernweg: Anschauen → Vergleichen → Ausprobieren → Verbessern → Begründen.

Wichtig: Alle Personen, Unternehmen, Produkte, Preise, Umsätze, Kennzahlen und Gesprächssituationen im Ausbildungsfall sind ausdrücklich fiktiv. Die eingesetzten Wikimedia-Bilder sind Anschauungsmaterial und keine Abbildungen der angebotenen Modellprodukte. Rechtsstand der recherchierten deutschen Vorschriften: 11. Oktober 2026. Die konkreten Ausbildungsdaten sind Modellannahmen.

Einleitung

Du arbeitest in einem Online-Shop. Deine Aufgabe ist es, Produkte so zu präsentieren, dass Kundinnen und Kunden sie finden, verstehen, vergleichen und bestellen können.

Was passiert aber, wenn Produktbilder nicht erklärt werden, Preise schwer erkennbar sind oder der Warenkorb ohne Maus nicht funktioniert?

Barrierearme Produktseiten sollen solche Hindernisse verringern. Sie verbinden Digitale Barrierefreiheit, Benutzerfreundlichkeit und kaufmännische Sorgfalt.

Videoimpuls: Einführung in Web Accessibility und W3C-Standards, W3C Web Accessibility Initiative. Aktiviere bei Bedarf die deutschen Untertitel.

Deutsches Transkript und Quellenangaben zum Video

Einstiegsfrage: Welche Schwierigkeiten können beim Online-Einkauf entstehen, wenn Du nicht sehen, hören oder eine Maus benutzen kannst?

Ausbildungsfall: Der fiktive Lernshop L

Ausgangssituation

Die fiktive Auszubildende Mira arbeitet im ebenfalls fiktiven Lernshop L. Das Unternehmen verkauft Schreibtischzubehör online an private Endkundinnen und Endkunden.

Für die Übung gelten diese Modellannahmen:

Merkmal	Fiktive Angabe
Unternehmen	Lernshop L
Beschäftigte	18 Personen
Jahresumsatz	2,8 Millionen Euro
Vertriebsgebiet	Deutschland
Versand	4,90 € pro Bestellung
Lieferzeit	2 bis 4 Werktage
Umsatzsteuer	19 % für die fiktiven Leuchten

Auftrag an Dich: Unterstütze Mira bei der Verbesserung zweier Produktseiten. Prüfe dabei Informationen, Bilder, Preise und den Bestellvorgang.

Gesprächsmedium: Die Teambesprechung

Mira: „Unsere Produktbilder sehen gut aus. Trotzdem brechen einige Kundinnen und Kunden den Einkauf ab.“

Kollege Ben: „Ein Kunde hat berichtet, dass er den Warenkorb mit der Tastatur nicht öffnen konnte.“

Mira: „Außerdem sind die Produktunterschiede fast nur durch Bilder erkennbar.“

Ausbildungsleitung: „Findet die Ursachen. Entwickelt eine verständliche Produktdarstellung und prüft die Bedienbarkeit.“

Deine Aufgabe: Lies den Dialog mit einer zweiten Person. Benenne drei Probleme und schlage jeweils eine konkrete Verbesserung vor.

Feedbackhinweis: Eine überzeugende Antwort beschreibt nicht nur das Problem, sondern erklärt, weshalb die Verbesserung den Einkauf erleichtert.

Lerneinheit 1: Warum digitale Barrierefreiheit wichtig ist

Dauer: 5 Minuten

Digitale Angebote müssen für Menschen mit unterschiedlichen Fähigkeiten zugänglich und bedienbar sein. Das betrifft beispielsweise Menschen mit Seh-, Hör- oder Bewegungseinschränkungen sowie Personen mit kognitiven Einschränkungen.

Auch bei hellem Sonnenlicht, einer verletzten Hand oder kleinen Smartphone-Bildschirmen hilft eine gute Gestaltung.

Die WCAG beschreiben vier grundlegende Prinzipien:

Prinzip	Bedeutung für Deinen Online-Shop
Wahrnehmbar	Informationen sind beispielsweise durch Textalternativen zugänglich.
Bedienbar	Warenkorb und Formulare funktionieren auch mit der Tastatur.
Verständlich	Produktdetails, Preise und Fehlermeldungen sind eindeutig.
Robust	Inhalte funktionieren mit unterschiedlichen Browsern und assistiven Technologien.

Merke: Barrierearm bedeutet, Hindernisse zu reduzieren. Der Begriff ist kein Nachweis dafür, dass alle gesetzlichen Anforderungen an Barrierefreiheit erfüllt sind.

Basisaufgabe

Betrachte die vier Prinzipien. Ordne jedem Prinzip ein Beispiel aus dem fiktiven Lernshop L zu.

Hilfe 1: Denke an Sehen, Bedienen, Verstehen und technische Kompatibilität.

Hilfe 2: Ein fehlender Alternativtext gehört zur Wahrnehmbarkeit.

Musterfeedback: Die vier Prinzipien greifen ineinander. Ein verständlicher Bestellknopf genügt beispielsweise nicht, wenn er mit der Tastatur unerreichbar bleibt.

Lerneinheit 2: Produktinformationen verständlich vergleichen

Dauer: 10 Minuten

Eine gute Produktseite beantwortet schnell die wichtigsten Fragen: Was wird angeboten? Welche Eigenschaften hat das Produkt? Was kostet es? Welche Zusatzkosten entstehen?

Produktvergleich im Lernshop L

Bildmaterial A: Symbolfoto für eine Übung zur Bildbeschreibung.

Bildmaterial B: Weiteres Symbolfoto für die Bildbeschreibung.

Achtung: Die folgenden Produktdaten sind erfunden und lassen sich nicht aus den Fotografien ableiten.

Fiktiver Produktvergleich
Eigenschaft	Leseleuchte A	Leseleuchte B
Gesamtpreis je Stück	29,90 €	39,90 €
Farbe	Schwarz	Weiß
Helligkeitsstufen	3	5
Kabellänge	1,5 m	2,0 m
Lieferzeit	2 bis 4 Werktage	2 bis 4 Werktage
Versand pro Bestellung	4,90 €	4,90 €

Alle genannten Modellpreise enthalten die angenommene Umsatzsteuer von 19 %.

Beobachte: Die Tabelle macht Preis und Eigenschaften unmittelbar vergleichbar. Die Bilder allein könnten diese Informationen nicht zuverlässig vermitteln.

Anwendungsaufgabe: Welche Leuchte passt?

Eine fiktive Kundin benötigt mindestens fünf Helligkeitsstufen und ein zwei Meter langes Kabel.

Frage: Welches Modell erfüllt beide Anforderungen? Wie hoch ist der Gesamtbetrag einschließlich Versand?

Hilfe 1: Markiere die beiden gewünschten Eigenschaften.

Hilfe 2: Vergleiche beide Tabellenspalten.

Hilfe 3: Addiere den Bruttopreis und die Versandkosten.

Begründetes Feedback: Leuchte B erfüllt beide Kriterien. Der Gesamtbetrag beträgt 44,80 €. Leuchte A ist zwar günstiger, erfüllt aber die angegebenen Anforderungen nicht. Eine gute kaufmännische Beratung orientiert sich an den Bedürfnissen der Kundschaft und nicht allein am niedrigsten Preis.

Lerneinheit 3: Lesbarkeit und Kontraste

Dauer: 8 Minuten

Eine Produktseite sollte kurze Sätze, eindeutige Überschriften, ausreichend große Schrift und gut erkennbare Bedienelemente verwenden.

Besonders wichtig ist der Kontrast zwischen Schrift und Hintergrund.

Für WCAG 2.2 auf Konformitätsstufe AA gelten bei gewöhnlichem Text grundsätzlich mindestens 4,5:1 und bei entsprechend großem Text mindestens 3:1 Kontrast. Für Textvergrößerung ist außerdem das WCAG-Kriterium zur Vergrößerbarkeit auf 200 % ohne Informations- oder Funktionsverlust wichtig.

Dies sind fachliche Prüfwerte, keine vollständige rechtliche Konformitätsprüfung eines Shops.

Bildimpuls: Vergleiche die Kontrastbereiche. Welche Farbkombinationen erscheinen besser lesbar?

Video: Clear Layout and Design, W3C WAI.

Englisches Transkript mit Bildbeschreibung

Produkttext im Vergleich

Variante A – schwer verständlich:

„Hochwertiges innovatives Beleuchtungssystem mit zahlreichen flexiblen Funktionskonfigurationen und optimierter Anwendungsvariabilität.“

Variante B – verständlicher:

„Schreibtischleuchte mit drei einstellbaren Helligkeitsstufen und 1,5 m langem Kabel.“

Aufgabe: Welche Variante liefert überprüfbare Produktinformationen?

Feedback: Variante B nennt zwei konkrete Eigenschaften. Solche Angaben unterstützen eine informierte Kaufentscheidung. Unklare Werbewörter ersetzen keine sachlichen Informationen.

Basisaufgabe: Produkttext verbessern

Überarbeite diese fiktive Beschreibung:

„Mega-Leuchte, supermodern, Topqualität, unglaublich flexibel!“

Formuliere daraus einen sachlichen Produkttext mit höchstens 35 Wörtern. Verwende nur die bekannten Modellangaben.

Hilfe 1: Streiche unklare Werbewörter.

Hilfe 2: Beginne mit Produktart und wichtigen Eigenschaften.

Musterlösung: „Die schwarze Leseleuchte A bietet drei Helligkeitsstufen und ein 1,5 m langes Kabel. Sie kostet 29,90 € inklusive Umsatzsteuer. Pro Bestellung fallen 4,90 € Versandkosten an.“

Feedback: Die überarbeitete Beschreibung ist präziser, weil Eigenschaften und Kosten erkennbar sind. Nicht belegte Qualitätsversprechen wurden vermieden.

Lerneinheit 4: Alternativtexte richtig schreiben

Dauer: 8 Minuten

Ein Alternativtext beschreibt die wesentliche Information oder Funktion eines Bildes. Ein Screenreader kann diesen Text ausgeben.

Dabei kommt es auf den Zweck des Bildes an.

Bildart	Richtige Vorgehensweise
Produktfoto	Relevante sichtbare Merkmale knapp beschreiben.
Reine Dekoration	Leeren Alternativtext verwenden.
Anklickbares Symbol	Funktion oder Ziel benennen.
Informationsgrafik	Wesentliche Aussage als Text zugänglich machen.

Wichtig: Ein dekoratives Bild erhält in HTML das Attribut alt="". Das ist nicht dasselbe wie ein fehlendes Alternativtext-Attribut.

Bildimpuls: Das Warenkorbsymbol

Für dieses Symbol in einem tatsächlich anklickbaren Warenkorb-Element ist beispielsweise „Warenkorb öffnen“ eine geeignete Funktionsbezeichnung.

Die Bezeichnung „Einkaufswagen mit Rädern“ beschreibt dagegen nur die Form des Symbols und erklärt nicht seine Funktion.

Anwendungsaufgabe: Alternativtext erstellen

Du pflegst ein Produktfoto ein. Darauf ist eine schwarze Tischleuchte vor hellem Hintergrund zu sehen.

Vergleiche drei mögliche Texte:

Vorschlag	Bewertung
„Bild“	Nicht aussagekräftig
„Mega-Super-Lampe zum Traumpreis“	Werbend, ohne Bildinformation
„Schwarze Schreibtischleuchte vor hellem Hintergrund“	Sachlich und informativ

Hilfe 1: Beschreibe, was wirklich sichtbar ist.

Hilfe 2: Vermeide unbelegte technische Angaben.

Feedback: Der dritte Text informiert über den Bildinhalt. Ein Alternativtext darf keine Merkmale erfinden, die weder im Bild zu erkennen noch anderweitig belegt sind.

W3C-Tutorial zu Bildalternativen

Entscheidungshilfe für Alternativtexte

Lerneinheit 5: Produktseiten ohne Maus bedienen

Dauer: 8 Minuten

Nicht alle Menschen bedienen einen Online-Shop mit der Maus. Manche verwenden eine Tastatur, Sprachsteuerung oder assistive Technologien.

Tastaturtest:

Tabulatortaste: Wechsle zwischen bedienbaren Elementen.
Eingabetaste: Aktiviere beispielsweise einen ausgewählten Link oder eine Schaltfläche.
Leertaste: Aktiviere beispielsweise eine fokussierte Schaltfläche.
Tastaturfokus: Kontrolliere, ob die aktuelle Position sichtbar ist.
Formular: Prüfe verständliche Beschriftungen und Fehlermeldungen.

Die genaue Tastenwirkung hängt vom jeweiligen Bedienelement ab.

Video: Keyboard Compatibility, W3C WAI.

Transkript und weitere Informationen

Video: Large Links, Buttons, and Controls, W3C WAI.

Transkript und weitere Informationen

Gesprächsmedium: Kundenservice

Fiktiver Kunde: „Ich nutze den Shop mit der Tastatur. Bei der Produktauswahl komme ich weiter, aber der Warenkorb-Button lässt sich nicht erreichen.“

Mira: „Dann müssen wir prüfen, ob der Button den Tastaturfokus erhält.“

Fiktiver Kunde: „Außerdem weiß ich bei der Bestellung nicht, welches Feld gerade aktiv ist.“

Mira: „Wir prüfen die Fokusanzeige und die Formularbeschriftungen.“

Aufgabe: Spielt das Gespräch in zwei Rollen. Erstellt anschließend eine kurze Fehlermeldung für das interne Shop-Team.

Begründetes Feedback: Eine hilfreiche Fehlermeldung nennt den Fehler, den betroffenen Bedienweg und das erwartete Verhalten. Beispielsweise: „Warenkorb-Button über Tab nicht erreichbar; Button muss fokussierbar und mit der Tastatur aktivierbar sein.“

Lerneinheit 6: Preise, Pflichtinformationen und Recht

Dauer: 10 Minuten

Kaufmännische Produktseiten müssen wichtige Angaben klar und verständlich vermitteln. Barrierearme Gestaltung ergänzt diese Anforderungen, ersetzt sie aber nicht.

Rechtslage für den deutschen Online-Handel

Barrierefreiheitsstärkungsgesetz (BFSG): Das Gesetz erfasst seit dem 28. Juni 2025 unter anderem Dienstleistungen im elektronischen Geschäftsverkehr für Verbraucher. Dazu gehören grundsätzlich auch entsprechende Online-Shops. Die BFSGV konkretisiert die Anforderungen. Besondere Übergangs- und Ausnahmeregelungen sind im Einzelfall zu prüfen.

Kleinstunternehmen: Nach § 2 Nummer 17 und § 3 Absatz 3 BFSG sind Unternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz oder Jahresbilanzsumme bei Dienstleistungen von den BFSG-Anforderungen ausgenommen. Für bestimmte erfasste Produkte gelten diese Ausnahmen nicht in gleicher Weise.

Modellfall: Lernshop L hat 18 Beschäftigte. Die Ausnahme für Kleinstunternehmen bei Dienstleistungen ist daher nicht anwendbar.

Barrierefreiheitsinformationen: § 14 BFSG und Anlage 3 verlangen bei betroffenen Dienstleistungen entsprechende, barrierefrei zugängliche Informationen über die Einhaltung der Barrierefreiheitsanforderungen. Dazu gehört grundsätzlich auch die Angabe der zuständigen Marktüberwachungsbehörde.

Preisangabenverordnung (PAngV): Gegenüber Verbrauchern müssen insbesondere Gesamtpreise angegeben werden. Bei Fernabsatzangeboten ist über die enthaltene Umsatzsteuer und mögliche zusätzliche Versandkosten zu informieren. Für bestimmte nach Gewicht, Volumen, Länge oder Fläche angebotene Waren ist zusätzlich der Grundpreis relevant. Eine einzelne Schreibtischleuchte fällt im Modellfall nicht unter diese typische Grundpreisregel.

Verbraucherinformationen: Art. 246a § 1 EGBGB verlangt unter anderem Informationen zu wesentlichen Eigenschaften, Gesamtpreis, Unternehmeridentität und weiteren Vertragsbedingungen. § 312j BGB enthält besondere Vorgaben zum elektronischen Bestellvorgang.

Bestellschaltfläche: Für entsprechende entgeltliche Verbraucherverträge muss die Zahlungspflicht eindeutig bestätigt werden. „Zahlungspflichtig bestellen“ ist eine ausdrücklich gesetzlich vorgesehene Beschriftung.

Umsatzsteuer: § 12 UStG sieht grundsätzlich 19 % Regelsteuersatz und für bestimmte Umsätze 7 % ermäßigten Steuersatz vor. Die Leuchten im fiktiven Ausbildungsfall werden mit 19 % modelliert.

Abgrenzung: Die WCAG 2.2 werden hier als fachlicher Übungsmaßstab verwendet. Für eine rechtliche Konformitätsbewertung sind die tatsächlich anwendbaren Anforderungen aus BFSG, BFSGV und einschlägigen technischen Normen zu prüfen. Eine bestandene Einzelübung ist kein Barrierefreiheitszertifikat.

Kaufmännischer Fall 1: Der richtige Bestellbetrag

Ein Kunde bestellt im fiktiven Lernshop L zweimal die Leseleuchte A.

Position	Betrag
Zwei Leuchten zu je 29,90 €	Zu berechnen
Versandkosten pro Bestellung	4,90 €
Gesamtbetrag	?

Aufgabe: Berechne den zahlbaren Gesamtbetrag und erkläre, welche Preisangaben vor Abschluss der Bestellung erkennbar sein müssen.

Gestufte Hilfen

Hilfe 1: Multipliziere Stückzahl und Stückpreis.
Hilfe 2: Addiere die einmalig anfallenden Versandkosten.
Hilfe 3: Rechne 2 × 29,90 € + 4,90 €.

Musterlösung: 64,70 €.

Begründetes Feedback: Die beiden Leuchten kosten zusammen 59,80 €. Hinzu kommen einmalig 4,90 € Versand. Die Endsumme muss vor der zahlungspflichtigen Bestellung klar erkennbar sein, damit keine überraschenden Zusatzkosten entstehen.

Kaufmännischer Fall 2: Brutto und Netto

Die fiktive Leuchte A kostet 29,90 € einschließlich 19 % Umsatzsteuer.

Aufgabe: Berechne näherungsweise Nettopreis und enthaltene Umsatzsteuer für ein Stück.

Gestufte Hilfen

Hilfe 1: Bei einem Bruttopreis ist die Umsatzsteuer bereits enthalten.
Hilfe 2: Teile den Bruttopreis durch 1,19.
Hilfe 3: Ziehe den gerundeten Nettopreis vom Bruttopreis ab.

Musterlösung: Nettopreis 25,13 €; enthaltene Umsatzsteuer 4,77 €.

Begründetes Feedback: 29,90 € geteilt durch 1,19 ergibt gerundet 25,13 €. Der Unterschied zu 29,90 € beträgt 4,77 €. Der Bruttopreis darf nicht mit dem Nettopreis verwechselt werden. Bei tatsächlichen Geschäftsvorfällen sind die anzuwendenden Rundungsregeln zu beachten.

Lerneinheit 7: Barrieren finden und wirtschaftlich handeln

Dauer: 10 Minuten

Eine barrierearme Produktseite ist nicht nur ein Gestaltungsprojekt. Sie gehört zu einer sorgfältigen Gestaltung der gesamten Customer Journey – von der Produktsuche bis zum Abschluss der Bestellung.

Fiktive Testdaten: Vorher und nachher

Ausschließlich erfundene Übungsdaten
Kennzahl	Vor einer Überarbeitung	Nach einer Überarbeitung
Besuche	100	100
Bestellungen	8	12
Bestellquote	8 %	12 %

Aufgabe: Berechne die Veränderung der Bestellquote in Prozentpunkten. Darfst Du daraus beweisen, dass die Überarbeitung allein die Veränderung verursacht hat?

Hilfe 1: Vergleiche die beiden Prozentwerte.

Hilfe 2: Subtrahiere 8 von 12.

Musterlösung: Die Bestellquote steigt um vier Prozentpunkte. Das entspricht relativ betrachtet einem Anstieg um 50 % gegenüber dem Ausgangswert.

Begründetes Feedback: Der rechnerische Anstieg ist eindeutig. Die Ursache dagegen nicht: Andere Faktoren könnten ebenfalls Einfluss gehabt haben. Die Daten sind ausdrücklich erfunden und erlauben keine Aussage über reale Wirkungen von Barrierefreiheit auf Umsatz oder Conversion.

Kaufmännischer Fall 3: Maßnahmen priorisieren

Mira erhält für eine erste Überarbeitungsrunde ein fiktives Zeitbudget von neun Arbeitsstunden.

Maßnahme	Modellaufwand
Fehlende Alternativtexte überarbeiten	4 Stunden
Tastaturbedienung des Warenkorbs reparieren	6 Stunden
Kontraste und Fokusanzeige verbessern	3 Stunden

Aufgabe: Welche Maßnahmen würdest Du zuerst beauftragen? Begründe Deine Reihenfolge aus Kundensicht und kaufmännischer Sicht.

Hilfe 1: Welche Barriere verhindert eine Bestellung vollständig?

Hilfe 2: Welche Maßnahmen lassen sich innerhalb von neun Stunden kombinieren?

Hilfe 3: Berücksichtige sowohl Auswirkungen als auch Aufwand.

Musterentscheidung: Zuerst Warenkorb und Fokus-/Kontrastprobleme bearbeiten. Zusammen sind das neun Stunden. Die Alternativtexte werden verbindlich für den nächsten Arbeitsschritt eingeplant.

Begründetes Feedback: Ein nicht bedienbarer Warenkorb verhindert den Kaufabschluss. Darum besitzt dieser Fehler hohe Priorität. Die Entscheidung ist jedoch nur eine plausible Priorisierung für die fiktiven Daten. Sie bedeutet nicht, dass andere rechtlich erforderliche Verbesserungen dauerhaft aufgeschoben werden dürfen.

Lerneinheit 8: Der Praxischeck

Dauer: 10 Minuten

Jetzt arbeitest Du wie eine verantwortliche Person für Produktdatenmanagement und Qualitätsmanagement.

Prüfauftrag: Kontrolliere eine selbst entworfene, fiktive Produktseite anhand dieser Checkliste.

Prüffrage	Prüfergebnis
Ist der Produkttitel eindeutig?	Ja / Nein
Sind wesentliche Produkteigenschaften als Text vorhanden?	Ja / Nein
Haben informative Bilder passende Alternativtexte?	Ja / Nein
Ist der Text ausreichend gut lesbar?	Ja / Nein
Funktioniert die Produktwahl per Tastatur?	Ja / Nein
Ist der Tastaturfokus sichtbar?	Ja / Nein
Sind Gesamtpreis und Versandkosten transparent?	Ja / Nein
Sind Formulare und Fehlermeldungen verständlich?	Ja / Nein
Ist der zahlungspflichtige Bestellabschluss eindeutig?	Ja / Nein

Merke: Eine Checkliste unterstützt die Qualitätsprüfung, ersetzt aber weder technische Prüfverfahren noch die Prüfung aller gesetzlichen Anforderungen.

Interaktive Aufgaben

Quiz: Teste Dein Wissen

Welches Ziel verfolgen barrierearme Produktseiten? (Möglichst viele Nutzungshindernisse reduzieren) (!Nur die Ladezeit verlängern) (!Produktbilder grundsätzlich entfernen) (!Ausschließlich die Schriftfarbe verändern)

Welcher Alternativtext passt zu einem informativen Produktfoto? (Eine knappe Beschreibung wesentlicher sichtbarer Merkmale) (!Eine beliebige Werbebotschaft) (!Immer nur das Wort Foto) (!Ausschließlich der Dateiname)

Wie wird ein rein dekoratives Bild für Screenreader üblicherweise gekennzeichnet? (Mit einem leeren Alternativtext) (!Mit einer ausführlichen Produktbeschreibung) (!Mit einem zufälligen Zahlenwert) (!Mit einer Preisangabe)

Welcher Mindestkontrast gilt nach WCAG 2.2 AA grundsätzlich für normalen Text? (4,5 zu 1) (!1 zu 1) (!2 zu 1) (!3 zu 1 für jeden Text)

Welche Taste wird gewöhnlich verwendet, um zum nächsten bedienbaren Element zu wechseln? (Tabulatortaste) (!Feststelltaste) (!Drucktaste) (!Rücktaste)

Welche Angabe unterstützt den verständlichen Produktvergleich am besten? (Konkrete technische Eigenschaften) (!Unbelegte Superlative) (!Ausschließlich dekorative Fotos) (!Versteckte Zusatzkosten)

Welcher Betrag ergibt sich bei 29,90 Euro Warenwert und 4,90 Euro Versand? (34,80 Euro) (!29,90 Euro) (!39,90 Euro) (!24,00 Euro)

Welches Gesetz ist für bestimmte Onlinehandelsdienstleistungen seit Juni 2025 besonders relevant? (Barrierefreiheitsstärkungsgesetz) (!Bundesurlaubsgesetz) (!Jugendarbeitsschutzgesetz) (!Berufsbildungsgesetz)

Welche Beschriftung erfüllt grundsätzlich die gesetzliche Eindeutigkeitsanforderung einer entgeltlichen Bestellschaltfläche? (Zahlungspflichtig bestellen) (!Weiter) (!Los gehts) (!Mehr erfahren)

Warum beweist eine höhere Bestellquote allein noch keinen Erfolg der Barrierefreiheitsmaßnahmen? (Weil weitere Einflussfaktoren möglich sind) (!Weil Bestellquoten nie berechnet werden können) (!Weil Produkttexte für Käufe unerheblich sind) (!Weil nur Versandkosten die Nachfrage bestimmen)

Begründetes Quizfeedback

Frage 1: Barrieren können bei Wahrnehmung, Bedienung und Verständnis entstehen.
Frage 2: Ein Alternativtext soll die relevante Bildinformation vermitteln.
Frage 3: Dekorative Bilder benötigen keine zusätzliche gesprochene Beschreibung.
Frage 4: Ein Kontrast von 4,5:1 ist der allgemeine Mindestwert für normalen Text auf WCAG-AA-Niveau.
Frage 5: Die Tabulatortaste ermöglicht die Navigation durch fokussierbare Elemente.
Frage 6: Konkrete Produktangaben unterstützen fundierte Kaufentscheidungen.
Frage 7: Warenwert und anfallende Versandkosten werden addiert.
Frage 8: Das BFSG erfasst unter anderem bestimmte Dienstleistungen im elektronischen Geschäftsverkehr.
Frage 9: Die Beschriftung muss die Zahlungsverpflichtung eindeutig benennen.
Frage 10: Eine Korrelation allein beweist keine Ursache.

Memory

Ordne den Begriffen die passenden Erklärungen zu.

Bildinformation	Alternativtext
Textlesbarkeit	Kontrast
Bedienung ohne Maus	Tastatursteuerung
Sichtbare Auswahlposition	Fokusanzeige
Preis einschließlich Steuern	Bruttopreis
Abschluss eines Online-Einkaufs	Bestellung

Feedback: Die Paare verdeutlichen, dass eine Produktseite sowohl Informationsqualität als auch funktionierende Bedienmöglichkeiten benötigt.

Drag and Drop

Ordne die Verbesserungsmaßnahmen den richtigen Bereichen einer Produktseite zu.

Ordne die richtigen Begriffe zu.	Bereich
Eindeutige Modellbezeichnung	Produkttitel
Sachliche Bildbeschreibung	Alternativtext
Gut erkennbarer Gesamtbetrag	Preisangabe
Eindeutige Zusatzkosten	Versandinformation
Mit Tastatur aktivierbarer Kaufabschluss	Bestellschaltfläche

Feedback: Jede Maßnahme beseitigt eine bestimmte Informations- oder Bedienungsbarriere. Zusammen unterstützen die Maßnahmen einen nachvollziehbaren Kaufvorgang.

Kreuzworträtsel

Screenreader	Wie heißt ein Hilfsprogramm, das digitale Inhalte vorlesen kann?
Kontrast	Wie heißt der Helligkeitsunterschied zwischen Text und Hintergrund?
Tastatur	Welches Eingabegerät kann eine Maus bei der Webbedienung ersetzen?
Alternativtext	Wie heißt eine textliche Alternative zu einem Bild?
Gesamtpreis	Welcher Preis enthält grundsätzlich alle verpflichtend einzubeziehenden Preisbestandteile?
Warenkorb	Wo werden ausgewählte Produkte vor einer Online-Bestellung gesammelt?

LearningApps

Weitere interaktive Übungen können über die thematische Suche gefunden werden. Die Suche ist kein Nachweis für eine bereits vorhandene passende Anwendung.

Lückentext

Eine Produktseite sollte verständliche

bereitstellen.

Bedeutungstragende Bilder benötigen passende

.

Ein Vorleseprogramm für digitale Inhalte heißt

.

Eine wichtige Voraussetzung für gute Lesbarkeit ist ausreichender

.

Die Navigation ohne Maus erfolgt häufig mit der

.

Die aktuell ausgewählte Bedienposition zeigt der

an.

Ein Preis einschließlich Umsatzsteuer wird als

bezeichnet.

Zusätzlich anfallende Lieferkosten sind als

transparent anzugeben.

Eine Bestellung wird häufig zunächst im

vorbereitet.

Das deutsche Gesetz zur Barrierefreiheit bestimmter Onlinehandelsdienstleistungen wird mit

abgekürzt.

Die Bedienbarkeit ist eines der vier zentralen

-Prinzipien.

Die verständliche Darstellung von Angeboten unterstützt die

.

Offene Aufgaben

Bearbeite die Aufgaben passend zu Deinem Lernstand. Nutze ausschließlich fiktive Geschäfts- und Personendaten.

Leicht – Basisaufgaben

Barrieren erkennen: Zeichne eine einfache Produktseite und markiere mindestens vier mögliche Hindernisse.
Bildbeschreibungen: Verfasse drei sachliche Alternativtexte für die gezeigten Übungsbilder und erkläre ihre Auswahl.
Texte verbessern: Überarbeite einen schwer verständlichen Werbetext zu einer klaren Produktbeschreibung.
Produktmerkmale: Erstelle eine Tabelle, die die zwei fiktiven Leuchten mit ihren wichtigsten Eigenschaften vergleicht.

Standard – Anwendungsaufgaben

Bedienbarkeit prüfen: Entwirf einen Tastaturtest für eine fiktive Shop-Seite und dokumentiere mögliche Fehler.
Preise darstellen: Gestalte eine Produktkarte mit Bruttopreis, Versandkosten und verständlichen Zusatzinformationen.
Beratungsgespräch: Entwickle und spiele einen Dialog, in dem Du einer fiktiven Kundin eine barrierearme Produktseite erklärst.
Seitenentwurf: Erstelle einen Papierprototyp oder digitalen Entwurf für die verbesserte Seite des Lernshops L.

Schwer – Transferaufgaben

Barrierefreiheitsprüfung: Entwickle ein Prüfprotokoll, das Produktinformationen, Tastaturbedienung und Verständlichkeit verbindet.
Kundenreise: Analysiere, an welchen Stellen vom Produktvergleich bis zur Bestellung Barrieren auftreten können, und entwirf passende Verbesserungen.
Maßnahmenplanung: Erstelle auf Grundlage ausschließlich fiktiver Arbeitszeiten und Budgets einen begründeten Maßnahmenplan.
Verbesserungsprojekt: Produziere eine kurze Präsentation oder ein selbst eingesprochenes Erklärvideo mit Transkript, das die Überarbeitung einer fiktiven Produktseite nachvollziehbar zeigt.

Feedbackkriterien für die offenen Aufgaben

Niveau	Worauf es ankommt	Begründetes Feedback
Basis	Fachbegriffe korrekt anwenden und Barrieren erkennen	Eine passende Beschreibung ist dann hilfreich, wenn sie konkrete Informationen vermittelt und keine Eigenschaften erfindet.
Anwendung	Eine praktisch bedienbare und verständliche Lösung entwickeln	Eine Verbesserung überzeugt, wenn sie mit einem nachvollziehbaren Test oder einer klaren Produktinformation überprüft werden kann.
Transfer	Mehrere Anforderungen abwägen und Entscheidungen begründen	Gute Entscheidungen berücksichtigen Kundennutzen, Ressourcen und geltende Pflichten, statt nur einzelne Gestaltungselemente zu optimieren.

Lernkontrolle

Die folgenden Aufgaben konzentrieren sich auf Zusammenhänge und Transferleistungen.

Gesamtanalyse: Analysiere eine bewusst fehlerhafte fiktive Produktseite. Erkläre, wie Lesbarkeit, Alternativtexte und Tastaturbedienung zusammenwirken.
Beratungsentscheidung: Begründe, warum eine teurere Leuchte für bestimmte Kundenbedürfnisse die bessere Wahl sein kann.
Kennzahleninterpretation: Werte zwei fiktive Bestellquoten aus und erkläre, weshalb aus der Veränderung allein keine Kausalität abgeleitet werden darf.
Rechtstransfer: Vergleiche einen fiktiven Shop mit acht Beschäftigten und einen Shop mit 18 Beschäftigten. Erläutere, welche weiteren Angaben zur Prüfung der Kleinstunternehmensausnahme benötigt werden und weshalb beide trotzdem barrierearme Angebote gestalten sollten.
Priorisierung: Entwickle bei begrenztem Zeitbudget eine begründete Reihenfolge für die Behebung verschiedener Barrieren.
Perspektivenwechsel: Erkläre anhand einer fiktiven Kundensituation, warum eine optisch attraktive Produktseite trotzdem schwer bedienbar sein kann.

Erwartete Qualität: Eine gute Bearbeitung nennt nicht nur die richtige Maßnahme, sondern erklärt Ursache, Wirkung, Alternativen und Grenzen der eigenen Bewertung.

Lernnachweis

Dein Abschlussprojekt: Eine verbesserte Produktseite für den fiktiven Lernshop L

Reiche ein selbst erstelltes Lernportfolio mit diesen Bestandteilen ein:

Produktentwurf: Eine übersichtliche Produktseite oder ein beschrifteter Prototyp.
Produktdaten: Eine nachvollziehbare Gegenüberstellung der beiden fiktiven Leuchten.
Bildalternativen: Mindestens zwei geeignete Alternativtexte mit kurzer Begründung.
Bedienungstest: Eine dokumentierte Prüfung der Tastaturnavigation und Fokusanzeige.
Kaufmännische Prüfung: Mindestens zwei korrekte Preisberechnungen und die Darstellung relevanter Pflichtinformationen.
Reflexion: Drei begründete Verbesserungsmaßnahmen und eine Einschätzung der Grenzen Deiner Prüfung.

Bewertungsraster

Kriterium	Modellpunkte
Verständlichkeit und Lesbarkeit	20
Qualität der Alternativtexte	20
Bedienbarkeit und Testdokumentation	20
Kaufmännische Richtigkeit	20
Fachliche Begründung und Reflexion	20
Gesamt	100

Das Bewertungsraster ist ein didaktisches Modell, kein offizielles Prüfungsraster einer Kammer oder Berufsschule.

Erfolgskriterium: Du kannst erläutern, warum Deine Produktseite verständlicher und besser bedienbar ist, und Du kannst Deine kaufmännischen Angaben rechnerisch nachvollziehen.

OERs zum Thema

Wikipedia: Barrierefreies Internet

Weitere Wikipedia-Artikel

Elektronischer Handel

Barrierefreiheitsstärkungsgesetz

Digitale Barrierefreiheit

Weitere Lernmedien

W3C-Lernvideo: Understandable Content.

Texttranskript zum Video

W3C-Videosammlung: Web Accessibility Perspectives – zehn Themen als zusammenhängende Einführung.

Originalquelle mit weiterführenden Informationen

Geprüfte Fachquellen und Rechtsstand

Recherche- und Prüfdatum: 11. Oktober 2026.

BFSG § 1: Anwendungsbereich.
BFSG § 2: Begriffsbestimmungen und Kleinstunternehmen.
BFSG § 3: Barrierefreiheitsanforderungen und Ausnahme für Kleinstunternehmen bei Dienstleistungen.
BFSG § 14: Pflichten von Dienstleistungserbringern.
BFSG Anlage 3: Informationen über die Barrierefreiheit von Dienstleistungen.
BFSGV: Konkretisierung der Anforderungen.
Bundesfachstelle Barrierefreiheit: FAQ zu Dienstleistungen im elektronischen Geschäftsverkehr.
PAngV § 3: Gesamtpreis.
PAngV § 4: Grundpreis.
PAngV § 6: Preisangaben im Fernabsatz.
EGBGB Art. 246a § 1: Verbraucherinformationen.
BGB § 312j: Pflichten beim elektronischen Bestellvorgang.
UStG § 12: Umsatzsteuersätze.
WCAG 2.2: Fachliche Richtlinien zur Web-Barrierefreiheit.
W3C WAI Images Tutorial: Alternativtexte und Bildtypen.

Hinweis zur Aktualität: Gesetze und Normen können sich ändern. Vor dem produktiven Einsatz einer realen Shop-Seite müssen insbesondere Geltungsbereich, Ausnahmen, anwendbare technische Anforderungen, Steuerbehandlung und Pflichtinformationen erneut geprüft werden. Dieser Kurs ersetzt keine individuelle Rechtsberatung.

Mediennachweise und Nutzungsrechte

Die verwendeten Wikimedia-Commons-Dateien wurden mit ihren konkreten Dateiseiten abgeglichen.

Datei	Urheberangabe	Lizenz
Wikimedia Accessibility mark.svg	Jan Ainali	CC0
Black desk lamp.jpg	ViajeroExtraviado	CC0
Retro desk lamp.jpg	WANGYIFAN2024	CC0
WCAG web safe contrast ratio.svg	Cmglee	CC BY-SA 4.0
Shopping cart icon.svg	Jbarta	CC0
Tab key.png	Edycop	CC BY-SA 3.0
Eye-icon.png	Lycopene579	CC0

Lizenztexte: CC0, CC BY-SA 4.0 und CC BY-SA 3.0.

Videorechte: Die eingebetteten Bildungsfilme stammen von der W3C Web Accessibility Initiative. Für ihre Verwendung gelten die Nutzungsbedingungen des W3C. Die jeweiligen Originalquellen und Transkriptseiten sind direkt im Kurs verlinkt. Die Videos werden nicht als gemeinfreie Medien ausgegeben. Es wurden keine Sofatutor-Videos verwendet.

W3C: Permission to Use WAI Material

Medienzugänglichkeit: Die Videoquellen bieten Transkripte; für das Einführungsvideo stehen deutsche Untertitel zur Verfügung. Für die Übungsdialoge im Kurs liegen direkt lesbare Textfassungen vor.

Datenschutz: Es werden keine realen Kundenprofile, echten betrieblichen Kennzahlen oder personenbezogenen Übungsdaten benötigt.