Rivalry2

HTML Diff

27 added 27 removed

Original 2026-01-01

Modified 2026-03-10

1 - Stell dir vor, du hast gerade einen tollen neuen Online-Shop entdeckt und bist begeistert. Du hast ein paar Artikel in den Warenkorb gelegt und möchtest direkt kaufen - und dann geht es plötzlich nicht weiter, weil der Online-Shop keinen barrierefreien Bezahlvorgang anbietet.

1 + Stell dir vor, du hast gerade einen tollen neuen Online-Shop entdeckt und bist begeistert. Du hast ein paar Artikel in den Warenkorb gelegt und möchtest direkt kaufen - und dann geht es plötzlich nicht weiter, weil der Online-Shop keinen barrierefreien Bezahlvorgang anbietet.

2 Während das Internet unendliche Shopping-Möglichkeiten bietet, sind viele Menschen in der Nutzung stark eingeschränkt. Um ihnen trotzdem eine digitale Teilhabe zu ermöglichen, müssen Online-Shops für digitale Barrierefreiheit sorgen. Was genau hinter diesem Begriff steckt und warum die Umsetzung von Online-Barrierefreiheit sogar ein Wettbewerbsvorteil sein kann, erfährst du in diesem Artikel. Außerdem zeigen wir dir, wie du eine Website barrierefrei gestaltest und worauf du bei barrierefreiem E-Mail-Marketing achten solltest.

3 Erstelle mit Klaviyo barrierefreie E-Mails und schaffe ein besonders benutzerfreundliches Nutzererlebnis.

4 <a>Jetzt kostenlos testen</a>

5 <h2>Digitale Barrierefreiheit als Wettbewerbsvorteil für Online-Shops</h2>

6 Der Kerngedanke des Konzepts der digitalen Barrierefreiheit ist, dass alle Menschen unabhängig von ihren körperlichen und geistigen Fähigkeiten Zugang zum Internet haben sollen. In der EU - und somit auch in Deutschland - ist digitale Barrierefreiheit seit dem 28. Juni 2025 durch das<a>Barrierefreiheitsstärkungsgesetz</a>stark im Fokus. Best Practice ist, digitale Angebote barrierefrei zu gestalten. Allerdings bringt eine inklusive Nutzererfahrung für alle viele Vorteile mit sich.

7 <h3>Warum digitale Barrierefreiheit so wichtig ist</h3>

8 - Laut dem<a>Dritten Teilhabebericht der Bundesregierung</a>leben in Deutschland 13,04 Millionen Menschen mit Beeinträchtigung. Davon haben 10,6 Millionen eine anerkannte Behinderung und wiederum 7,8 Millionen davon haben eine anerkannte Schwerbehinderung.

8 + Laut dem<a>Dritten Teilhabebericht der Bundesregierung</a>leben in Deutschland 13,04 Millionen Menschen mit Beeinträchtigung. Davon haben 10,6 Millionen eine anerkannte Behinderung und wiederum 7,8 Millionen davon haben eine anerkannte Schwerbehinderung.

9 Quelle:<a>Aktion Mensch</a>: Zweiter Testbericht: So barrierefrei sind Online-Shops in Deutschland.

10 - Für E-Commerce-Unternehmen sind diese Zahlen besonders relevant: Laut<a>Aktion Mensch</a>shoppen Menschen mit Beeinträchtigung nämlich deutlich häufiger online als Menschen ohne Beeinträchtigung. In einer Umfrage gaben 61 % der befragten Menschen mit Beeinträchtigung an, dass sie sehr häufig oder häufig online shoppen. Bei der Gruppe der Menschen ohne Beeinträchtigung waren es nur 51 %. Als Grund für das bevorzugte Online-Shopping wurde vor allem eingeschränkte Mobilität genannt.

10 + Für E-Commerce-Unternehmen sind diese Zahlen besonders relevant: Laut<a>Aktion Mensch</a>shoppen Menschen mit Beeinträchtigung nämlich deutlich häufiger online als Menschen ohne Beeinträchtigung. In einer Umfrage gaben 61 % der befragten Menschen mit Beeinträchtigung an, dass sie sehr häufig oder häufig online shoppen. Bei der Gruppe der Menschen ohne Beeinträchtigung waren es nur 51 %. Als Grund für das bevorzugte Online-Shopping wurde vor allem eingeschränkte Mobilität genannt.

11 Zu den Einschränkungen, die die Internetnutzung erschweren, gehören:

12 <ul><li>Sehbehinderungen</li>

13 <li>Hörbehinderungen</li>

14 <li>motorische Einschränkungen</li>

15 <li>kognitive Beeinträchtigungen</li>

16 </ul>Menschen mit schweren Behinderungen nutzen für den Zugang zum Internet häufig assistive Technologien wie Sprachausgabe, Joysticks, Braille-Zeilen oder eine Steuerung ausschließlich über die Tastatur.

17 Auch Menschen ohne dauerhafte Beeinträchtigung können Barrieren in der alltäglichen Internetnutzung erleben und von digitaler Barrierefreiheit profitieren:

18 <ul><li>ältere Menschen</li>

19 <li>Menschen mit vorübergehender körperlicher Behinderung (z. B. gebrochener Arm)</li>

20 <li>Menschen mit geringer Technik-, Sprach- oder Lesekompetenz</li>

