Barrierefreie Newsletter: Checkliste
Allgemeine Struktur
- Klare Hierarchie: Überschriften logisch strukturieren (z. B. H1, H2, H3)
- Einfache Sprache: Verständliche, kurze Sätze und klare Begriffe verwenden
- Gute Lesbarkeit: Schriftgröße mind. 14 px, ausreichend Zeilenabstand (mind. 1,5-fach)
- Kontrast: Hoher Farbkontrast zwischen Text und Hintergrund (mit Kontrastchecker prüfen)
- Keine reine Farb-Codierung: Farbliche Markierungen zusätzlich durch Symbole oder Texte unterstützen
E-Mailing und HTML
- Tabellen nur für Layout mit <table> verwenden: Saubere HTML-Struktur mit korrekter semantischer Auszeichnung
- Responsive Design: Newsletter ist auf Mobilgeräten lesbar und navigierbar
- Logische Lesereihenfolge: Inhalte folgen einem sinnvollen Lesefluss, auch bei Screenreadern
- Alt-Text für Bilder: Aussagekräftige Alternativtexte (alt-Attribute), gegebenenfalls leer lassen (alt=""), wenn das Bild rein dekorativ ist
- Linktexte beschreiben das Ziel: Kein „Hier klicken“, sondern beispielsweise „Mehr Informationen zur Veranstaltung“
Multimediale Inhalte
- Bilder und Grafiken: Immer mit Alt-Text. Bei komplexeren Infografiken: Beschreibung im Fließtext oder separate Textversion
- Videos (falls eingebunden): Mit Untertiteln, Audiodeskription oder Transkript
- Animationen vermeiden oder abschaltbar: Keine flackernden Inhalte (>3 Hz), Animationen mit Stoppfunktion
Navigation und Interaktion
- Tastaturnavigation möglich: Alle interaktiven Elemente mit der Tastatur erreichbar
- Formulareingaben: Mit Labels, Fehlerhinweisen und in logischer Reihenfolge
- Sprache im HTML-Tag korrekt setzen: beispielsweise <html lang="de">
Barrierefreiheit testen
- Screenreader-Kompatibilität testen, beispielsweise mit NVDA für Windows oder VoiceOver (direkt am Apple MAC abrufbar).
- Tools wie WAVE oder axe DevTools verwenden
- Konformität mit WCAG 2.1 (mind. AA) sicherstellen.