Alternative Text
Images are broken into four categories: informative images, decorative images, functional images, and complex images. Depending on what group your image falls under, you’ll write alternative text, or alt text, different.
- Informative images are photography, icons, and graphics that convey a simple concept and can be described in less than 140 characters.
- Decorative images are images or graphics that don’t add any information to the content of a page. They are usually used as part of a page’s design, as part of a text link, or ambiance.
- Functional images are used in interactive components and initiate an action, such as a linked logo or a stand-alone icon inside of a button.
- Complex images are images, graphs, charts, maps, etc. that cannot be described in less than 140 characters. Think of an infographic or a flow-chart.
Alt text for Informative Images
If the image you’re using is meant to supplement your content, you can take a literal approach to writing alternative text. Let’s take a look:
You create a blog post to announce a new app that monitors your heart rate. The text surrounding the image says, “Available now, our new app monitors and tracks your heart rate.”
Alt text for this image could be, “User checking their heart rate directly from their smart watch”
Sometimes our images aren’t necessarily meant to supplement text, but rather to convey an impression or emotion. For these types of images, capture the meaning that is being shown. This may not be a literal description of the image.
You create a page that highlights different volunteer opportunities at your organization.
The literal description of the image could be something like “in a garden, a woman in a blue shirt smiles as she holds a plant as a man in a blue shirt digs in the dirt.” This doesn’t really convey the meaning of the image though.
A better alt text for this image would be “our volunteers create outdoor gardens for seniors in nursing homes.”
Alt text for Decorative Images
Images that are used for decorative purposes only should have an empty alt tag. The markup should still have the alt tag. Easy, right?
On your contact page, you show a large banner image of your office space. The text on your page says, “We moved! Come visit us in our new, modern office!”
Since the image isn’t providing and additional information or purpose, you can leave the alt tag empty.
Alt text for Functional Images
When we use our images as a part of an interactive element, we want to make sure we describe the action the image will initiate, instead of the description of the image itself.
On your site’s search bar, you use a magnifying glass icon as the search field’s button.
What happens when you click the button? You search the site. Your alternative text could be either “Search” or “Search the site.”