How to Write Alt Text for Accessibility: Step by Step Guide
An accessible website yields all sorts of benefits for a business, and there are a variety of considerations to be made when ensuring that your website meets accessibility standards. A critical factor in a successfully accessible website is alt text.
Alt text, or alternative text, is the text that you can use to provide descriptions for non-text content. Buckle up as we head forward and discuss the best practices for alt text regarding accessibility.
Understand the Value
First and foremost, you need to understand why you include alt text to apply it correctly. Alt text aims to provide descriptions and context for images and icons to visually or cognitively impaired users who cross your site and utilize screen reading technology. Since they’re unable to see or process the images themselves, alt text that accurately conveys what’s happening in those images allows them to understand what’s depicted and why it’s important.
Although accessibility is one of the primary functions of alternative text, it’s not the only one. Alt text will appear if an image on your page fails to load or if the user has blocked images. It can also be a factor for search engines, as they assess the content on your page and its purpose.
Learn the Logistics
In most website builders and content management systems, clicking on an image in an editor will produce an image optimization option where you can create and edit the alt text for that image.
For a more detailed roadmap to guide you as you add alt text to your site, here are step-by-step guides for some of the most common website builders:
Unsure of which builder is right for your business? We can help.
Consider the Content
Now that we know how to write alt text, it’s time to discuss what to write. Good alternative text should be concise, descriptive, and contextual to drive success.
Alternative text should ideally stay within 140 characters. You can omit terms like “image of...”, “graph depicting...”, and “link to...” because a screen reader will automatically recognize these characteristics and provide that information before reading the alt text.
Since alt text exists to describe images and add value to users with accessibility needs, there’s no need to add alt text to purely decorative images. Alt-text is essential for images or non-text content that add value to the user’s experience and understanding.
Be as specific as you can while remaining concise! To ensure that the descriptive aspect of your alt text is on the right track, you can practice by having a friend or coworker sit next to you and close their eyes as you read them your proposed alt text for an image. Have them open their eyes and let you know whether or not the actual image is accurate to what they had visualized as a result of your alt text description.
The descriptive aspect of your alt text only drives you forward if it’s descriptive within the context of the page and the intended purpose of that image.
For example, let’s say you have a blog on your website discussing Canada’s Olympic games performance. A section of this blog explains Max Parrot’s inspiring story of overcoming cancer to go on and win the gold medal in the men’s snowboard slopestyle event in Beijing in the 2022 winter games. The blog features a photograph of his performance at the event.
Alt text that reads “athlete gripping snowboard during flip” is descriptive, but does it relate to the context? “Max Parrot upside down while flipping in Olympic snowboard slopestyle event” is just as descriptive, but it also provides the context that makes it relevant to the viewers in the first place. Plus, contextual descriptions do wonders for the SEO aspect of alt text.
Build an Optimized, Accessible Website with WEB ROI