21 </ul>Wenn du deine Website barrierefrei gestaltest, kannst du direkt eine deutlich größere, online-affine Zielgruppe erreichen. Trotz dieser großen Chance gab es in Sachen digitaler Barrierefreiheit in Deutschland im Jahr 2024 noch sehr viel Nachholbedarf. In einer Studie von<a>Aktion Mensch</a>fielen fast 4 von 5 Unternehmen im Test der Barrierefreiheits-Basics durch, da sie keine Tastaturbedienbarkeit anboten. Bei einem<a>weiteren Test</a>kurz vor Inkrafttreten des Barrierefreiheitsstärkungsgesetzes im Juni 2025 gab es zwar einige Fortschritte, allerdings bestanden nur 30 % der Unternehmen den Barrierefreiheit-Basics-Test.

22 - Barrierefreiheit nutzt allen. Die Zahlen wurden dem<a>dritten Testbericht der Aktion Mensch</a>entnommen.<h3>Usability für alle: Wie digitale Barrierefreiheit Traffic, Engagement und Conversions steigert</h3>

22 + <h3>Usability für alle: Wie digitale Barrierefreiheit Traffic, Engagement und Conversions steigert</h3>

23 Wer digitale Barrierefreiheit auf der Website umsetzt, kann sich nicht nur über neue Zielgruppen freuen, die die Website zuvor nicht nutzen konnten, sondern auch wichtige Marketing-Kennzahlen steigern. Digitale Barrierefreiheit sorgt nämlich für ein besonders nutzerfreundliches Shopping-Erlebnis.

24 <ul><li>Eine klare Website-Struktur kann dieBounce-Rate verringern.</li>

25 <li>Eine bessere Lesbarkeit durch hohe Kontraste und Schriftgrößen kann dieVerweildauer und Conversion-Rate erhöhen.</li>

26 <li>Texte in leichter Sprache bringen die Botschaft auf den Punkt und werden von allen besser verstanden, was zu einerhöheren Click-Through-Ratein E-Mails und auf Produktseiten führen kann.</li>

27 <li>Barrierefreie Websites sind für Suchmaschinen-Crawler leichter zu indexieren und werden deshalbbevorzugt in Suchergebnissengelistet.</li>

28 <li>Barrierefreie Website-Designs mit klarer Content-Hierarchie verbessern das Nutzererlebnis, reduzieren Verwirrung und ermöglichen eineschnellere Navigation.</li>

29 </ul>Digitale Barrierefreiheit fördert also nicht nur die digitale Teilhabe von Menschen mit Behinderungen, sondern kann durchaus gut fürs Geschäft sein. Deshalb sollten Unternehmen die Umsetzung der neuen Vorgaben nicht als zusätzlichen auferlegten Punkt auf der Compliance-Checkliste betrachten, sondern als Chance, das Nutzererlebnis für alle zu verbessern.

30 Klaviyo-Tipp:

31 - Apropos Compliance: Klaviyo bietet Funktionen, die dich bei DSGVO-konformen Arbeiten unterstützen. Alle weiteren Infos dazu findest du im Artikel "Ist Klaviyo DSGVO-konform? Alles, was deutsche Unternehmen wissen müssen“.

31 + Apropos Compliance: Klaviyo bietet Funktionen, die dich bei DSGVO-konformen Arbeiten unterstützen. Alle weiteren Infos dazu findest du im Artikel "Ist Klaviyo DSGVO-konform? Alles, was deutsche Unternehmen wissen müssen“.

32 <h2>Einfache Navigation für alle: Best Practices für barrierefreie Websites</h2>

33 Du weißt bereits, warum digitale Barrierefreiheit wichtig ist. Jetzt geht es in die Umsetzung: Wie genau sieht eine barrierefreie Website eigentlich aus? Das ist in der Richtlinie<a>EN 301 549</a>geregelt, die auf die<a>Web Accessibility Guidelines 2.1</a>(WCAG 2.1) verweist.

34 Wichtiger Hinweis: Die in diesem Leitfaden bereitgestellten Informationen dienen ausschließlich der Information und stellen keine Rechtsberatung dar. Klaviyo empfiehlt allen seinen Kunden und allen E-Commerce-Händlern, sich zur Einhaltung des Barrierefreiheitsstärkungsgesetzes rechtlich beraten zu lassen.

35 Die zentralen Elemente, die eine Website barrierefrei machen, sind:

36 <ul><li>Tastaturbedienbarkeit</li>

37 <li>sinnvolle Überschriften und klare Content-Hierarchie</li>

38 <li>problemlose Verwendung von Assistenzsoftware (z. B. Screenreader)</li>

39 <li>Möglichkeit zum Heranzoomen der Texte</li>

40 <li>starke Farbkontraste</li>

41 <li>Alternativtexte für Bilder und Untertitel für audiovisuelle Inhalte</li>

42 <li>responsives Design, das sich automatisch an verschiedene Bildschirmgrößen und Geräte anpasst</li>

43 <li>leichte Sprache</li>

44 <li>sinnvolle Beschriftung von Formularen</li>

45 <li>schnelles Pausieren von animierten Inhalten</li>

46 </ul>Häufige Barrieren bei der Nutzung des Online-Shops sind:

47 <ul><li>Dropdown-Menüs, die nur mit der Maus angesteuert werden können</li>

48 <li>fehlende oder nicht aussagekräftige Alt-Texte für Produktbilder</li>

49 <li>unzureichende Farbkontraste für Text und CTA-Buttons</li>

50 <li>Formularfelder ohne sinnvolle Beschreibung im Checkout-Prozess</li>

51 <li>unsichtbarer oder fehlender Tastaturfokus bei der Navigation</li>

52 <li>fehlende oder inkonsistente Überschriften-Hierarchie (H1, H2, H3)</li>

53 <li>CAPTCHAs ohne barrierefreie Alternative</li>

54 <li>Texte, die im Bild eingebettet sind und nicht als Text wiederholt werden</li>

