Images, videos, and graphics are key elements on many websites. However, if not designed correctly, they can be inaccessible to people with visual, auditory, or cognitive disabilities. In this chapter, we will explore how to make these elements accessible using alternative text, captions, descriptions, and other techniques.

Accessible Images

Images should include appropriate descriptions for users who use screen readers. This is achieved through the alt attribute in the <img> tag.

Rules for Writing Alternative Text

1. Describe the purpose of the image, not just its content.
2. Be brief and clear.
3. If the image is decorative, use an empty alt attribute (alt="").

Example of an accessible image:

html

Decorative Images

When an image doesn't add relevant information, it can be considered decorative. In this case, use an empty alt attribute so that screen readers ignore it.

html

Accessible Videos

Videos should include captions, transcripts, and audio descriptions to be accessible.

Subtitles

Subtitles allow people with hearing disabilities to understand the video's content.

Example of a video with subtitles:

html

Transcripts

A transcript provides a written version of all the content of a video, including sound descriptions.

Example of a transcript:

Accessible Graphics

Graphics, like those generated with <canvas> or SVG, require additional descriptions to be accessible.

Accessible SVG

SVG elements can include descriptions using the title and desc attributes.

Example of an accessible SVG:

html

Accessible Canvas

Content generated with <canvas> should be supplemented with an off-canvas description.

Example of a description for <canvas>:

html

Conclusion

Making images, videos, and graphics accessible not only improves the user experience but also ensures that more people can enjoy your content. Including appropriate descriptions, captions, and transcripts are simple but significant steps.

In the next chapter, we will explore how to ensure accessible navigation and focus management, an essential aspect for users who rely on keyboards or assistive technologies. See you there!