A11ying with Sanna - I would if I could a guide to web accessibility

1.1.1 Non-text Content - alt attribute

Here we'll have some images with various alt attributes. Check out the differences with a screen reader.

Problematic example

The image has an alt text that is only gibberish. Unfortunately, I have seen this when the alt text has been set required and the content writer has no idea why you really should be mindful of the alt texts.

adasdklfd

The next image doesn't have an alt text or the alt attribute.

Better example

In the picture below, I entered a little bit more descriptive alt text than in the earlier example with gibberish. Though in this case, the image is a random one from Picsum so the alt text isn't really that descriptive of the image itself.

A random image from Picsum

Example of an image without an alt text. This image will be skipped with screen readers.

Final comments

Remember that if the image is used as a link, the alt text should describe the link target, not the image. Also remember that if the image is purely decorative, leave the alt text empty. That way screen readers will ignore the image.

If you don't have the alt attribute at all, the screen reader will read the image filename. That is usually not very desirable.