55 </ul>Im Test der<a>Aktion Mensch</a>zum Thema digitale Barrierefreiheit hatten deutsche Online-Shops die größten Schwierigkeiten bei der Umsetzung von Tastaturbedienbarkeit und Untertiteln für Multimedia-Inhalte.

56 - Quelle:<a>Statista</a>Im Folgenden schauen wir uns vier wichtige Merkmale einer barrierefreien Website genauer an:

56 + Im Folgenden schauen wir uns vier wichtige Merkmale einer barrierefreien Website genauer an:

57 <ol><li>Semantische HTML-Struktur für klare Seitenhierarchie</li>

58 <li>Kontraste und Schriftgrößen, die in jeder Situation funktionieren</li>

59 <li>Tastaturnavigation für barrierefreies Online-Shopping</li>

60 <li>Alternativtexte für Produktbilder</li>

61 </ol><h3>Semantische HTML-Struktur für klare Seitenhierarchie</h3>

62 Eine klare HTML-Struktur ist das Fundament einer barrierefreien Website. Semantisches HTML bedeutet, dass du die richtigen HTML-Elemente für den richtigen Zweck verwendest, damit Screenreader und andere assistive Technologien den Aufbau deiner Seite verstehen können.

63 Im Kern geht es um eine logische Überschriften-Hierarchie: H1 für den Haupttitel der Seite, H2 für Hauptabschnitte, H3 für Unterabschnitte. Halte dich immer an diese Reihenfolge und überspringe keine Ebenen. Du kannst beispielsweise nicht von der H1 direkt zu einer H3 springen. Dazwischen muss eine H2 liegen. Menschen, die einen Screenreader verwenden, navigieren nämlich oft direkt über Überschriften durch eine Seite, um Abschnitte zu überspringen. Eine durcheinandergewürfelte Überschriften-Struktur macht diese Navigation unmöglich.

64 - Screenshot der Überschriften-Hierarchie einer Produktseite von<a>Oatsome</a>im Tool<a>headingsMap</a>. Mit der Browser-Erweiterung kannst du schnell überprüfen, ob deine Überschriften einer logischen HTML-Struktur folgen.Zusätzlich zu Überschriften nutzt semantisches HTML sogenannte Landmark-Bereiche. Das sind HTML-Elemente, die verschiedene Bereiche deiner Website klar kennzeichnen: <header> für den Kopfbereich, <nav> für die Navigation, <main> für den Hauptinhalt und <footer> für den Fußbereich. Durch diese Kennzeichnung können Screenreader-Nutzer*innen direkt zu den relevanten Bereichen einer Seite springen - zum Beispiel direkt zum Hauptinhalt, ohne sich jedes Mal durch das Menü navigieren zu müssen.

64 + Zusätzlich zu Überschriften nutzt semantisches HTML sogenannte Landmark-Bereiche. Das sind HTML-Elemente, die verschiedene Bereiche deiner Website klar kennzeichnen: <header> für den Kopfbereich, <nav> für die Navigation, <main> für den Hauptinhalt und <footer> für den Fußbereich. Durch diese Kennzeichnung können Screenreader-Nutzer*innen direkt zu den relevanten Bereichen einer Seite springen - zum Beispiel direkt zum Hauptinhalt, ohne sich jedes Mal durch das Menü navigieren zu müssen.

65 Best Practices für semantisches HTML:

66 <ul><li>Eine H1 pro Seite:Nutze die H1 nur für den Haupttitel der Seite (z. B. Produktname oder Seitentitel). Unterabschnitte bekommen eine H2-Überschrift, weitere Untergliederungen eine H3-Überschrift. Wenn du weitere Unterabschnitte hinzufügen möchtest, kannst du auch H4 und H5 nutzen.</li>

67 - <li>Logische Hierarchie ohne Sprünge:Nach einer H2 folgt entweder eine H3 oder wieder eine H2 - niemals direkt eine H4. </li>

67 + <li>Logische Hierarchie ohne Sprünge:Nach einer H2 folgt entweder eine H3 oder wieder eine H2 - niemals direkt eine H4.</li>

68 <li>Landmark-Bereiche nutzen:Verwende <nav> für Navigationsmenüs und <main> für den Hauptinhalt der Seite. Das ermöglicht schnelleres Navigieren mit assistiven Technologien.</li>

