Zum Inhalt springen
BFSG-Compliance seit 2025

Shop, Web & E-Mail

Barrierefreiheit endet nicht auf der Startseite. Diese Kategorie betrachtet die Kanäle, über die Kundinnen und Kunden tatsächlich abschließen: Onlineshops mit Filtern, Varianten und Checkout, Formulare und Terminbuchungen, Kundenkonten, Newsletter und Transaktionsmails sowie gestaltete Landingpages. Wir zeigen, welche typischen Muster Menschen ausschließen — Bedienelemente ohne Namen, reine Farbcodierung, Zeitlimits, unlesbare Bildtexte in E-Mails — und wie sich diese Muster ersetzen lassen, ohne Gestaltung aufzugeben. Dazu gehören Prüfwege für Bestellstrecken, der Umgang mit Drittanbieter-Bausteinen und die Frage, wie sich Anforderungen in bestehende Design-Systeme und Vorlagen übernehmen lassen, damit neue Seiten von vornherein zugänglich entstehen. Ergänzend zeigen wir, wie sich wiederkehrende Bausteine einmal barrierefrei bauen und danach in Kampagnen und Shopseiten weiterverwenden lassen.

Barrierefreie Typografie: die vier StellschraubenZeilenhöhe1,5xline-heightAbsatzabstand2xnach AbsatzZeichenabstand0,12xletter-spacingWortabstand0,16xword-spacingDiese Textabstände muss ein Layout zulassen, ohne dass Inhalt verloren geht (W3C WCAG 2.2, 1.4.12)Klar unterscheidbare BuchstabenformenI l 1leicht verwechselbarI l 1Atkinson Hyperlegible200-Prozent-Skalierung100%200%ohne Layoutbruch (WCAG 1.4.4)10 %der Menschen sind vonLegasthenie betroffen(British Dyslexia Association)Bessere Lesbarkeit ohne SpezialfontLinksbündiger Satz, sans-serife Screen-Schrift undanpassbare Abstände statt Legasthenie-Font(Annals of Dyslexia, British Dyslexia Association)
Shop, Web & E-Mail 27. Mai 2026

Barrierefreie Typografie: Schrift, Größe und Lesbarkeit

Lesbare Schrift, Größe, Zeilenabstand und 200-Prozent-Skalierung nach WCAG 2.2: barrierefreie Typografie richtig umsetzen, ohne Legasthenie-Font-Mythos.

12 Min. Lesezeit
Barrierefreie E-Mail: worauf es ankommtBetreff: Ihre Bestellung ist unterwegsVon: Beispiel-Shop • an: kundin@example.comlang=deBestellbestätigungEchter Text statt Bild: vorlesbar, skalierbarund auch bei blockierten Bildern sichtbar.alt: Sneaker, seitlichrole=presentationSendung verfolgenKontrast 4,5:1geprüftSchriftgröße rund 14–16 px, per Zoom skalierbarFarben robust in hellem und dunklem Moduslang-AttributWCAG 3.1.162% ohne (EMC)Alt-TextWCAG 1.1.148% ohne (EMC)Kontrast 4,5:1WCAG 1.4.3Text auf HintergrundLayout-Tabellerole=presentation84% ohne (EMC)Schriftgrößeskalierbarrund 14–16 pxDark Moderobustin beiden Modi lesbar99,88%der HTML-E-Mails miternsten Barrieren (EMC)47,88%der Bilder ohneAlt-Text (EMC)So besteht die E-Mail den TestEchter Text, ausgezeichnete Sprache, geprüfter Kontrast, robust im Dark Mode
Shop, Web & E-Mail 18. Mai 2026

Barrierefreie Newsletter: E-Mail-Marketing nach BFSG

Barrierefreie Newsletter und Transaktionsmails nach BFSG und WCAG 2.1: lang-Attribut, Alt-Texte, Kontrast, echter Text und Dark Mode praktisch umsetzen.

13 Min. Lesezeit