✎ Technique: Alternative text

Each image requires alternative text that is equivalent to the information it conveys, unless the image is purely decorative and provides no useful information. So you need to be careful about what value you give the alt attribute.

Examples

Omitting an alt attribute provides no information to screen-reader users.

    <img src="path/to/image.jpg">


✓ Good example: providing an alt attribute

Supply alternative text through the alt attribute. The alternative text should provide information equivalent to what’s conveyed in the image:

<img src="path/to/image.jpg" alt="Your alternative text.">

✓ “Null” example

Some images are purely decorative and have no useful information to convey non-visually. In these cases, you should use an empty or “null” alt attribute, as demonstrated below:

    <img src="path/to/image.jpg" alt="">


Code editor

See the Pen image with descriptive alternative text by HUIT - Web, UX and Digital Accessibility Services (@hwpdas) on CodePen.