Alt Text is an essential web accessibility affordance for anyone using a screen reader. If you want your site to be accessible as defined by the Web Content Accessibility Guides (WCAG), then you need to consistently and appropriately use alt text. Used correctly, alt text can even improve your site’s SEO. Read on for an alt text overview.
The Basics of Alt Text
Alt text is an HTML attribute; developers will use the alt tag on img elements to provide a text description of images on a webpage. Most visitors won’t see alt text, unless the image fails to load or they check the site’s source code.
If a visitor to your site is using a screen reader, however, an image’s alt text is read aloud to provide context and information. This helps visitors with visual impairments find needed information, even on an image-heavy site.
You should add alt text to any non-decorative image on your site. This is going to include most photos, graphics, icons, logos, and other similar features.
Adding Alt Text
Alt Text in HTML
When you’re working directly with a site’s HTML, alt is simply another attribute you fill in whenever you use an img element, like the essential source attribute.
<img src="sailboat.jpg" alt="modern racing sailboat in ocean with crew during midday">
WordPress Alt Text
WordPress makes it easy to add alt text to an image. After you upload a new image, there is an alternative text field you can fill out by clicking on the image in your media library.
If you upload an image while writing, or want to edit an image from within a post, simply select the image block and expand Image settings under the Block tab to reach the alt text field.
Alt Text Best Practices
Avoid Saying ‘Image of’
Don’t point out that something is an image or a photo, as the screen reader will already do this for you.
<img src="iceberg.png" alt="a picture of an iceberg in Antarctica">
If there is something unique or noteworthy about the image format, however, it’s reasonable to include it if that detail is relevant.
<img src="patient.jpg" alt="MRI scan of a medical patient">
Use Just Enough Relevant Detail
Vague, generic alt text isn’t particularly helpful. What could you learn from this alt text?
<img src="flowers.jpg" alt="white flowers">
Compare that to alt text to the following:
<img src="flowers.jpg" alt="field of white daffodils next to a hill">
One is a lot more descriptive than the other.
There’s no one ‘right’ version of alt text for a given image. The same picture could have a different description depending on your content’s focus.
<img src="bagels.png" alt="trays of bagels with a variety of toppings including onion, poppy seed, and sesame seed">
<img src="bagels.png" alt="bagels at Benson's Deli in Oakmont">
Keep your alt text focused on what is immediately relevant. Don’t put an article or advertisement inside your alt text.
<img src="bagels.jpg" alt="Bagels prepared at Benson's Deli in Oakmont, using the traditional family recipe first developed by Gregory and Sheila Benson in 1936. For years, the Benson family has served fresh bagels to customers from all over the city out of their humble restaurant beloved by local foodies and old-timers alike.">
Remember, anyone using a screen reader is already reading your content as well. The point is to convey what is in the image, not duplicate part of the article itself.
Avoid Keyword Stuffing Your Alt Text
Search engines and web crawlers read alt text, using it as one of many criteria to rank a site. Great alt text, like great content, helps your site rank better. Alt text is also a way to let search engines know what images your site has, since there’s usually no easy way for a bot or crawler to tell what’s in an image.
You may be tempted to fill an image’s alt text with keywords in an attempt to improve your page ranking, but this is highly discouraged. First, keyword stuffing an image’s alt text greatly hurts the user experience of anyone who visits your page using a screen reader. Second, search engines have caught on to this tactic and now value properly written, descriptive alt text over alt text stuffed with random keywords.
If Your Image is a Link, Let Visitors Know
If you have an image that is also a link, be sure to mention this in the alt text and let visitors know where the link goes.
<img src="beagles.png" alt="confused beagles wearing neckties surrounded by question marks; links to Frequently Asked Questions page">
List Words, Numbers, and Information in Image in the Alt Text
If your page has an image that shows words, numbers, a graph, or other data, be sure to mention these in the alt text of the image if not already mentioned elsewhere.
<img src="sales-figures.jpg" alt="bar graph showing 2019 sales figures. Q1 is $42,900, Q2 is $58,300, Q3 is $11,200, Q4 is $87,220">
