Digitale Barrierefreiheit: 10 konkrete Maßnahmen, die Sie ab sofort umsetzen können
Digitale Barrierefreiheit ist keine Option mehr, sondern eine Verpflichtung. Ab dem 28. Juni 2025 wird der European Accessibility Act neue Regeln für Unternehmen einführen, die digitale Dienstleistungen für Verbraucher anbieten. Dennoch sind 96 % der meistbesuchten Websites nach wie vor nicht barrierefrei, und fast 100 % der HTML-E-Mails enthalten kritische Fehler.
Bei einer von Dartagnan und Warren Walter am 28. Mai organisierten Podiumsdiskussion mit Erfahrungsberichten von Babilou und SNCF Connect & Tech wurde eine klare Botschaft vermittelt:
Einfache, konkrete und für alle Berufsgruppen zugängliche Maßnahmen können schnell den Unterschied machen.
10 konkrete Maßnahmen, um Ihre Inhalte barrierefreier zu gestalten
1. Fügen Sie systematisch alternativen Text zu Bildern hinzu
Der alternative Text (HTML-Attribut alt) ermöglicht es Screenreadern, den Inhalt eines aussagekräftigen Bildes zu beschreiben. Er sollte klar, präzise und nützlich sein und über eine einfache visuelle Beschreibung hinausgehen.
Beispiel: Für ein Banner, das "30 % Rabatt" anzeigt, verwenden Sie besser einen ALT-Text wie "Aktion: 30 % Rabatt auf die gesamte Sommerkollektion", der genau informiert.
Interesse, mehr über Dartagnan zu erfahren?
Dartagnan ist das unverzichtbare Tool, das Ihnen hilft innovative Kampagnen zu entwerfen und die Produktion Ihrer E-Mails effizienter macht!
2. Verbessern Sie die Kontraste
Verwenden Sie Tools wie WAVE oder Contrast Checker, um die Lesbarkeit Ihrer Inhalte zu überprüfen und die WCAG-Standards einzuhalten.
Ein konkretes Beispiel unten:
Hellbeige und Hellgrün kombinieren? Schlechte Idee!
Der Kontrast zwischen diesen beiden Farben ist zu gering, was den Text schwer lesbar macht.
Ein guter Kontrast macht wirklich einen Unterschied!
Hier bietet schwarzer oder dunkelgrüner Text auf einem hellgrünen oder weißen Hintergrund einen viel besseren Kontrast.
3. Strukturieren Sie Ihre Inhalte mit hierarchischen Überschriften (h1 > h2 > h3)
Diese Hierarchie ermöglicht es Screenreadern, einfach zu navigieren und die Struktur des Inhalts zu verstehen.
4. Vermeiden Sie nicht barrierefreie CAPTCHAs
Traditionelle CAPTCHAs, z.B. solche, die "Drag and Drop" erfordern, stellen für Menschen mit Behinderungen oft ein großes Hindernis dar.
Warum diese CAPTCHAs problematisch sind:
Motorische Störungen: Schwierigkeiten beim präzisen Klicken, Halten und Ziehen.
Kognitive Störungen: Überlastung durch komplexe Anweisungen und visuelle Informationen.
Sehbehinderungen: Fehlen von Audio- oder Textalternativen.
Lösungen: Bevorzugen Sie einfache und inklusive Alternativen, wie leicht verständliche Multiple-Choice-Fragen oder stille Hintergrundverifizierungssysteme (z.B. Analyse des Browsing-Verhaltens).
Diese Methoden gewährleisten eine bessere Erfahrung für alle, ohne die Sicherheit zu beeinträchtigen.
5. Geben Sie die Hauptsprache des Dokuments mit dem Attribut lang="de" an
Das Hinzufügen dieses Attributs zum <html>-Tag ist entscheidend, damit Screenreader und andere unterstützende Technologien den Inhalt korrekt aussprechen. Ohne diese Angabe besteht die Gefahr, dass sie den Text in einer falschen Sprache lesen, was das Verständnis beeinträchtigt.
Gute Nachricht: Die Dartagnan-Lösung integriert dieses Attribut automatisch und gewährleistet so eine vereinfachte Konformität und bessere Zugänglichkeit Ihrer Inhalte.
6. Gestalten Sie Ihre Formulare explizit
Ein schlecht gestaltetes Formular kann schnell zu einem Hindernis für den Nutzer werden, besonders wenn er keine genauen Hinweise auf zu korrigierende Fehlern erhält.
Beispiel: Das Fehlen klarer Fehlermeldungen verhindert oft das Verständnis dessen, was korrigiert werden muss, was zu Frustration und Abbruch führt.
Unten ein Formular mit verschiedenen Problemen hinsichtlich der Barrierefreiheit: Das Fehlen klarer Hinweise verhindert die einfache Identifizierung und Korrektur von Fehlern.
Lösungen:
Geben Sie das erwartete Eingabeformat an;
Stellen Sie eindeutige Fehlermeldungen unter den ungültigen Feldern bereit.
Gültige Beispiele:
Adresse: Musterstraße 123, 12345 Berlin.
Es fehlte ein Komma zwischen der Postleitzahl und der Stadt.
Datum: 01.04.2025.
Die Punkte mussten durch Schrägstriche ersetzt werden.
7. Machen Sie Ihre Inhalte über die Tastatur zugänglich
Stellen Sie sicher, dass Ihre gesamte Benutzeroberfläche nur mit der Tastatur bedient werden kann, indem Sie die Interaktionen über die Tasten Tab, Enter und Escape testen. Dies ermöglicht Menschen, die keine Maus benutzen können, einen einfachen Zugang zu Ihren Inhalten.
8. Bevorzugen Sie HTML-Text gegenüber Bildern mit Text
E-Mails, die nur aus Bildern bestehen, sind für Screenreader nicht lesbar und passen sich schlecht an verschiedene Bildschirmgrößen an, insbesondere auf Mobilgeräten.
Die Verwendung von HTML-Text verbessert die Zugänglichkeit und Lesbarkeit.
9. Fügen Sie ARIA-Tags hinzu, um den Inhalt zu strukturieren
ARIA-Attribute (wie aria-level für Überschriften oder role="table" für Tabellen) helfen unterstützenden Technologien, die Struktur Ihrer Inhalte zu verstehen.
Bei Dartagnan werden diese Tags automatisch in E-Mail-Komponenten integriert und vereinfachen so die Erstellung von barrierefreien und gut strukturierten E-Mails.
10. Schulen Sie Ihre Teams und testen Sie mit den richtigen Tools
Digitale Barrierefreiheit ist eine kollektive Herausforderung: Um erfolgreich zu sein, ist es wichtig, Ihre Teams (Entwickler, Designer, Projektmanager, Marketingexperten) für bewährte Praktiken zu sensibilisieren und zu schulen.
Darüber hinaus ermöglicht das regelmäßige Testen Ihrer Websites und Anwendungen mit geeigneten Tools, Verbesserungspotenziale schnell zu identifizieren.
Einige empfohlene Tools für Ihre Barrierefreiheits-Audits:
WAVE: Chrome- und Firefox-Erweiterung zur automatischen Analyse von Web-Zugänglichkeitsproblemen.
Accessibility Insights: Multi-Plattform-Tool (Windows, Mobile, Chrome) für eingehende Tests gemäß WCAG-Standards.
WCAG Contrast Checker: Überprüft die Lesbarkeit von Kontrasten zwischen Text und Hintergrund nach WCAG-Kriterien.
Google Accessibility Scanner: Zum Testen der Zugänglichkeit von Android-Anwendungen.
Xcode Accessibility Inspector: Apples Tool zur Überprüfung der Zugänglichkeit von iOS-Apps.
Die Investition in Schulungen und die Nutzung dieser Tools ermöglicht es Ihnen, eine inklusive und gesetzeskonforme User Journey zu gewährleisten.
Bonus: Konkrete Rückmeldungen von SNCF Connect & Tech und Babilou
Bei SNCF Connect & Tech, die wichtigsten Fortschritte in Sachen Barrierefreiheit:
Schrittweise Eliminierung von in Bilder integrierten Texten, insbesondere bei Hintergründen, um unvollständige Informationen in alt-Attributen zu vermeiden. Bilder werden jetzt nur noch zu dekorativen Zwecken verwendet.
Jede E-Mail wird gründlich mit Screenreadern wie VoiceOver und NVDA getestet.
Einführung der Dartagnan-Lösung, die von Anfang an barrierefreie E-Mails garantiert.
Umsetzung konkreter Verbesserungen: Untertitelung von Videos, klare Hierarchie der Überschriften und Verwendung eines barrierefreien CAPTCHAs.
Bei Babilou, die wichtigsten Maßnahmen nach ihrem Barrierefreiheits-Audit:
Einführung eines Kontrastmodus auf der Website zur Erleichterung des Lesens;
Modus ohne Kontrast
Kontrastmodus
Systematische Untertitelung und Transkription von Videos für multimediale Barrierefreiheit;
Klare Hierarchie der Überschriften zur effektiven Strukturierung des Inhalts;
Anpassung des CAPTCHAs, um es für alle Benutzer zugänglich zu machen.
Heute wird Barrierefreiheit von Anfang an in alle Marketingprojekte integriert. Das Team ist geschult in der Verwendung optimierter Kontraste, relevanter alternativer Visuals und klarer, expliziter Beschriftungen.
Beispiel einer Verbesserung bei einer Marketing-E-Mail
Vorher
Die erste Version entspricht nicht den Best Practices für Barrierefreiheit:
Text in transparenten Buchstaben mit schwarzem Umriss, schwer zu lesen;
Zentrierte kalligraphische Schrift, die schnelles Lesen erschwert;
Kaum sichtbarer Aktionsbutton und Link mit nicht explizitem Text.
Nachher
Die zweite Version folgt den Barrierefreiheitsstandards:
Optimierte Farbkontraste für bessere Lesbarkeit;
Angepasste Schriftgröße für visuellen Komfort;
Großzügiger Zeilenabstand, der kontinuierliches Lesen erleichtert;
Text in serifenloser Schrift, linksbündig für natürliches Lesen;
Klarer Aktionsbutton mit explizitem und verständlichem Linktext.
Wenn Sie noch nicht überzeugt sind...
Warum ist Barrierefreiheit heute ein kritisches Thema?
101 Millionen Menschen in Europa leben mit einer Behinderung (Quelle: Consilium)
71,5 % der E-Mail-Öffnungen erfolgen auf Mobilgeräten, wo Fehler bei der Barrierefreiheit am häufigsten auftreten
Die Nichteinhaltung der Standards kann bis zu 300.000 € kumulierte Strafe kosten
Über Sanktionen hinaus schafft nicht barrierefreier Inhalt Diskriminierung, Frustration und Kundenverlust.
Warum ist Barrierefreiheit heute ein kritisches Thema?
Um eine effektive Barrierefreiheit zu gewährleisten, sind mehrere Referenzrahmen zu beachten:
WCAG (W3C): Grundlegende internationale Standards
RGAA (Frankreich): Ableitung der WCAG für öffentliche Dienste und Unternehmen
RAAM (Luxemburg): Barrierefreiheit von iOS- und Android-Mobilanwendungen
EN 301 549 (Europa): Europäische Norm für IKT-Produkte und -Dienstleistungen
Die Anwendung dieser Standards ist mehr als eine Verpflichtung, es ist ein Hebel für Inklusion und Differenzierung, insbesondere mit dem Inkrafttreten des European Accessibility Act.
Fazit: Fangen Sie klein an, aber fangen Sie jetzt an
Sie müssen kein Experte sein, um die Barrierefreiheit zu verbessern. Aber Sie haben eine Verantwortung.
Und vor allem haben Sie Tools, Beispiele und Partner, um voranzukommen.
Ab dem 28. Juni 2025 wird die Einhaltung der Vorschriften für viele Sektoren (Transport, Telekommunikation, E-Commerce, Bankdienstleistungen...) verbindlich.
Warten Sie nicht, bis Sie ins Hintertreffen geraten.
Brauchen Sie Unterstützung?
Dartagnan begleitet Sie Schritt für Schritt dabei, Ihre E-Mail-Inhalte für alle nutzbar zu machen, mit einfachen, effektiven und standardkonformen Lösungen.
Interesse, mehr über Dartagnan zu erfahren?
Dartagnan ist das unverzichtbare Tool, das Ihnen hilft innovative Kampagnen zu entwerfen und die Produktion Ihrer E-Mails effizienter macht!