Accessible multimedia content
Text alternatives for images and graphics
To make images accessible, precise alternative text must be created that allows screen readers to read them aloud and provides access to the information for visually impaired people. The following elements require alternative text:
- Images (photos, illustrations, logos)
- Graphics (diagrams, information displays)
- Icons (navigation icons, social media icons)
- Animations (GIFs, animated SVGs)
- Video and audio content
For image elements (<img>), the alt attribute is used. The alternative text is specified as the value of this attribute within the <img> tag.
Example:
<img src="image-of-red-sandals.png" alt="Red sandals for women"/>Text alternatives should be designed individually and not used multiple times in the same context. They should give the user a differentiated understanding of the individual graphics and precisely describe what can be seen in an image.
Note
If an image is purely decorative and does not convey any important information, an empty alt attribute should be set (alt="").
No font graphics
Do not use images to display text content; text must be inserted as actual text. Font graphics cannot be adjusted in terms of font size and contrast, and the text they contain cannot be read aloud by screen readers. Instead, use text elements to display text content.
Exceptions to this are logos, where the graphic representation of the font is essential. These must have alternative text if they convey relevant information or contain links. Descriptive alternative text for a logo should describe the purpose and identity of the brand; terms like "logo" alone should be avoided. If the logo is linked, the alternative text should describe the purpose of the link in addition to the brand name. A suitable alternative text could be, for example, "Company XYZ - Go to homepage." This makes it clear that the logo links to the main page of the website.
Alternatives for video and audio files
Video files require supplementary text alternatives to make the content accessible to people with disabilities. They must contain the following elements:
- Subtitles: Synchronized text representation of the spoken word in the video
- Transcripts: A full text version of all audio content (spoken word and key sounds)
- Audio description: Spoken descriptions of the key visual information in the video, inserted during pauses in dialogue or other key audio elements
- Poster image alt text: A brief description of the preview image (poster image) displayed before the video begins playing
For pure audio files, only transcripts are required.
Pause, stop and hide flickering animations
When using GIFs and animations, content may flash a maximum of three times per second, as faster flickering can trigger epileptic reactions in those affected. Flashing content should therefore be avoided entirely if possible. However, if the use of GIFs is necessary, it is advisable to avoid endlessly repeating GIFs and to keep animations short, slow, and preferably without loops to avoid visual stress.
In addition, animations lasting longer than five seconds must have a function for pausing, stopping, or fading. For important content conveyed through animations, a static alternative in text form should always be provided (see Text alternatives for images and graphics). Trigger warnings for animations can also be useful to give users the opportunity to prepare for the potential content or avoid it altogether.