Making the right choices for alternative, or “alt” text for image assets is essential to delivering an accessible website experience to all users, including those with vision impairments. This article explains the fundamentals of great alt text for images.
Put simply, alternative text (or “alt text”, as it is commonly referred) is a text substitute for non-text content. Most frequently, it is used as an accessibility aid for photographs, graphics and other media on web pages. Vision-impaired users, many of whom rely on screen reading software, may have difficulty perceiving this media directly. Alt text allows us to convey the ideas, emotions or information contained within a media asset to vision-impaired users through descriptive text.
Screen readers audibly announce alt text when they are processing the contents of a web page. It is considered to be part of the content, and so it is read to the user as it is encountered within the page content. Search engines also take advantage of alt text, using it to further understand the purpose, meaning and content of web pages.
Making the right choices when it comes to alt text, then, is essential to delivering a first-class experience for all of your website visitors, including search engines.
Before you go about crafting perfect alt text, it’s important to evaluate if a given image has meaningful information to convey in the first place. If it does not communicate anything of value, then it is considered to be decorative. Decorative images do not require alt text. In fact they are required to have empty alt text.
Ask yourself: if this image were removed or could not be used, would important information be lost? Would the rest of the content still be able to stand on its own? If the answer to these questions is yes, then the image is decorative. Here are some other characteristics of decorative images:
The following images are good examples of decorative images in most contexts. They generally don’t contribute any additional meaning to the content of the page. Adding alt text to decorative images can actually degrade the accessibility experience. It adds no real value to the visitor.
In the digital age, your website is often the first interaction potential customers have with your business. Make it unforgettable with Elev8 Web Studio! Our team of experts is dedicated to crafting remarkable online experiences that captivate your audience and drive results.
If an image is not decorative, it’s probably informative. Informative images are generally trying to communicate something. Sometimes it is an impression or an emotion. Other times it is more concrete, like the size of the Big Beach Breakfast at the local diner.
Informative images may also be used to supplement other information. For example, a product photo on an online store would typically accompany a text description.
A properly formatted image caption is a valid substitute for alternative text. When should you use captions instead?
An important thing to keep in mind when it comes to captions and alt text: don’t use them at the same time, as screen readers will read both to the user.
Many informative images are trying to convey a feeling, an ambience or an appeal to the senses. Don’t just describe the image – that’s boring. Instead, tell the story that the image is trying to tell:
Functional images are triggers for an action of some kind, like printing a page, downloading a report, or navigating back and forward in a series of related pages. In most cases, you should set the alt text for a functional image to reflect the associated action, like Download report or Print this page:
Logos may be considered to be functional images. For example, when placed in the header of a website, it’s a common convention to link the logo to the home page. In these situations, the logo is considered to be a functional image. When placed within page content, logos often link externally to the websites of the respective companies represented in the logos.
In either case, the best choice of alt text in these situations is something like [Name of Company] logo.
Some images have text within them as part of the image itself. When working with stylized graphics containing text, it’s best to include equivalent text content elsewhere on the page.
If the information contained in an image is already included nearby on the page, you may be able to treat the graphic as purely decorative and include empty alt text. Or you can take the opportunity to communicate by adding informative alt text:
Complex images are things like charts and maps. The most important characteristic of a complex image is that it contains more information than can be effectively communicated in alt text, which is generally meant to be short and brief.
For charts, it’s best to include a corresponding table of the results below the chart, and then refer to that table in the alt text for the image. An example alt text for an image of a bar chart might be Summary of Job Posts by Month, April 2021 through March 2022. See table below for results.
Maps are more nuanced. They’re meant to be visually explored, but there can be ways to improve their accessibility. You can provide walking, transit or driving directions as an accompaniment to the map, if that’s what you’re trying to communicate. For Google Maps, research indicates that visually impaired users are big users of the Google Maps mobile app, so linking the image to a Google Map can be helpful.
This downloadable high-resolution infographic walks you through the decision-making process for choosing the right alt text.
In the digital age, your website is often the first interaction potential customers have with your business. Make it unforgettable with Elev8 Web Studio! Our team of experts is dedicated to crafting remarkable online experiences that captivate your audience and drive results.
