Website Accessibility 101: 5 Best Practices for Writing Alt Text for Images

Adding alternative text (“alt text”) to images seems like a no-brainer when managing your website. But ensuring image alt text is implemented properly and follows ADA and WCAG accessibility compliance is a little trickier than you think.

What Is Alternative Text and Why Is It Important?

Alt text is a tenet of inclusive and accessible web experiences for all users and provides users with visual disabilities access to key visual non-text content including photos, infographics, logos, icons, and other images.

Alt text lives in HTML code inside the alt attribute, which is embedded in an image element. It’s important to code this correctly to ensure a smooth, accessible, and delightful experience for users with access needs.

So how do you write good alternative text? Here are 5 best practices to improve your skills.

1. Identify and convey the purpose of non-text content

When you have a lot of images on your site to write alt text for, it’s easy to go on auto-pilot and just describe the image. However, this is not going to create an accessible experience for users with visual disabilities (like blindness, deaf-blindness, or low vision), who may be using assistive technologies, like screen readers, to access the information conveyed by images.

An example is the magnifying glass icon. Good, accessible alt text would be “search” not “magnifying glass” - the aim is to convey the purpose of the text, rather than just a literal description.

If the image acts as a button or a link, you will need to add the action keyword to initiate, like an icon of a cart. Instead of “add to cart” as the alt text, try “ Click add to cart.” Having the action as part of conveying the purpose makes it easier for users to identify a button or link and is crucial for those that need to speak the action aloud to get the button or link to open.

2. Remember that screen readers read the alt text aloud

Screen reader users can program them to translate the text to other outputs, Braille, or voice command devices.

A quick way to test alt text is to read it aloud to a user that does not know what the image is. If they can identify what the image is trying to convey based on your alt text alone, great!

However, for optimal results, conduct testing and collaborate with screen reader users and users with disabilities to improve your site’s accessibility and overall user experience. They know how they interact with web content better than anyone else.

3. Complex images require a long description with alt text

When the alt text alone is too short to describe your image, you should add a long description (also called an image description). In these cases, alt text is still required and is used as “directions” to point to and access the long description.

Long descriptions are needed for complex images like graphs, charts, medical illustrations, infographics, detailed photographs, etc. to fully describe the more complex purpose of that image. For example, bar graphs present data that will need to be fully described, as well as the intended conclusion to draw from the data presented.

You can hide these long descriptions using the appropriate ARIA labels, however, it’s best practice to make them available to everyone. For example, if there is a bar graph on a webpage, users with dyscalculia may have difficulty interpreting the graph and may not use a screen reader to access the text alternatives. A great solution is to have the long description available to all users in the surrounding text near the graph image. So for this, your alt text can look like “Annual Revenue per Quarter, see long description in next paragraph.”

4. The rules are different for decorative images

How do you know if an image is considered decorative? If the visual content provides no information, then it is considered decorative.

Because alt text is required, in this case, you would leave the alt attribute blank, like alt= “ ”. This tells screen readers to “skip over” the image. If you don’t include the empty alt attribute, the screen reader will read the image file name instead. Remember, screen readers, render the alt text into speech or Braille outputs for users who can’t see the content. If just the image file name is being conveyed, rather than the purpose of the image, the experience will be inaccessible and frustrating for users with disabilities.

When images are identified and described fully by the surrounding text, like an icon that supports surrounding link text, the rules for decorative images apply. When the link text or surrounding text is the same as alt text, it will create a repetitive experience for screen reader users.

5. People count too! Photos of people should be described fully

And to the best of your ability! This is because otherwise low vision and blind users are denied important contextual information that sighted users have available to them. When a photo including people is chosen for your website, it was probably selected to show diversity and/or target audiences. It’s important to provide this information to low vision and blind users as well. By describing people in images, you can provide a fully accessible and more inclusive experience for users in the disability community!

When you’re describing images of individual people, you can either use alt text and a long description or use an informal short description embedded in the alt attribute (or in other words, in place of the alt text). Short descriptions are more common for alt text for images of people and are generally about two sentences long.

When you are describing people in an image, it’s a best practice to ask the person in the image how they would like to be described. If you can’t ask, you can follow some general guidelines.

Characteristics you should include are:

• Descriptions of skin color, not necessarily race or ethnicity. Use descriptions like light-skinned, medium-skinned, medium-light skinned, medium-dark skinned, or dark-skinned.
• Descriptions of gender presentation instead of assuming someone’s gender. Use descriptions like female-presenting instead of woman, female-presenting child instead of girl, or male-presenting instead of man. There are many different words used for gender expression!
• You can also use non-binary for folks that do not identify with female or male genders and provide this identity information publicly. Again, it’s best to ask the person directly if you’re able to do so!

If it’s helpful to understand the context of the image, you can describe additional features of individuals, like hair color and style, height, clothing, age, etc.

Remember, screen readers and other assistive technologies translate alt text through speech and braille outputs, so consider the context in which the image is being used.

Get into the practice of asking yourself….

• What is the text content talking about?
• Why was this image chosen?
• What is it trying to communicate or show?

Keep in mind, the CDC reports that 1 in 5 Americans live with a disability. The result of proactively choosing accessibility will open your website up to reaching a bigger audience while saving you time and money over the long term. Added bonus! Your hard work will also increase SEO while improving the perception of your company and brand.

Are you unsure if your website meets the current requirements for accessibility standards?
Contact us today to schedule an accessibility audit of your site or discuss your accessibility challenges!