Blog

How to Use Alt Text and Accessible Images to Create Maximum Reach

Updated September 10, 2020

In a hyper-visual world, where images and visual cues like colour are used to represent brands, elicit emotion in consumers and create strong psychological cues, it can be easy to forget that not every user is able to see clearly. 

This is why it’s important to ensure that the thoughts and messages those visual cues communicate are still being accurately conveyed to users with visual impairments. 

One important way to do this is to make sure the semantic text of the website communicates the same tone and evokes the same message that the graphics and visual cues do. A second, equally important way is to ensure that any messages contained within images are clearly communicated to users who are visually impaired. 


📖 Read next: 7 Design Considerations for Accessibility


What is Alt Text?

Alt text is a piece of descriptive text that accompanies images on a web page. This content is part of the image’s metadata and enables users to access the information an image contains via alternate methods such as screen readers. 

Alt text is also widely used by search engines (think Google Image Search), so writing thoughtful descriptions will not only help accessibility, but it will also drive traffic to your site. 

How and When to Use Alt Text

Even your company logo in the top-left corner should have an alt text to signal to users where they are. Since the alt text is potentially going to be read aloud by a screen reader, be as succinct as possible and avoid numbers or symbols. 

A common mistake is to forget that the screen reader will already indicate that something is an image, so just write ‘duck playing soccer’ instead of  ‘image of a duck playing soccer’. There’s a general guideline that each alt text should be less than 140 characters, so save the extra info for a caption, or a link to another site. 

Different types of images serve different purposes on your site, and each requires a slightly different approach to alt text. 

Functional images

alt="search this page"

Functional images perform an action, such as opening a link. They should have alternative text that describes the action that’s triggered when a user clicks that link. For example, the alt text for a magnifying glass icon that triggers a search function should read something like “Search this page”. 

Often, a brand logo is used as a functional image that returns users to the home page. In this case, the alternative text should indicate where the logo links to and can include the brand name as well: “Evolving Web Home.”

Informative images

alt="Families love camping at The Eager Beaver's Dam Good Campsite"

Informative images convey simple information or concepts that can usually be expressed in a short phrase, such as “Young children playing baseball at City Park.” 

Sometimes, an image is used more to convey a feeling or concept. For example, a picture of an all-smiling family camping at a campground could have alternative text such as “Families love camping at The Eager Beaver’s Dam Good Campsite.”

Complex images

Bar graph and pie chart

Complex images, such as graphs and diagrams, need to have alternative text that accurately conveys the data or information they contain. In this case, it’s best to provide a full-text alternative to the data contained in the graph. 

Also, for users who have trouble distinguishing colour, always be sure to indicate different parts of a graph or chart using labelling other than colours, such as hashing. For further explanations on how to describe different types of complex images, The Diagram Center is a great resource. 

Images containing text

alt="Lorem Ipsum"

Images containing text should include the text included in the image in their alternative text. As a general rule, avoid embedding text in images or using images as the sole medium to convey information on a page. For example, if you’re publishing an infographic, consider transcribing it as a blog post to keep the data accessible.

Decorative images

<img src="decorative-image.jpg" />

Decorative images are the final type of image. These images serve no purpose other than to just look nice. They are the one exception to always having alternative text to your images and should have no alternative text. 

Alt Text and Accessible Images at a Glance

Images are among the easier website components to make accessible. The key is to have appropriate alt text. 

As a quick recap: 

  • Make sure all images have a high enough contrast so they can be interpreted without colour and are zoomable. 
  • Consider making alt text a required field in your CMS to ensure content editors include it for every image. If you’re using Drupal, you can do this out of the box.
  • Images that accomplish an action should clearly indicate their function in the alt text.
  • Images that provide important information should have a descriptive alt text.
  • Images that are purely decorative don’t need alt text.

Want to learn how to make your entire website more inclusive? Download your copy of our free web accessibility ebook for tons of valuable tips and techniques.

Learn Drupal: From Beginner to Pro

Live Online Drupal Training: We train content strategists, project managers, site administrators, designers, and developers to get the most out of Drupal.

Evolving Web Newsletter

Sign up for tutorials, best practices and insights, plus info about our acclaimed Drupal Training series.