✎ Technique: Alternative text

Source: https://accessibility.huit.harvard.edu/technique-alternative-text Parent: https://accessibility.huit.harvard.edu/images-and-media-developers

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

Examples

✗ Bad example

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="">

Video: Alternative text with VoiceOver and Safari

Code editor

Code editor for an image of a bus with descriptive alternative text (external link).