When alternative text, or using text to describe images and other non-text content, is done well, it improves both the accessibility of your website and your SEO. Assistive technology users will have a richer understanding your website content and its searchability will increase. When a search engine scans your site, it will able to read and index the alt text, ultimately improving your search rankings.
But how do you write alt text well? You’ll be ahead of the game by avoiding these common pitfalls:
One of the most common mistakes is to use the word “image of” or “graphic of” in alt text before describing an image. Screen readers take care of this work for us. They’re programmed to recognize an image on a computer screen and will say “image” or "graphic," leaving the description up to us.
However, it is appropriate at times to state the type of image, but only if it’s necessary for describing the image accurately. For example, an image of a kitten playing with a ball of yarn could be an illustration, or drawing, in which case the alt text might read, “Kitten playing with a ball of yarn. Illustration.” Diagrams, graphs, and pie charts are other examples of specific types of images where what they are can be information that’s crucial to the end user.
Text within an image must be described in the alt text. Advertisements, for example, commonly include text within an image. Advertisements often contain text that describes the product, which is central to understanding the content of the image. For images with a lot of text or more complex images such as diagrams or charts, it may be necessary to include an additional long description outside of the image's alt attribute.
Decorative items such as dividers or design items that don’t provide additional context or content don’t need alt text. They don’t add to the information a user needs and they make little sense, or are unnecessary, when read with a screen reader. Consider the purpose of your graphic and whether alt text will provide any information, benefit, or feeling.
But remember, just because an image doesn't need alt text doesn't mean you can ignore it. Instruct assistive technology to skip over images with a null alt attribute.
While alt text in an alt attribute is suitable for providing a short description of an image, captions can be useful for longer descriptions, complex images, and photo galleries. Sometimes images are best when they have both. Complex images such as graph might need a short alt text description with a longer caption to illustrate the purpose or data of the graph.
Captions are visible to sighted users but may not always include descriptive elements of an image. Although alt text and captions serve different purposes, they occasionally overlap. For this reason, the two should never include identical text. When a screen reader scans a web page or document to read the text aloud, it becomes repetitive to a screen reader user.
This one is very specific, but it's so common that it needs to be called out. Wherever your company logo appears on your website, you should always include the company name within the alt text. Writing “company logo” is generic and undescriptive and leaves little information when accessed with a screen reader.
Why say “utilize” when you can say “use”? Using plain language provides a level of conciseness and accessibility that id helpful for many people. Additionally, if the graphic isn't complex, scientific, or for a specialized audience (like in a medical journal), there's no value in making the alt text of that information stuffier or more complicated than it needs to be.
Punctuation matters. Including periods and commas allows a screen reader to read in a more natural-sounding way, providing appropriate pauses to separate ideas, paragraphs, or other content. The same goes for spelling. Misspelled words won't be read properly and can even take on a different meaning. Just as you are careful to edit your on-screen content for proper spelling and punctuation, do the same for alt text.
As often as on-screen content is reviewed, alt text should be reviewed. When last campaign's banner ad messaging was updated, was the alt text updated or is it giving some of your users outdated information? When your company rebranded or went through a website redesign, was alt text updated to keep up? It's critical to your message, your reputation, and your risk management that alt text is kept accurate and current.
Whether you're brand new to accessibility and are wondering where to start, or you're ready to contact us about customized options for maintaining digital compliance, we are here to help with all your accessibility initiatives.