2025-06-17•5 min read•navable Team•

accessible mediaaccessible imagesusing alt text correctlyaccessible videosvideos with subtitles and audio descriptionaccessible PDFsscreen reader compatible PDFsWCAG 2.1 requirementsDIN EN 301 549 guidelinesPDF/UA standard

Accessible Media (Images, Videos & PDFs) – Best Practices for Accessible Media according to BFSG

With the Accessibility Strengthening Act (BFSG) coming into effect on June 28, 2025, companies are obligated to provide digital media content accessibly. This primarily includes images, videos, and PDFs on websites, in web applications, or digital services. Those who fail to act risk legal warnings and fines. At the same time, digital accessibility is a crucial factor for SEO, User Experience (UX), and conversion optimization.

Accessible Images – Using Alt Texts & Semantic Image Descriptions Correctly

Images must be provided with alternative texts (also: alt tags). These should enable the content to be converted into other formats such as large print, Braille, speech output, symbols, or simplified language, so that visually impaired users can fully grasp the information.

Best Practices for Accessible Images:

✅ Formulate alt texts precisely and descriptively.

✅ Avoid generic filenames like "image1.jpg".

✅ Provide decorative images with empty alt tags (alt="") so screen readers skip them.

📌 Example of an Alt Text:

❌ Bad: alt="Image"
✔ Good: alt="Table with sales figures from Q1 to Q4 compared to the previous year"

Accessible Videos – Implementing Subtitles, Transcripts & Audio Descriptions Mandatorily

According to WCAG 2.1, accessible videos are only fully accessible if they provide both visual AND acoustic information. This particularly includes subtitles, audio descriptions, and transcripts. Without these, videos are inaccessible to many people.

According to the dual-channel principle of the Web Content Accessibility Guidelines (WCAG) 2.1, you should ensure that all content is perceivable through two channels (visual and acoustic).

Measures for Accessible Video Content:

✅ Insert automatic or manual subtitles.

✅ Provide transcripts for spoken content.

✅ Insert audio description for blind users.

📌 Example of Accessible Video Design:

🎬 Subtitles: Spoken text is displayed synchronously as text: "Now the expert explains the WCAG criteria."
🎤 Audio Description: "The speaker stands at a flip chart titled 'Accessible Media'."
📄 Transcript: Complete text version of all audio content for reading.

Accessible PDFs – Ensuring Screen Reader Compatibility & Semantic Structure

PDF documents are often not searchable or compatible with screen readers. These too must be made accessible with text alternatives, correct formatting, and structuring. PDF accessibility requires clean formatting according to DIN EN 301 549 and the PDF/UA standard.

Checklist for Accessible PDF Files:

✅ Use text-based PDF files instead of scanned images.

✅ Insert semantically structured headings (H1-H3) & tags.

✅ Provide alternative texts for images in PDFs.

✅ Define correct reading order & navigation elements (e.g., table of contents, bookmarks).

📌 Example of an Accessible PDF Structure:

✔ H1-H3 headings for better navigation
✔ Alternative texts for embedded images: alt="Diagram showing the development of user numbers for accessible web applications"
✔ Searchable, machine-readable text instead of image PDFs

❗ Don't know if the media content on your website is accessible?

🚀 Your Solution for Accessible Media Content with navable

🛠 navable Layover Tool: Immediate Accessibility Optimization for Your Website

✔ Automatic accessibility improvement (ARIA labels, contrasts, HTML lang)

✔ Progressive optimization – runs automatically in the background
(Note: Do not replace a comprehensive web analysis to ensure full accessibility.)

✔ Individual customizations by users (font, contrast, reading mode, link highlighting, filters for images/animations)

✔ Optimized keyboard navigation for easy use without a mouse

🔍 navable Audit: Accessibility Analysis of Your Website

📊 In-depth BFSG analyses and WCAG review for sustainable accessibility

👉 To our Product Page

📧 [email protected]

Checklist: Accessible Media according to BFSG

Images & Graphics

✅ Meaningful alternative texts (alt texts) for all informative images.
✅ Provide decorative images with an empty alt attribute (alt="").
✅ Describe complex graphics (charts, infographics) additionally in the body text.

Videos & Audio

✅ Provide captions for all videos with spoken content.
✅ Offer transcripts for audio content.
✅ Add audio descriptions for videos when visual information is necessary for understanding.
✅ Use operable media players (keyboard control, volume control).

PDFs & Documents

✅ Create accessible PDFs (tagged structure, logical reading order).
✅ Provide alt texts for images in PDFs.
✅ Specify the document language correctly.

Stay Updated

Get accessibility tips and updates.

Our Top Posts: