It’s difficult to understand the content of a website without knowing what’s in the photos and infographics posted on each page — but that’s exactly what visually impaired people have to deal with as they navigate most websites.
Visually impaired people use tools called “screen readers,” which audibly read website content for them. These tools have advanced a lot through the years and do a good job of helping people navigate websites even if they can’t see. Users can adjust reading speed as necessary and use keyboard shortcuts to skip around the content to get a quick sense of what’s on the page.
But screen readers can’t help visually impaired people with website images unless content providers have also provided something called “alternative text” for each one. Alternative text, often referred to as “alt text,” or sometimes as an “alt tag,” is a simple text description of what’s in an image.
Adding alt text to your site’s images is the right thing to do. After all, visually impaired people deserve to have the same access to the content of websites that everyone else enjoys. But alt text also has benefits for website owners.
For one, search engines tend to prioritize accessible websites, and their algorithms may check for alt tags to help to analyze accessibility and categorize web content. Alt tags can also make it easier for your web team to find photos you’ve used before because you’ll be able to search by keyword.
Adding alt text is easy. Each photo takes just a few moments. However, not just any alt text will do. In fact, in some cases, providing the wrong kind of alt text might even cause more confusion for the people who actually need it.
Don’t worry, though. By the end of this article you’ll have everything you need to add beautiful alt tags to every photo on your website.
Writing Alt Text: The Basics
Alt text needs to be less than 125 characters, and ideally around 100 characters, and it needs to describe what’s happening in a photo. Maybe the simplest way to write alt tags is to draw on your sense of empathy: Consider what someone who can’t see might need to know as they’re using a screen reader to access your site.
If you were trying to get through content without using your eyes, you wouldn’t want image descriptions to be long-winded or complex or include any detail that wasn’t relevant to the reason the photo was included. However, you’d probably need more information than just a few words to get a good sense of the image.
The alt text you use will also depend on the context of the page — the reason you’re showing the photo.
For example, if you used the photo below to illustrate an essay about grief, a suitable alt tag might be “A single cluster of small wildflowers blooms in a dull grassy field beneath an overcast sky.” If your article is about botany or ecology, a more helpful alt tag might be something like “Small, round purple blooms on single stalks grow in a coastal meadow on a summer day.” (Of course, I’m not a botanist, so this might not be technically how you’d describe that plant to flower enthusiasts — but my point is that someone who is reading the post to learn more about ecology might want a slightly more technical description!)
If you can’t define the image’s purpose, consider leaving the image out completely. Nonessential photos are little more than a distraction or annoyance to all people, regardless of how well they can see.
What is Alt Text? Where Do I Find It?
Most CMS systems allow users to add much more than alt text to a photo (or, for that matter, to a video or piece of audio recording). For example, in WordPress, you can also add captions, descriptions, and titles for each piece of media.
In the programming world, this information is called metadata. (“Meta” literally means “about,” so image metadata is “data about an image.”) Each piece of metadata has its own role in image management. Let’s take a look at each one:
- Image Title – This is mostly for internal use, and you can use terms that may be helpful to your internal staff. An image title is generally just a few words and is used as the filename, identifying the photo so it’s easy to find for website administrators.
- Caption – The caption is usually just a few sentences long and provides additional information, insight, or context about the image for the reader. Captions may also be used to convey a bit of humor about the image or to add a link to the source of the image used. One clarification: A caption is meant to be read after the reader looks at the image itself, which is why screen readers read captions after they read alt text. The caption and alt text should be very distinct from one another, with no overlap between the two.
- Description – Image descriptions can be a lot longer than alt text or captions, and they were designed to provide more detail about an image if necessary. Some people use the description field to explain what the image looks like (going into more detail than the alt text), or to add information about how an image was created. You can also add links here, such as those to copyright information. Some people believe that explaining more about the image in a way that includes common keywords can help with search engine optimization. People who use screen readers can choose whether or not to have image descriptions read along with the rest of the web content or not. Regardless, you don’t want the text here to be redundant with the other metadata. The image description isn’t shown on the webpage, butit the description will be displayed if someone clicks on the image, either from a search engine or from a webpage on your site. (In WordPress, each uploaded image gets its own url — kind of like having its own address on the internet — and that’s technically where the description is displayed.)
To add image metadata in WordPress, either click on the image (where it’s inserted on a post or page) or go to the image manager and edit it there.
Common Alt Text Mistakes
The last thing you want is to spend the time to add alt text to every image on your site only to find out that the text is actually creating stumbling blocks.
We already mentioned the importance of making sure that image metadata isn’t redundant, but here are a few more common mistakes to avoid when it comes to alt text.
- Adding the words “photo” or “image” – There is never a need to add these words to alt text because screen readers automatically notify users when they encounter an image. Search engines, too, can detect alt tags easily and know exactly what they’re for, so adding those words won’t help with SEO.
- Neglecting to check the work of automated tools – There are some plugins and automated services that will use artificial intelligence (AI) to generate alt tags for you. However, these programs aren’t perfect. For example, we recently had one create a caption for a man and his son playing on the beach as something like “scary man chasing a child.” If you already have a large site with tons of images that will take long time to add captions, you may want to try a plugin like Alt Text Tools, which is is free and available in the WP plugin directory, or a paid plugin such as Fix, which uses an AI to generate tentative alt tag text, but doesn’t publish them until you approve them.
- Forgetting to use the image library – If you upload your image in the media library in WordPress and put the alt text there, then it will stay with the image forever — meaning that it will appear on any post that you use the image on in the future. However, if you just add the alt text to an image on a single post, you’ll have to add it again the next time you use the image.
Want to Work Together?
Alt text is something that website users can add relatively easily. But there are a lot of other ways that your website could be making life more difficult for people with visual impairments or other disabilities that might require professional attention to fix.
For example, certain colors can make a web page really difficult for colorblind people to read. Similarly, people with limited use of their hands or fingers (as well as people who use screen readers) need to be able to navigate through an entire site using the tab key instead of a mouse. Do you know if they can do that easily on your site?Do you really know whether your site is easy for people with visual impairments to navigate? Click To Tweet
If you want to learn more, reach out to us at Bet Hannon. We specialize in designing accessible WordPress websites, but we also offer accessibility sampling audits for businesses that want to learn more about how to make their sites more accessible.
A sampling audit is super affordable because it just analyzes a few pages of your site — and there’s no obligation to pay us to make the fixes.
Never miss another article from us. Sign up today to receive our monthly newsletter to learn more about website accessibility, best content practices, and more.