Join us for Building ADA-Compliant WordPress Sites, our new workshop on web accessibility. It’s live on Nov. 15, and the recording and transcript will be available shortly thereafter if you can’t make it live. Register for the workshop.
This week’s quick lesson is more food for thought, since there is no single “correct” answer or one-size-fits-all solution when it comes to adding alt text to images (and other media) on your websites. It can be more of an art than a science, but there are some guidelines that you can follow when considering what your alt text should be. Hopefully this lesson will spark some creative thinking and help you equalize the user experience for all of your website visitors!
Sign up for our Web Accessibility 101 workshop coming up in a few weeks to discuss this topic and learn more about making your websites ADA and WCAG compliant.
What is Alt (Alternative) Text?
WebAIM defines alt text as “a textual substitute for non-text content in web pages“. This text should describe the image (or other multimedia content) in the context of the information surrounding it on the page. In other words, proper alt text might not always simply be a description of what is in the image, and what it should describe can change based on factors like captions, headings, and other content on the page.
Why is it important?
Alt text has several important jobs:
- it is read aloud to low- or no-vision (or other) visitors who use screen-readers;
- it is presented visually in place of an image that fails to load; and
- it is consumed by search engines and factors into page indexing and ranking.
Who benefits from alt text?
Everyone! When good alt text is added to the multimedia on your website, literally all of your visitors benefit from it, even the search engine robots! Most importantly, visitors who are unable to browse this type of content visually will be able to understand its purpose in relation to the content around it.
You (or your client) will also benefit because your alt text is used by search engines to help determine the kind of information that is presented on the page. That said, keep in mind that alt text should not be used for keyword stuffing or any other questionable SEO practices.
How do I implement this on my website?
If you use WordPress, each item in your Media Library has a field to store alt text (as well as title, caption, and description):
If you’re taking advantage of the wp_get_attachment_image() function in your theme code to output your images, the alt text is included by default, without any additional settings.
Alt Text Guidelines
As I mentioned before, there are some general guidelines to follow when determining what your alt text should be. There are a ton of helpful resources to guide you, and I’ll include a handful of those below in the Resources list. A quick Google search shows that because this is both an accessibility and SEO topic, there is no shortage of guidance to be found when you’re feeling stuck.
When diving into your alt text authoring, keep these things in mind:
- Context is important! Generally describing what is in the image can help, but the most helpful alt text describes the image in the context of the information presented on the page.
- Don’t omit the attribute completely. Decorative items should have an empty alt text attribute. For example, an image of a pattern should have the attribute
alt=""rather than something likealt="pattern"oralt="squiggly lines". - Alt text can be added using methods other than the alt attribute. Checking out the resources below can help you brainstorm the best ways to present your alt text to visitors.
- The title attribute is NOT the same as alt text! According to WebAIM, “The title attribute value is used to provide advisory information.” Titles are usually visually displayed with some user input interaction such as hover or click, and often aren’t read by screen readers.
- Imagine you were reading your web page to another person who wasn’t looking at the page. Try to consider how you’d describe the images to them in a way that helps them understand the purpose of each image. If no description is needed for a particular image, leave its alt text empty!
Resources
- Resources on Alternative Text for Images – W3C Web Accessibility Initiative
- An
altDecision Tree (Images Tutorial) – W3C Web Accessibility Initiative - Alternative Text – Web Accessibility in Mind (webaim.org)
- Alt Text – Moz.com SEO
- WordPress Image Alt Text – WP Engine Resources
How can I learn more about this?
Sign up to join our accessibility 101 workshop this month to learn more about this and many other tips and tricks for building ADA and WCAG compliant WordPress websites.
