.svg)
.svg)
Originally published on Anchor & Alpine, September 12, 2022
Keeping object → action → context in mind, a simple recipe for writing alt tags will make your websites and apps more accessible and improve SEO.
Every image, graphic, and icon you put on a website needs an alt tag. An alt tag is the name for a small alternate description for images and visual media used by visually impaired website visitors. Alt tags are mandatory for passing accessibility tests and meeting SEO requirements. Let’s learn to write better alt tags.
Who Writes Alt Tags?
From designers, to developers, to editors, all website creators need to write alt tags. Designers are encouraged to write the alt tags into Figma files to help developers as they place images and code the site. When you work with Anchor & Alpine, we’ll write the alt tags on your new website release, and then you’ll take it from there to maintain the alt tag schema as you create future content.
More and more social media outlets are allowing for, and encouraging the use of alt tags. We recommend including alt tags in all social media. While we’re on the topic, it’s also a good idea to camel case your hashtags, #ForExampleLikeThis. Camel-cased text with upper and lower case letters (like the humps on a camel 🐫) is more accessible and gives all viewers a quicker understanding of what’s being communicated.
The simple alt tag recipe
When sitting down to write alt tags, keep in mind this simple recipe:
Object → Action → Context
- The object is the main focus.
- The action describes what’s happening, usually what the object is doing.
- The context describes the surrounding environment.
This format keeps the description objective, concise, and descriptive.
Alt tags should be objective so that people using the description can form their own opinions about what the image means.
- Object: Ibex
- Action: Standing side profile with fluff on his horns.
- Context: Forest background
An Ibex with fur stuck to the end of its horns stands in profile against a blurred forest background.
- Object: Bridge
- Action: N/A
- Context: Waterfall
A white bridge with colonnades and an arched bottom, spans a tall double waterfall on a lush, green mountain.
- Object: Person
- Action: Working on laptop
- Context: Coffee Shop
A person with short hair and glasses wearing a denim jacket works on a laptop in a coffee shop.
Text in Images
Whenever possible, don’t put text in images. Text flattened into images is bad for accessibility, and multilingual sites can’t translate the text either. If you must use text in an image, be sure to include all of the text in the alt tag. For example, when sharing a screenshot or an image with text, you would write, “Screenshot of a LinkedIn post, the text reads…”.
When including diagrams, infographics, and charts, include as much information as possible.
- Object: Climate Change Infographic
- Action / Context: Text in the Infographic.
Climate Change Infographic displays a fractal design of the earth with several small illustrations around it. Clockwise from top:
– Illustration of a sun with rays around it, the text reads 69% Solar Radiation.
– Illustration of polar bears, the text reads 845,000 Genetic Diversity.
– Illustration of a thermometer, the text reads 28% Temperature.
– Illustration of glaciers, the text reads 47% Glaciers.
– Illustration of ladybugs on a leaf, the text reads 2,330,000 Vegetation.
– Illustration of dark rain clouds and rain, the text reads 62% Pollution
– Illustration of a whale tail above water, the text reads 34% Sea Level.
Describing Race & Gender
Alt tags should be objective so that people using the description can form their own opinions about what the image means.
Describe race and gender if (1) it’s relevant to the image, (2) if you know what their identity is, and (3) if the way you’re describing it is consistent with other descriptions.
When & Where to Write Alt Text on WordPress Websites
You write alt text in the Media Library (preferred), or when you add the image to a page. If you add the text in the Media Library—before you start using the image—all instances of that image will have the correct alt text. If you add the text as you add an image to the page, then that image will only have the alt text on that page, and you’ll need to add the alt text each time you use the image.
Add the alt text first
- Images placed on pages disconnect from the Media Library, and alt text doesn’t flow back from Page → Media Library.
- Adding alt text to images in the Media Library ✅ Page will add the alt text to all new instances of the image (alt text does not update if the image is already on a page).
- Adding alt text to images on the Page 🚫 Media Library does not update the original image.
Add the alt text later
To do this you will need a plugin, we use WP Sheet Editor – Media Library2. This allows a WordPress editor to go in and add alt text to previously published images.
By the way, NASA has nailed it
NASA’s alt text on an image from the James Webb telescope:
An undulating, translucent star-forming region in the Carina Nebula is shown in this Webb image, hued in ambers and blues; foreground stars with diffraction spikes can be seen, as can a speckling of background points of light through the cloudy nebula.
