Multimedia elements

General guidelines

• All multimedia should be tagged (alt text, captions, audio descriptions, etc).
• Avoid autoplay. Instead, provide controls or options to start, pause or disable video and audio.

Images and graphics

This content can be added using a variety of tags. Prefer <img /> in most cases.

Use proper alt text

• Users that rely on browsers to read content for them rely on alt text to provide meaning to an image.
• It’s recommended to describe all of the elements that explain what’s happening in the image rather than just providing a simple title.
• Descriptions should be succinct, it’s recommended to go no longer than two sentences.
• If the product that you are designing allows users to upload images, you should provide the ability to enter alt text along with the file.
• If an image is purely decorative, an empty alt tag should be included so that the user is not read alt text that doesn’t enhance usability.

Simple images

• Use the <img> tag.
• Hide decorative images from assistive devices using an empty alt tag (alt="")

Vector graphics

• Use <svg> tag.
• SVGs should be accessible to assistive devices.

Icons

• Icons should be easily understandable.
• Avoid using graphics when written content could communicate the same thing.
• Use icons as helpful visual cues to connect to concepts. Only use icons purposefully and not for decoration. Use familiar icons that people are accustomed to associating with common actions, like a trash can to represent deleting something.

Video content

This content is added using the <video /> tag.

Provide transcripts or subtitles

• Video should have transcripts or subtitles so people can review the material in the best way that suits their needs.
• Transcripts should include descriptions, not exclusively dialog/narration. This is particularly important for blind folks, who might make use of the transcript to make sure they didn’t miss anything by only taking in auditory information.

Audio content

This content is added using the <audio /> tag.