Barrierefreie Medien (Bilder, Videos & PDFs) – Best Practices für barrierefreie Medien nach dem BFSG

Mit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) am 28. Juni 2025 sind Unternehmen verpflichtet, digitale Medieninhalte barrierefrei bereitzustellen. Dazu gehören vor allem Bilder, Videos und PDFs auf Websites, in Webanwendungen oder digitalen Services. Wer nicht handelt, riskiert Abmahnungen und Bußgelder. Gleichzeitig ist digitale Barrierefreiheit ein entscheidender Faktor für SEO, User Experience (UX) und Conversion-Optimierung.

Barrierefreie Bilder – Alt-Texte & semantische Bildbeschreibungen richtig einsetzen

Bilder müssen mit Alternativtexten (auch: Alt-Tags) versehen sein. Diese sollten es ermöglichen, die Inhalte in andere Formate wie Großdruck, Braille, Sprachausgabe, Symbole oder vereinfachte Sprache umzuwandeln, sodass auch sehbehinderte Nutzer:innen die Informationen vollständig erfassen können.

Best Practices für barrierefreie Bilder:

✅ Alt-Texte präzise und beschreibend formulieren.

✅ Keine generischen Dateinamen wie "bild1.jpg".

✅ Dekorative Bilder mit leeren Alt-Tags (alt="") versehen, damit Screenreader sie überspringen.

📌 Beispiel für einen Alt-Text:

• ❌ Schlecht: alt="Bild"

• ✔ Gut: alt="Tabelle mit Verkaufszahlen von Q1 bis Q4 im Vergleich zum Vorjahr"

Barrierefreie Videos – Untertitel, Transkripte & Audiodeskriptionen verpflichtend umsetzen

Laut WCAG 2.1 sind barrierefreie Videos nur dann vollständig zugänglich, wenn sie visuelle UND akustische Informationen bereitstellen. Dazu zählen insbesondere Untertitel, Audiodeskriptionen und Transkriptionen. Ohne diese sind Videos für viele Menschen unzugänglich.

Nach dem Zwei-Kanal-Prinzip des Web Content Accessibility Guidelines (WCAG) 2.1 sollten Sie sicherstellen, dass alle Inhalte über zwei Kanäle wahrnehmbar sind (visuell und akustisch).

Maßnahmen für barrierefreie Videoinhalte:

✅ Automatische oder manuelle Untertitel einfügen.

✅ Transkriptionen für gesprochene Inhalte bereitstellen.

✅ Audiodeskription für blinde Nutzer einfügen.

📌 Beispiel für barrierefreie Videogestaltung:

• 🎬 Untertitel: Gesprochener Text wird synchron als Text eingeblendet: "Jetzt erklärt die Expertin die WCAG-Kriterien."
• 🎤 Audiodeskription: " Die Sprecherin steht an einem Flipchart mit dem Titel 'Barrierefreie Medien'."
• 📄 Transkript: Vollständige Textfassung aller Audioinhalte zum Nachlesen.

Barrierefreie PDFs – Screenreader-Kompatibilität & semantische Struktur sicherstellen

PDF-Dokumente sind oft nicht durchsuchbar oder mit Screenreadern kompatibel. Auch diese müssen mit Textalternativen, richtigen Formatierungen und Strukturierungen barrierefrei gestaltet sein. Für eine PDF-Barrierefreiheit ist eine saubere Formatierung nach DIN EN 301 549 und PDF/UA-Standard erforderlich.

Checkliste für barrierefreie PDF-Dateien:

✅ Textbasierte PDF-Dateien statt gescannter Bilder verwenden.

✅ Semantisch strukturierte Überschriften (H1-H3) & Tags einfügen.

✅ Alternativtexte für Bilder in PDFs hinterlegen.

✅ Korrekte Lese-Reihenfolge & Navigationselemente festlegen (z. B. Inhaltsverzeichnis, Bookmarks).

📌 Beispiel für eine barrierefreie PDF-Struktur:

• ✔ H1-H3 Überschriften für bessere Navigation
• ✔ Alternativtexte für eingebettete Bilder: alt="Diagramm zur Entwicklung der Nutzerzahlen barrierefreier Webanwendungen"
• ✔ Durchsuchbarer, maschinenlesbarer Text statt Bild-PDFs

Checkliste: Barrierefreie Medien nach BFSG

Bilder & Grafiken

• ✅ Aussagekräftige Alternativtexte (Alt-Texte) für alle informativen Bilder.

• ✅ Dekorative Bilder mit leerem Alt-Attribut (alt="") versehen.

• ✅ Komplexe Grafiken (Diagramme, Infografiken) zusätzlich im Fließtext beschreiben.

Videos & Audio

• ✅ Untertitel für alle Videos mit gesprochenen Inhalten bereitstellen.

• ✅ Transkripte für Audio-Inhalte anbieten.

• ✅ Audiodeskriptionen für Videos hinzufügen, wenn visuelle Informationen zum Verständnis nötig sind.

• ✅ Bedienbare Mediaplayer verwenden (Tastatursteuerung, Lautstärkeregelung).

PDFs & Dokumente

• ✅ PDFs barrierefrei erstellen (getaggte Struktur, logische Lesereihenfolge).

• ✅ Alternativtexte für Bilder in PDFs hinterlegen.

• ✅ Dokument-Sprache korrekt angeben.