The purpose of alternative text for images (the alt tag in your page’s code) is to ensure that images on your website can be understood by visitors with disabilities. Your alternative text will be utilized by assistive technologies such as screen readers that output text, braille or speech to help visitors with visual impairments understand the information the image provides.
In addition to this original intended purpose of alt text, it has also become an important consideration for search engine optimization (SEO). Search engines can’t see images the way humans can, but they can use the alternative text to index images. Strategic alternative text can help your website rank higher in search results, however, it is important to consider the people who are using your website. Packing your alt tags full of keywords that don’t help a visitor with a visual impairment, but instead detract from the flow of the page, is not a good practice.
When to Include ALT text
Think of accessibility first; decide if your image is informative or decorative:
- If your image is informative there should be text in the image’s alt tag that explains what the visitor needs to know if they cannot see the image, with exceptions (see next section).
- For images that are decorative, the alt tag should be included and left blank so that the image can be ignored by assistive technologies.
Some exceptions for informative images:
- If the text in the image is complex information, such as a chart that cannot be conveyed with a sentence, the same information should be included in text format as well.
- If the information in the image is repetitive of nearby text, such as a quote from your article intended to make the quote visually stand out, then the image should be considered decorative.
Need more help?
Use the Decision Tree on the W3C Web Accessibility Initiative website to help determine when and what alternative text is appropriate.
Informative vs. Decorative Example
If your website design includes a phone icon, your alternate text should be the word the icon represents. If your design includes both an icon and text, then the alt text should be blank to avoid repetition.
Informative
123-456-7890
vs.
Decorative
Phone: 123-456-7890
What to include in your alt text
Determine how to make your content accessible. The alt text should convey the meaning of any non-decorative image, while being as concise as possible. It may help to imagine that you’re reading the web page out loud to someone who needs to understand the meaning of the image within the context of the page.
For more advice on what to include, see the Images Tutorial Tips and Tricks page on W3C Web Accessibility Initiative.
Implementation in WordPress
Adding alt text in WordPress is quick and easy
Any time you add an image to a page or post, look in the right sidebar for the “alternative text” section of the image block and add your alt text.
If you leave this box empty for decorative images, WordPress will automatically include an empty alt tag in your page’s code.
A note about the WordPress Media Library
If you have already added many images to your website and not added your alt text, you may have noticed the Media Library section of your admin area includes an alternative text option on each image. Be aware that filling this in does NOT retroactively update the alt text on any existing posts or pages! It will however be included if you use the image in the future.
I hope this guide was helpful for you. Please let me know in the comments if you have any additional questions or what other topics you would like me to cover.
