Images

Are your mock-up images meaningful or decorative?

Why it’s important

Floyd is blind and uses a braille reader to understand the contents of images.
Renata turns off images due to only having low bandwidth available in remote locations.
Anne's page didn’t load all the way and didn’t get to download the images.

Screenreaders shouldn't announce images that are purely decorative. Work with a developer to make sure they’re coded correctly using alt="".
When is it appropriate to use an empty alt attribute:
- An image is decorative.
- An image is not meant to be displayed to users.
- An image consists of text that is repeated as plain text in another location on the page.
- The image is included as the content of a link and there is other content included that describes the link target.
Images with meaning require alt text and possibly a longer description. Work with a content designer to create these.
Check text is set as live text whenever possible. When using images of text the text alternative should contain the same words as in the image. The image font size should be at least 14 point bold or 18 point and has good contrast.
End the alt text with a period. This will make screen readers pause a bit after the last word in the alt text, hence it will provide a more pleasant experience for the user.

Last modified: 23 April 2021