Level AWCAG 2.2

1.1.1 Non-text Content

All non-text content has a text alternative that serves the equivalent purpose.

Why it matters

Visual impairment
Screen readers cannot see images. Without an alt attribute, there is no way to convey what the image depicts.
Search engines
Search engines cannot directly interpret images. The alt attribute also plays an important role for SEO.
Slow connections
When an image fails to load, the alt text is displayed in its place so the content is still conveyed.
Automated processing
Translation tools and text summarizers can work with image content when alt text is provided.

Live demo

What a screen reader announces

Informative image
Announcement:「image」

Images that convey information need a concrete text alternative

Decorative image
Announcement:「image」

Decorative images should use alt="" so they are ignored

Functional image
Announcement:「image」

Images inside buttons or links should describe the action

Without an alt attribute, a screen reader may only announce "image" or even read a raw file name such as DSC_0042.jpg, which gives users no useful context.

Understand through a persona

Yamada (28) — Totally blind

Shops online with a screen reader. Without alt text, product images are read only as 'image', making it impossible to tell what is being sold. 'Even for the same T-shirt in different colors, I can't tell which is which.'

Checklist

References