Media
Media such as images, audio and videos can turn mundane text into engaging, memorable content. Media can provide a quicker way to understand content, especially to those users with cognitive and learning disabilities.
Images
Images are used extensively on many sites and applications. Images can evoke emotions and attract attention to certain sections of a page's content. Logos for example, help users to know where they are and to a lesser extent what to expect from the site. Images can be informative, decorative, or functional.
Best Practices
- Informative images MUST have brief meaningful alt text that describes the image’s purpose.
- Active/functional images MUST have brief meaningful alt text describing the call to action or destination.
- Decorative images MUST be coded to be ignored by screen readers
alt="". - Images MUST NOT be used to convey text, (except in logos and essential cases).
- If images of text are used, the text should have good contrast with its background and alternative text should contain the same words as in the image.
- Complex images MUST be given brief alt text and extended text descriptions.
- All
<svg>images must have the ARIA role=”img” assigned. - Don’t use server-side image maps, because server-side image maps are not keyboard accessible.
Icons
Icons are simple images used to communicate meaning in a graphical user interface. They are easy to recognize, easy to remember and can help users instantly understand the tasks at hand. This pattern library uses Google's material icons as its icon library.
Best Practices
- Icons should always communicate meaning. Don’t overuse them or use them for decoration.
- Don't use icons out of context. Familiar icons work best.
- Use text labels for icons and show them to the right or below the icon.
- Informative icon fonts without accompanying visible text SHOULD be assigned
role="img". - Informative and actionable icon fonts without accompanying visible text MUST have a text alternative.
- Decorative or redundant icon fonts SHOULD be set to
aria-hidden="true".
Video, Audio and other dynamic content
Video, Audio and other dynamic content can make applications and websites more engaging to many users. However, there are users who may not be able to access this rich multimedia experience due to certain sensory or neurological disabilities. So it is important to deliver multimedia content that is accessible to all, irrespective of disability.
Best Practices
- All prerecorded video and audio MUST have text transcripts.
- Prerecorded audio-only content MUST be accompanied by an easily-reachable text transcript.
- A text transcript describing the visual aspects of the video SHOULD be provided for video-only content.
- Users MUST be able to pause, stop, hide, or control the timing of content that blinks, moves, auto‐scrolls, or auto‐ updates.
- Content that plays or updates automatically (such as video, carousels, images) MUST have a method to pause/hide the movement if it lasts more than 5 seconds.
- Images/video MUST not flash or flicker more than 3 times per second.
- The alt text of a dynamic image MUST change when the image changes.
- Content that is hidden from sighted users MUST also be hidden from screen reader users (e.g. using CSS
display: none), except when content is intended only for screen reader users. - Parallax scrolling should be kept at a minimum. Too much movement, especially of text, can have a dizzying effect.