Describing images properly.
WHAT IT IS FOR
Screen reader users hear the alt text instead of seeing the image.
It also displays when an image fails to load, and search engines use it.
HOW TO WRITE IT
Describe what the image conveys in context.
"Blue cotton shirt, front view" for a product. "Our team outside the Ikeja office" for a photograph.
WHAT NOT TO WRITE
"Image of" or "photograph of". The screen reader already announces it is an image. Keyword stuffing, which reads terribly aloud. The filename.
DECORATIVE IMAGES
Images conveying nothing, such as background patterns or dividers, should have an empty alt attribute.
That tells the screen reader to skip them.
Adding meaningless alt text to decorative images makes the experience worse.
FUNCTIONAL IMAGES
An image used as a button or link should describe the action, not the picture.
An envelope icon linking to contact should say "Contact us", not "envelope".
COMPLEX IMAGES
A chart or diagram needs more than a sentence. Describe the key information in surrounding text, and use a short alt text to identify it.
LENGTH
A sentence. If it needs a paragraph, the information belongs in the page.
