Alt text
Alt text
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.