Alternative Text and Web Accessibility
One of the most powerful ways we can improve the accessibility of our website is the creation of alternative text for images. Alternative text, or alt text, is a concise text description conveying the content or purpose of an image. Of our website’s 36,000 images, roughly one in three are missing alt text — therein lies our opportunity. This morning we introduced a feature in WordPress that will remind site managers to provide alt text before publishing new content. This reminder prompt will help us get closer to our accessibility goal of 100% of images having alt text.
What’s Alt Text? Here’s an Example.
Check out the highlighted Alternative Text field in the right side of the screenshot below, “A piece of comb, oozing with wild honey.” Optimal alt text is descriptive, but also concise. For images that also have captions, the alt text can be simpler, to avoid redundancy. Alt text doesn’t appear visually on the frontend of the website, but it still provides value to the overall user experience.
Who is Asking for Alt Text?
Two of the largest advocates for alt text are the World Wide Web Consortium (W3C) — the main international standards organization for the web — and the United States Department of Justice — the government department tasked with the enforcement of federal law.
Who Benefits From Alt Text?
The short answer is, “everyone.” But here’s a more specific breakdown of who benefits from alt text.
- Users of search engines, including the new generation of AI-fueled tools.
- Users wanting more information about an image.
- Users of screen readers, text to speech software, and non-graphical browsers.
- Users not loading images.
Alt Text Creation Tips
Again, alt text is a brief text description of an image. But more specifically, this description should focus on the content of the image as it relates to the overall content of the page it’s on. In other words, you’re not obligated to describe all of the elements of the image, only the elements that are relevant to your page’s content.
Tips
- Describe the image’s content within the context of a page.
- For images that are link to other pages, describe the purpose of the link. e.g. “Follow us on Instagram.”
- Keep it concise. A few words; a sentence at most. 125 characters is a good guide.
- Don’t start with “image of,” but do specify medium if not photo. Ex. Illustration, painting, logo, etc.
- Minimize redundancy by avoiding duplication of surrounding text. E.g. caption or page text.
Alt Text Edge Cases
Since multiple factors inform what optimal alt text is, it’s hard to prescribe absolute rules for the creation of alt text. Here are a few examples that demonstrate how alt text rules can break down.
The rare case when alt text isn’t required
Practically speaking, all images need alt text. Per the W3C guidelines, though, there is one small exception: decorative images. And while it’s ultimately more accessible to implement decorative images with CSS rather than HTML, the W3C does allow the practice. In these rare instances when decorative images are implemented with HTML, the most accessible option is to keep their alt text fields empty.
What’s missing in bulk alt text and accessibility reports
Conversely, just because alt text exists, that doesn’t mean that it conveys the “content or purpose” of the image. If a site manager is populating alt text fields with irrelevant content such as “Image,” then their web pages won’t be accessible, even though their alt text fields are populated. The practice of populating alt text fields just to populate them will get your content to pass most bulk accessibility tests, but it won’t make your content more accessible to your audiences. For this reason, regularly reviewing your images’ alt text individually (and not in bulk) is recommended.
Choose concision over detail
More descriptive alt text isn’t better; concise alt text is better. When detailed descriptions are needed, rely on your primary page content and image captions. While it’s true that businesses optimizing their content for search engine results do rely on long, descriptive alt text, they are valuing traffic volume over web accessibility. Since we’re elevating accessibility, we can choose concision in our alt text.
Conclusion
One of the most powerful ways we can improve the accessibility of our website is the creation of alt text for images. We have the opportunity to create alt text for about 12,000 images on www.bates.edu. Thanks for your help in moving us closer to our accessibility goal of 100% of images having alt text.
Alt Tags vs. Alt Text, a Technical Note
You’ll hear both terms in the conversation. Alt tags are the HTML containers for alt text. Alt text is the text that populates these containers. Per the World Wide Web Consortium (W3C), all images need alt tags, but not all images require alt text.
Here’s what a populated alt tag looks like in the context of an image’s HTML. Fortunately our CMS, WordPress, takes care of adding alt tags to every image for us. We just need to focus on populating the text.
- <img fetchpriority=”high” decoding=”async” width=”900″ height=”600″ src=”https://www.bates.edu/wordpress/files/2024/08/240725_Hathorn_honeybee_9783_hjb-900×600.webp” alt=”A piece of comb, oozing with wild honey.” class=”wp-image-3448″>