Alt text - Intelligence Community Design System

Show navigation section

Introduction

Use alt text on images. Thealt attribute provides alternative text to users who can't see the image.

Alt text should concisely convey the meaning of the image within the context of the page.

If the image is only decorative or not needed because it will be repeated in adjacent text, include an emptyalt attribute,alt="" .

<img src="logo.jpg" alt="Design System logo" />

Using alt text benefits:

Those who rely on screen readers as it will read the alt text.
Those who have a slow connection; the alt text will be displayed in place of an image when it can't be loaded.

Thealt attribute can be used onarea ,img andinput elements.

When it goes wrong

A screen reader will announce the presence of the image along with anyalt text.

If there is noalt attribute, the screen reader only announces the presence of the image, although some screen readers may try to add context by reading the file name.

A screen reader will not announce images with an emptyalt attribute.

Alternative images

Alternatives to the<img> element are Scalable Vector Graphics (SVG) markup and the<canvas> element. They are often used for interactive images.

Favour SVG over<canvas> because the<canvas> element is not accessible to assistive technologies. It's not rendered in the DOM and doesn't have internal accessibility semantics like SVG.

SVG is also scalable for those who need magnification.

Last reviewed 18 April 2024 .