69 - <li>Buttons und Links richtig einsetzen: <button> für Aktionen (z. B. "In den Warenkorb“), <a> für Links zu anderen Seiten. </li>

69 + <li>Buttons und Links richtig einsetzen: <button> für Aktionen (z. B. "In den Warenkorb“), <a> für Links zu anderen Seiten.</li>

70 </ul>Eine saubere HTML-Struktur hat außerdem einen positiven Nebeneffekt: Sie verbessert deine SEO-Rankings. In einer Studie von<a>Accessibilitychecker.org</a>und Semrush wurde der organische Website-Traffic von 847 Domains vor und nach der Umsetzung von Barrierefreiheitsmaßnahmen untersucht. Das Ergebnis: 73,4 % der Domains generierten nach der Umsetzung mehr Traffic - durchschnittlich 12 %. Suchmaschinen-Crawler nutzen nämlich dieselben strukturellen Hinweise wie Screenreader, um deine Inhalte zu verstehen und zu indexieren.

71 <h3>Kontraste und Schriftgrößen, die in jeder Situation funktionieren</h3>

72 Stell dir vor, du versuchst in hellem Sonnenlicht auf deinem Smartphone etwas zu lesen oder du öffnest abends im Bett eine Website im Dark Mode. Wenn der Kontrast zwischen Schrift und Hintergrund zu gering ist, kannst du nichts erkennen. Menschen mit Sehschwäche erleben diese Herausforderung Tag für Tag. Deshalb sind ausreichende Farbkontraste und flexible Schriftgrößen zentrale Elemente digitaler Barrierefreiheit.

73 - Die WCAG 2.1 definiert klare Richtwerte für Kontrastverhältnisse zwischen Schrift und Hintergrund als Best Practice:

73 + Die WCAG 2.1 definiert klare Richtwerte für Kontrastverhältnisse zwischen Schrift und Hintergrund als Best Practice:

74 - <ul><li>Normaler Text: mindestens4,5:1 </li>

74 + <ul><li>Normaler Text: mindestens4,5:1</li>

75 - <li>Text ab einer Schriftgröße von 18 pt oder fetter Text ab 14 pt: mindestens3:1 </li>

75 + <li>Text ab einer Schriftgröße von 18 pt oder fetter Text ab 14 pt: mindestens3:1</li>

76 - <li>Interaktive Elemente wie Buttons, Formularfelder und Icons: mindestens3:1 </li>

76 + <li>Interaktive Elemente wie Buttons, Formularfelder und Icons: mindestens3:1</li>

77 </ul>Was genau bedeutet das jetzt für deine Website? Bei Kombinationen von heller Schrift auf hellem Hintergrund oder dunkler Schrift auf dunklem Hintergrund ist der Farbkontrast zu niedrig. So kannst du beispielsweise keine hellgraue Schrift auf weißem Hintergrund und keine dunkelgraue Schrift auf schwarzem Hintergrund verwenden. Um zu überprüfen, ob die Farben auf deiner Website ausreichend Kontrast haben, kannst du kostenlose Online-Tools wie beispielsweise den<a>WebAIM Contrast Checker</a>verwenden. Wichtig: Die Farbkontraste müssen sowohl im hellen als auch im dunklen Anzeigemodus den Test bestehen. Falls du beim Test feststellen solltest, dass deine Markenfarben die Kontrastvorgaben nicht erfüllen, kannst du auf hellere oder dunklere Schattierungen ausweichen.

78 - Die Markenfarben von Glow 25 bestehen den Farbkontrast-Test.Klaviyo-Erfolgsstory:

78 + Klaviyo-Erfolgsstory:

79 Die deutsche Beauty-Brand Glow 25 konnte durch den Wechsel zu Klaviyo die Zustellbarkeit verbessern und hat mittlerweile über 35 aktive Flows im Einsatz. Durch eine Engagement-basierte Segmentierung konnte die Marke die Conversion-Rate um 50,4 % steigern. Weitere Details findest du in der<a>Erfolgsstory von Glow 25</a>.

80 - Bei Schriftgrößen empfiehlt sich die Verwendung relativer Einheiten wie rem oder em statt fester Pixel-Werte. So können Nutzer*innen mit Seheinschränkung die Standard-Schriftgröße in ihrem Browser von 16 px auf 20 px oder mehr erhöhen - und deine Website passt sich automatisch an.

80 + Bei Schriftgrößen empfiehlt sich die Verwendung relativer Einheiten wie rem oder em statt fester Pixel-Werte. So können Nutzer*innen mit Seheinschränkung die Standard-Schriftgröße in ihrem Browser von 16 px auf 20 px oder mehr erhöhen - und deine Website passt sich automatisch an.

81 Und noch ein wichtiger Punkt: Fehlermeldungen dürfen nicht nur farblich gekennzeichnet sein, sondern benötigen auch immer einen klaren Text, damit auch für farbenblinde Nutzende ersichtlich ist, dass ein Fehler vorliegt.

82 <h3>Tastaturnavigation für barrierefreies Online-Shopping</h3>

83 Viele Menschen nutzen das Internet ausschließlich mit der Tastatur - sei es aufgrund motorischer Einschränkungen, weil sie assistive Technologien wie Joysticks nutzen, oder aus Effizienzgründen. Doch genau hier scheitern die meisten Online-Shops: Im Test der<a>Aktion Mensch</a>fielen 2025 70 % der Unternehmen beim Barrierefreiheits-Basics-Test durch, weil sie keine funktionierende Tastaturbedienbarkeit beim Bezahlvorgang anboten.

84 Die Funktionsweise ist eigentlich einfach: Mit der Tab-Taste springen Nutzer*innen von einem interaktiven Element zum nächsten. Wenn sie etwas auswählen wollen, drücken sie die Enter-Taste. Bei der Gestaltung einer barrierefreien Website ist es deshalb wichtig, dass die Reihenfolge der Tastaturbedienung dem logischen Lesefluss folgt. Nutzer*innen sind außerdem auf einen sichtbaren Fokus-Indikator angewiesen, der eindeutig anzeigt, wo sie sich gerade befinden. Ohne diese Umrandung oder Hervorhebung müssen Nutzer*innen ohne visuelle Orientierung durch die Seite navigieren, was zu einem sehr frustrierenden Nutzererlebnis führt.

85 Praktischer Test:

86 Versuche einmal selbst, einen Kauf in deinem Online-Shop nur mit der Tastatur abzuschließen. Nutze die Tab-Taste zum Navigieren, Enter zum Klicken und die Pfeiltasten für Dropdown-Menüs. Kommst du durch den gesamten Checkout-Prozess oder bleibst du irgendwo stecken?

87 Häufige Tastatur-Fallen sind Dropdown-Menüs, die nur mit der Maus ausgewählt werden können, modale Dialogfenster ohne Fokus-Steuerung und Bildkarussells ohne Tastatursteuerung.

88 Best Practices für die Umsetzung:

89 <ul><li>Alle interaktiven Elemente müssen per Tab-Taste erreichbar sein:Buttons, Links, Formularfelder, Produktfilter und Dropdown-Menüs.</li>

90 <li>Sichtbarer Fokus-Indikator:Entferne nie den Standard-Fokus-Rahmen ohne alternative Hervorhebung.</li>

91 <li>Fokus im Pop-up-Fenster:Wenn ein Pop-up-Fenster aufgeht, springt die Navigation automatisch in das Fenster und verlässt es erst, wenn es geschlossen wurde.</li>

92 - </ul>Bei Oatsome können Nutzer*innen über die Tastaturbedienung ein Barrierefreiheits-Widget öffnen und dort diverse Einstellungen rund um digitale Barrierefreiheit festlegen.Auch eine Navigation durch den Checkout-Prozess funktioniert mit reiner Tastaturbedienung. Dabei kennzeichnet die schwarze Umrandung das aktuell ausgewählte Element.Klaviyo-Erfolgsstory:

92 + </ul>Klaviyo-Erfolgsstory:

93 Die deutsche Food-Marke Oatsome nutzt Klaviyo für personalisiertes Omnichannel-Marketing und konnte durch eine smarte Segmentierungsstrategie den Umsatz aus Rückgewinnungs-Flows verdoppeln. Alle Details findest du in der<a>Erfolgsstory von Oatsome</a>.

94 <h3>Alternativtexte für Produktbilder</h3>

95 Alternativtexte (Alt-Texte) sind kurze Texte, die den Inhalt von Bildern beschreiben. In erster Linie richtet sich der Alt-Text an blinde Menschen, die einen Screenreader verwenden. Er kann aber auch hilfreich sein, wenn Bilder nicht geladen werden können. Für E-Commerce-Unternehmen sind aussagekräftige Alt-Texte besonders wichtig: Ohne die Bildbeschreibung können blinde Kund*innen deine Produkte nicht erfassen.

96 Der häufigste Fehler: Viele Online-Shops verwenden generische Alt-Texte wie "Produktbild“. Das ist allerdings verschenktes Potenzial, weil blinde Menschen das Bild so nicht einordnen können. Ein guter Alt-Text beschreibt, was auf dem Bild tatsächlich zu sehen ist - nicht, dass es sich um ein Bild handelt.

97 Schlechtes Beispiel:"Produktbild“ oder "Mantel“Gutes Beispiel:"Schwarzer Wollmantel mit Gürtel und Seitentaschen“

98 Es gibt einen wichtigen Unterschied zwischen informativen und dekorativen Bildern: Produktbilder, die Kaufentscheidungen beeinflussen, brauchen informative Alt-Texte. Rein dekorative Elemente wie Hintergrundmuster können ein leeres Alt-Attribut bekommen, damit Screenreader sie überspringen.

99 Best Practices für Alt-Texte:

100 <ul><li>Beschreibe, was du siehst:Nenne bei Kleidung beispielsweise Farbe, Material und besondere Merkmale.</li>

101 <li>Halte es kurz und knapp:Bleibe - wenn möglich - unter 150 Zeichen. Screenreader-Nutzer*innen wollen schnell die Kerninfo erfassen.</li>

102 <li>Vermeide Phrasen wie "Bild von“ oder "Foto von“:Screenreader kündigen bereits an, dass es sich um ein Bild handelt.</li>

103 </ul>Praktischer Test:

104 Du würdest gerne wissen, was für Alt-Texte deine Bilder aktuell haben? Dann kannst du im Browser (Chrome und Edge) unter Einstellungen > Datenschutz und Sicherheit > Website-Einstellungen > Bilder "Websites dürfen keine Bilder anzeigen“ auswählen. Dadurch wird das Laden der Bilder unterdrückt und stattdessen der Alt-Text angezeigt.

105 - Oatsome-Produktseite mit unterdrückten Bildern. Die Alt-Texte für die verschiedenen Produktfotos sind kurz, prägnant und informativ.<h2>Barrierefreie E-Mail-Kampagnen für maximale Reichweite</h2>

105 + <h2>Barrierefreie E-Mail-Kampagnen für maximale Reichweite</h2>

106 - Bei der digitalen Barrierefreiheit liegt das Hauptaugenmerk meistens auf Websites. Aber was ist eigentlich mit E-Mails? Müssen die auch barrierefrei sein? Best Practice ist, E-Mails barrierefrei zu gestalten. E-Mails sind ein sehr wichtiger digitaler Touchpoint und werden deshalb auch im Barrierefreiheitsstärkungsgesetz als digitaler Kommunikationskanal erwähnt. Schließlich senden Unternehmen Jahr für Jahr Hunderte von E-Mails - von Bestätigungsmails über Newsletter bis hin zu besonderen Rabattaktionen. Um alle Kund*innen zu erreichen, sollten E-Mails ebenfalls barrierefrei sein.

106 + Bei der digitalen Barrierefreiheit liegt das Hauptaugenmerk meistens auf Websites. Aber was ist eigentlich mit E-Mails? Müssen die auch barrierefrei sein? Best Practice ist, E-Mails barrierefrei zu gestalten. E-Mails sind ein sehr wichtiger digitaler Touchpoint und werden deshalb auch im Barrierefreiheitsstärkungsgesetz als digitaler Kommunikationskanal erwähnt. Schließlich senden Unternehmen Jahr für Jahr Hunderte von E-Mails - von Bestätigungsmails über Newsletter bis hin zu besonderen Rabattaktionen. Um alle Kund*innen zu erreichen, sollten E-Mails ebenfalls barrierefrei sein.

107 Das bedeutet konkret:

108 <ul><li>klare HTML-Struktur</li>

109 <li>klarer Call-to-Action</li>

110 <li>sinnvolle Alt-Texte</li>

111 <li>starke Farbkontraste</li>

112 - </ul>E-Mails, die diesen Best Practices folgen, sind nicht nur für Menschen mit Einschränkungen leicht lesbar, sondern für alle Nutzer*innen benutzerfreundlich und eindeutig. Entsprechend können sich Barrierefreiheitsmaßnahmen auch sehr positiv auf das Engagement deiner Zielgruppe auswirken. Da barrierefreie E-Mails auch von Maschinen leichter zu lesen sind, kann sich auch deine Zustellrate verbessern.

112 + </ul>E-Mails, die diesen Best Practices folgen, sind nicht nur für Menschen mit Einschränkungen leicht lesbar, sondern für alle Nutzer*innen benutzerfreundlich und eindeutig. Entsprechend können sich Barrierefreiheitsmaßnahmen auch sehr positiv auf das Engagement deiner Zielgruppe auswirken. Da barrierefreie E-Mails auch von Maschinen leichter zu lesen sind, kann sich auch deine Zustellrate verbessern.

113 <h3>Best Practices für barrierefreie E-Mails</h3>

114 - E-Mails sind technisch etwas anders aufgebaut als Websites: Sie verwenden eine spezialisierte HTML-Struktur, damit sie in verschiedenen E-Mail-Programmen wie Outlook, Gmail oder Apple Mail korrekt dargestellt werden. Die gute Nachricht: Moderne<a>E-Mail-Plattformen</a>wie Klaviyo nehmen dir die technische Komplexität ab und generieren den Code automatisch im Hintergrund, während du deine E-Mail-Vorlage im<a>Drag-and-Drop-Editor</a>anpasst.

114 + E-Mails sind technisch etwas anders aufgebaut als Websites: Sie verwenden eine spezialisierte HTML-Struktur, damit sie in verschiedenen E-Mail-Programmen wie Outlook, Gmail oder Apple Mail korrekt dargestellt werden. Die gute Nachricht: Moderne<a>E-Mail-Plattformen</a>wie Klaviyo nehmen dir die technische Komplexität ab und generieren den Code automatisch im Hintergrund, während du deine E-Mail-Vorlage im<a>Drag-and-Drop-Editor</a>anpasst.

115 Schauen wir uns einmal genau an, auf welche Punkte du in Sachen HTML-Struktur, Bilder, Farbkontraste und responsives Design achten solltest.

116 <h4>Semantische HTML-Struktur:</h4>

117 <ul><li>Echte Überschriften verwenden: Verwende HTML-Tags wie <h1>, <h2>, <h3> statt nur fett oder groß formatierten Text, damit Screenreader zwischen Abschnitten springen können.</li>

118 <li>lang=“de“ im HTML-Tag: Lege die Sprache fest, damit die Aussprache des Screenreaders korrekt ist.</li>

119 <li>Logische Lesereihenfolge:Beginne mit den wichtigsten Inhalten und gehe später ins Detail. Screenreader lesen E-Mails linear von oben nach unten.</li>

120 <li>HTML- und Klartextversion bereitstellen:Gib Leser*innen die Option, nur den Textinhalt ohne HTML-Formatierung zu lesen.</li>

121 <li>Primärer CTA als erster Link:Stelle sicher, dass der wichtigste Call-to-Action als erstes klickbares Element erscheint.</li>

122 </ul><h4>Bilder und Alt-Texte:</h4>

123 <ul><li>Beschreibende Alt-Texte für alle Produktbilder:"Schwarzer Wollmantel mit Gürtel und Seitentaschen“ statt nur "Mantel“ oder "Produktbild“</li>

124 <li>Texte im Bild auch als Text:Wichtige Informationen wie Buttons müssen als echter Text codiert sein - Screenreader können Text in Bildern nicht vorlesen.</li>

125 <li>Leere Alt-Texte für dekorative Bilder: alt=““ für rein dekorative Elemente, damit Screenreader sie überspringen.</li>

126 <li>E-Mail ohne Bilder testen:Deine Botschaft muss auch ohne Bilder verständlich sein.</li>

127 </ul><h4>Farbkontraste und Text:</h4>

128 <ul><li>Mindestkontrast 4,5:1 für normalen Text:Genau wie bei barrierefreien Websites muss auch bei barrierefreien E-Mails der Farbkontrast eine gute Lesbarkeit gewährleisten.</li>

129 <li>Informationen nicht nur über Farbe vermitteln:Nutze zusätzlich Icons, Text oder Symbole für wichtige Hinweise.</li>

130 <li>Dark Mode berücksichtigen:Teste die Farbkontraste auch im dunklen Modus.</li>

131 <li>Einfache Sprache und kurze Absätze:Vermeide Schachtelsätze und Fachbegriffe, bringe deine Botschaft leicht verständlich auf den Punkt.</li>

132 </ul><h4>Responsive Design:</h4>

133 <ul><li>Mindestens 44×44 px für klickbare Elemente:Touch-Targets müssen so groß sein, dass man sie leicht anklicken oder antippen kann - besonders auf mobilen Geräten.</li>

134 <li>Schriftgröße mindestens 14-16 px:Stelle sicher, dass deine Texte auch ohne Zoom gut lesbar sind.</li>

135 <li>Mobile-First:Einspaltige Layouts funktionieren auf allen Geräten und sind auch für Screenreader und andere assistive Technologien optimal. Pluspunkt: Die meisten Menschen öffnen E-Mails sowieso auf dem Smartphone.</li>

136 </ul><h2>Barrierefreie E-Mail-Kampagnen mit Klaviyo</h2>

137 Mit Klaviyo kannst du ganz leicht überprüfen, ob deine E-Mails barrierefrei sind, ohne dafür Programmierkenntnisse zu benötigen. Besonders praktisch: Wenn du mit<a>E-Mail-Vorlagen</a>arbeitest, kannst du sie einmal auf Barrierefreiheit überprüfen und musst anschließend nur Bilder und Texte anpassen.

138 <ul><li>Integrierte Alt-Text-Felder:Bei jedem Bild wirst du automatisch zur Eingabe eines Alt-Texts aufgefordert. So wird digitale Barrierefreiheit Teil des Workflows.</li>

139 <li>Mobile-optimierte Templates:Responsives Design ist bei Klaviyo-Vorlagen standardmäßig eingebaut. Deine E-Mails passen sich automatisch an Smartphone, Tablet und Desktop an.</li>

140 <li>Automatische Klartext-Version:Zu jeder HTML-E-Mail wird parallel eine Textversion generiert, die bei Darstellungsproblemen einspringt. Mehr dazu findest du im Help-Center-Artikel<a>"So bearbeitest du die reine Textversion einer HTML-E-Mail“</a>.</li>

141 </ul><h3>Templates mit eingebauter semantischer HTML-Hierarchie</h3>

142 E-Mail-Vorlagen von Klaviyo haben häufig bereits eine semantische HTML-Hierarchie eingebaut. Beispiel: Diese Vorlage für Hotel-Deals platziert die richtigen H1-Tags für den Titel "WEEKEND GETAWAY“ im HTML-Code.

143 - E-Mail-Vorlage mit integrierter HTML-Hierarchie von Klaviyo.<h3>Überprüfen der HTML-Struktur</h3>

143 + <h3>Überprüfen der HTML-Struktur</h3>

144 Du möchtest dir den HTML-Code hinter deinen Klaviyo-E-Mails anschauen und gegebenenfalls ändern? Das kannst du in vier einfachen Schritten machen:

145 <ol><li>Speichere deine E-Mail als Vorlage.</li>

146 <li>Kopiere den HTML-Code und füge ihn in ein Programm deiner Wahl ein, um ihn zu überprüfen und gegebenenfalls zu bearbeiten.</li>

147 <li>Falls du Änderungen vornimmst und den überarbeiteten HTML-Code wieder hochladen möchtest, kannst du ihn unter "Vorlagen“ importieren und einfügen.</li>

148 </ol>Gehe zu<a>"Vorlagen“</a>und klicke bei der gewünschten Vorlage auf die drei Punkte unten rechts und anschließend auf "Vorlage exportieren“.

149 - So exportierst du den HTML-Code einer Vorlage in Klaviyo.So lädst du den überarbeiteten HTML-Code in Klaviyo hoch.Genaue Schritt-für-Schritt-Anleitungen findest du in unseren Help-Center-Artikeln:

149 + Genaue Schritt-für-Schritt-Anleitungen findest du in unseren Help-Center-Artikeln:

150 <ul><li><a>So exportierst du den HTML-Code für eine E-Mail-Vorlage</a></li>

151 <li><a>Wie man eine benutzerdefinierte HTML-Vorlage importiert</a></li>

152 </ul><h3>Alt-Texte</h3>

153 Im Klaviyo E-Mail-Editor ist es besonders einfach, Alt-Texte zu erstellen, weil sie fester Bestandteil der Benutzeroberfläche sind. Wenn du auf ein Bild in der E-Mail klickst, findest du im Menü direkt unter dem Bild das Textfeld für den Alt-Text.

154 - Im E-Mail-Editor von Klaviyo findest du das Textfeld für den Alt-Text in der Menüleiste direkt unter dem Bild.<h2>Deine Roadmap zur digitalen Barrierefreiheit</h2>

154 + <h2>Deine Roadmap zur digitalen Barrierefreiheit</h2>

155 Du kennst jetzt die Theorie. Aber wie setzt du das Gelernte am besten um? Nach dem 80/20-Prinzip solltest du zunächst dort ansetzen, wo du die größte Wirkung erzielst, und dich nach und nach vorarbeiten.

156 <h3>Überprüfung der am häufigsten genutzten Touchpoints</h3>

157 Starte mit einem einfachen Audit: Versuche, deinen Checkout-Prozess nur mit der Tastatur zu durchlaufen (Tab, Enter, Pfeiltasten). Prüfe die Farbkontraste deiner wichtigsten Call-to-Action-Buttons. Teste, ob alle Formularfelder sinnvoll beschriftet sind.

158 E-Mail-Marketing ist ein strategischer Startpunkt: E-Mails sind schneller barrierefrei zu gestalten als komplexe Websites. Außerdem kannst du Änderungen sofort testen.

159 So könnte deine To-do-Liste für die ersten Schritte in Richtung Barrierefreiheit aussehen:

160 <ul><li>Transaktions-E-Mails:Bestellbestätigungen, Passwort-Resets, Versandbenachrichtigungen - diese E-Mails müssen für alle Kund*innen lesbar sein.</li>

161 <li>Welcome- und Warenkorbabbruch-Flows:Verhaltensbasierte automatisierte<a>Flows</a>erreichen viele Nutzer*innen und haben hohes Conversion-Potenzial.</li>

162 <li>Checkout-Audit:Prüfe Tastaturnavigation und Formular-Labels auf Barrierefreiheit.</li>

163 <li>Häufig besuchte Produktseiten:Optimiere zunächst die Produktseiten deiner Bestseller.</li>

164 </ul><h3>Website-Optimierung schrittweise angehen</h3>

165 - Deine Website barrierefrei zu gestalten ist ein längerfristiges Projekt, das möglicherweise Entwickler-Unterstützung erfordert. Der Schlüssel: ein stufenweiser Ansatz. Beginne mit schnell durchführbaren Änderungen wie Alt-Texten und Überschriften-Hierarchie, bevor du strukturelle Änderungen vornimmst. Ein professioneller Barrierefreiheit-Audit oder automatisierte Testing-Tools können dir Erkenntnisse über deinen aktuellen Barrierefreiheitsstatus geben.

165 + Deine Website barrierefrei zu gestalten ist ein längerfristiges Projekt, das möglicherweise Entwickler-Unterstützung erfordert. Der Schlüssel: ein stufenweiser Ansatz. Beginne mit schnell durchführbaren Änderungen wie Alt-Texten und Überschriften-Hierarchie, bevor du strukturelle Änderungen vornimmst. Ein professioneller Barrierefreiheit-Audit oder automatisierte Testing-Tools können dir Erkenntnisse über deinen aktuellen Barrierefreiheitsstatus geben.

166 Stufenplan für Website-Optimierung:

167 <ul><li>Phase 1:Alt-Texte hinzufügen, Überschriften-Hierarchie korrigieren (H1 → H2 → H3), Farbkontraste verbessern</li>

168 <li>Phase 2:Tastaturnavigation sicherstellen, Skip-Links zum Hauptinhalt hinzufügen</li>

169 <li>Phase 3:Formulare prüfen und optimieren, verständliche Fehlermeldungen implementieren.</li>

170 <li>Phase 4:Tests mit echten Nutzer*innen durchführen und Feedback umsetzen</li>

171 </ul><h2>Erstelle barrierefreie E-Mail-Vorlagen mit Klaviyo</h2>

172 Um bei den E-Mails, die du an deine Kund*innen schickst, nicht den Überblick zu verlieren, solltest du mit einem fortschrittlichen<a>E-Mail-Marketing-Tool</a>arbeiten.<a>Klaviyo</a>bietet nicht nur E-Mail-Vorlagen, mit denen du leicht barrierefreie E-Mails gestalten kannst, sondern ein ganzes Arsenal an hilfreichen Tools für ein besonders nutzerfreundliches Shopping-Erlebnis:

173 <ul><li><a>Innovative KI-Lösungen</a>wie den<a>K:AI Marketing Agent,</a>den<a>K:AI Customer Agent</a>und umfangreiche Personalisierungsmöglichkeiten</li>

174 <li><a>Eine integrierte Kundendatenplattform</a>für Marketing, Kundenservice und Analyse</li>

175 <li><a>Kanalübergreifende Marketing-Automatisierung</a>für dynamische und personalisierte Omnichannel-Erlebnisse</li>

176 <li><a>Umfangreiche Analyse-Tools</a>für Einblicke in das Nutzerverhalten für individuelle Customer Journeys</li>

177 </ul>Erstelle mit Klaviyo barrierefreie E-Mails und schaffe ein besonders benutzerfreundliches Nutzererlebnis.

178 <a>Jetzt kostenlos testen</a>

179 <h2>Häufig gestellte Fragen zur digitalen Barrierefreiheit</h2>

180 - Welche Online-Shops müssen Barrierefreiheit umsetzen?Das Barrierefreiheitsstärkungsgesetz gilt für Unternehmen mit mehr als 10 Beschäftigten oder einem Jahresumsatz über 2 Millionen Euro, die elektronische Dienstleistungen anbieten. Wichtig: Dies ist keine Rechtsberatung. Lass dich am besten rechtlich beraten, wenn du dir unsicher bist.

180 + Welche Online-Shops müssen Barrierefreiheit umsetzen?Das Barrierefreiheitsstärkungsgesetz gilt für Unternehmen mit mehr als 10 Beschäftigten oder einem Jahresumsatz über 2 Millionen Euro, die elektronische Dienstleistungen anbieten. Wichtig: Dies ist keine Rechtsberatung. Lass dich am besten rechtlich beraten, wenn du dir unsicher bist.

181 - Gilt Barrierefreiheit auch für E-Mail-Marketing?Ja, E-Mails sollten ebenfalls barrierefrei sein. Das betrifft Transaktions-E-Mails wie Bestellbestätigungen und Versandbenachrichtigungen, Werbe-E-Mails wie Newsletter und Sale-Ankündigungen sowie automatisierte Flows.

181 + Gilt Barrierefreiheit auch für E-Mail-Marketing?Ja, E-Mails sollten ebenfalls barrierefrei sein. Das betrifft Transaktions-E-Mails wie Bestellbestätigungen und Versandbenachrichtigungen, Werbe-E-Mails wie Newsletter und Sale-Ankündigungen sowie automatisierte Flows.

182 - Wie teste ich, ob meine Website und E-Mails barrierefrei sind?Am besten nutzt du eine Kombination aus automatisierten Tools, manuellen Tests und Feedback. Beginne mit dem einfachsten Test: Versuche, eine Bestellung nur mit der Tastatur (Tab, Enter, Pfeiltasten) abzuschließen. Prüfe Farbkontraste mit Tools wie WebAIM und teste E-Mails mit ausgeschalteten Bildern, um zu sehen, ob Alt-Texte alle wichtigen Infos vermitteln. Das wertvollste Feedback kommt allerdings von echten Nutzer*innen, die assistive Technologien verwenden.

182 + Wie teste ich, ob meine Website und E-Mails barrierefrei sind?Am besten nutzt du eine Kombination aus automatisierten Tools, manuellen Tests und Feedback. Beginne mit dem einfachsten Test: Versuche, eine Bestellung nur mit der Tastatur (Tab, Enter, Pfeiltasten) abzuschließen. Prüfe Farbkontraste mit Tools wie WebAIM und teste E-Mails mit ausgeschalteten Bildern, um zu sehen, ob Alt-Texte alle wichtigen Infos vermitteln. Das wertvollste Feedback kommt allerdings von echten Nutzer*innen, die assistive Technologien verwenden.

183