Links
Links must have a meaningful text that indicates their function or destination.
Images
Provide text alternatives for any non-text content so that it can be read by screen readers and other assistive technology.
- Images that convey information or have a function (link or button) must have a meaningful text alternative. The content should remain meaningful if all images are replaced by their text alternative.
- For images inserted in HTML the alternative text must be provided in the alt attribute.
- For background images and icon fonts, the alternative text can be provided as hidden text (screen reader only).
- There are also techniques to give other types of images (svg, images in PDF, images in mobile apps, etc.) text alternatives.
- Decorative images contain no useful information. They must be made invisible to assistive technology: use an empty alt attribute on an decorative image in HTML or insert the image via CSS. The same can be done in PDF documents or apps.
- An image can also be considered as decorative if it is accompanied by visible text. For example, if a button contains text and an icon meaning the same thing as the text, then the icon should be considered as decorative. If the button only contains an icon, then the icon is not decorative.
- Limit the use of graphical text. If you cannot avoid, put the same text in alternative text.
- For complex images (e.g. graph, infographics, etc.), foresee a visible descriptive text below the image, and identify the image in the alternative text.
Sound & video content
Sound should not start automatically. Extra or unnecessary sounds (e.g. background music) should be avoided.
Information provided as sound should have an alternative:
- Provide a transcript for audio fragments (podcasts).
- Provide captions for videos that have sound: the captions should contain the spoken text and other information like who’s speaking, silences, and other sound information.
- Provide a visual alternative for a sound alert.
Information provided visually in a video should have an alternative:
- Provide a transcript that is an alternative for the visual info and the sound : someone reading the transcript should have as much information as someone hearing and seeing the video.
- Provide audio description, if needed.
Animations, movement and flashes
Any movement on a page makes concentration more difficult and can make the page impossible to use for people with attention disorders or dyslexia. Flashes can cause seizures for people with epilepsy.
- Make sure any animation (video, carousel, etc.) can be paused.
- Do not use animated gifs.
- Make sure automatic updates (for example newsfeed or results of sport competition) can be paused.
Ensure that nothing flashes more than 3x/sec.