Staying Inn Accessibility Demo

Images

There are three basic types of images on the web:

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

The Staying Inn

Example 2: Functional Image with Link Text


The Staying Inn

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:

For more about writing alt text, check out my post on Alt Text and Social Media on Cane Adventures.

Example: Image with a description

Fish and Chips in a basket.