Images
There are three basic types of images on the web:
- Decorative
- Functional
- Informative
Decorative Images
A decorative image is generally considered to be one that's only there for eye candy or is described in adjacent text. By including an alt tag but leaving it blank, screen readers will ignore the image and you'd never even know it's there.
There is some debate in the accessibility community about what cmakes an image decorative. I personally lean more towards describing images.
Example: Fish and Chips

Let's pretend this paragraph describes what fish and chips are and how they're presented. Yadda yadda yadda.
Functional Images
Functional images serve as either a link or button and their alt text should indicate what they're linking to. A functional image should only have a blank alt tag if part of the link is also Text.
The only exception I'd give to this is if all the link does is display a larger version of the image. Then I recommend describing the image and including verbiage like "click to enlarge" at the end.
Example 1: Functional Image by Itself
Example 2: Functional Image with Link Text
Informational Images
Informational images are ones that convey information. There are many nuances to writing good alt text for these images, but the following tips are a good starting point:
- Avoid phrases like "picture of" or "image of" since screen readers will identify the item as an image or graphic. Doing so is redundant.
- Focus on the purpose of the image and describe those parts, there's generally no need to describe every detail.
- Try to be concise. Older browsers and screen readers can have difficulty with alt text longer than 150 characters.
For more about writing alt text, check out my post on Alt Text and Social Media on Cane Adventures.
Example: Image with a description
