The Ins and Outs of Image Accessibility Standards

Back to blog

The Ins and Outs of Image Accessibility Standards

Posted December 13, 2021

AudioEye

Posted December 13, 2021

Example of alt text on a simple mountain image
Example of alt text on a simple mountain image

Your website images need to be accessible to people with visual impairments or blindness. Here's how to ensure various types of images meet accessibility standards.

Visual impairments are on the top 10 list of disabilities among adults in the United States. According to the Centers for Disease Control and Prevention (CDC), “Vision loss causes a substantial social and economic toll for millions of people including significant suffering, disability, loss of productivity, and diminished quality of life." 

As the internet becomes increasingly essential for work, education, and social interactions, people with visual disabilities and blindness are being left behind because of inaccessible websites and content. Inaccessible websites make it difficult, or at times impossible, to find necessary information, complete transactions, or use digital services to carry out various daily tasks. 

Despite the accelerated pace of digital transformation, so many businesses and organizations still lag behind on making their websites accessible to people with disabilities. This is partly due to a lack of awareness and/or technical knowledge of different accessibility issues and how to solve them. 

In this article, we cover one of the most common accessibility issues — image accessibility.

Alt Text

Image alternative text, also called alt text or alt tags, is a written description of an image that screen-reading tools can read out loud to people with visual impairments, sensory processing disorders, or learning disabilities. Missing alt text is one of the most common image accessibility complaints. 

Alt text should be brief, but vivid enough to make the content of the image clear to someone who is listening to the description. This includes any information contained within graphs or charts. Well-written alt text doesn’t just describe an image, but also communicates its purpose and context.

Here is an example from our blog post: When Accessibility Is Personal: A Q&A With AudioEye's Sarah Kinneer:

A photo of an AudioEye employee named Sarah next to the words When Accessibility Is Personal: A Q&A With AudioEye's Sarah Kinneer

Bad alt text: Woman and article title
Better alt text: Woman in a circle with When Accessibility Is Personal: A Q&A With AudioEye's Sarah Kinneer in text
Our Alt Text: A photo of an AudioEye employee named Sarah next to the words When Accessibility Is Personal: A Q&A With AudioEye's Sarah Kinneer

Keep your alt texts to 125 characters (shorter is better). To save on characters, avoid words like "image" or "screenshot." However, using "photo" or "drawing" is fine, as they make the content of the image clearer to the visitor.

To learn more about alt text, check out our blog post What Is Alt Text, and Why Does It Matter for Accessibility?

Image on the left shows a graph of Digital ADA Lawsuits with high contrast, Image on the left shows a graph of Digital ADA Lawsuits with low contrast

Color and Contrast

Effective use of color and contrast in accessible images serves two primary purposes:

  1. Individuals with color blindness may be unable to see or easily read some of your text based on how certain colors are used in combination with others.
  2. People with low vision may benefit from specific color schemes and higher levels of contrast.

Nearly 5% of all people have color blindness. There are several types of color blindness, including:

  • Red-green: Difficulty telling red and green apart.
  • Blue-yellow: Challenges with telling blue and green apart, as well as yellow and red.
  • Monochromacy: Total color blindness; may be present along with other vision issues and light sensitivity.

A few best practices on using color:

  • Color alone should not indicate an interactive element.
  • Luminance (brightness) should have a ratio of 4.5:1 for text and interactive portions.
  • Avoid using the following color combinations: red/green, blue/green, and yellow/red.
  • Use lots of white space.
  • Don't use pure black text on a white background; instead, choose a toned-down version of your brand color for the background.

While your colors and contrast levels may look perfect on your desktop, they may look different on mobile devices. Make sure you check images on mobile devices before publishing changes.

For more information about using color and contrast on your site, read our articles How to Choose the Best Color Scheme for Your Website and What is Color Contrast and Why Does it Matter For Website Accessibility?

Typography, Typeface, and Font

When it comes to using typography, typeface, and fonts in images, readability is the most important factor. 

Here are a few tips to keep in mind: 

  • Use sans serif fonts, such as Arial, Calibri, Helvetica, or Verdana. 
  • Keep font size at a minimum of 14 px.
  • Avoid italics, bold, all caps, or other formatting that could affect readability.

To learn more about accessible fonts, read 10 Best Fonts for Dyslexia. 

Copy

Sometimes the main copy is part of an image: email promos, charts, or infographics. These images contain too much information to fit into the 125 alt text character limit. To make images with complex information accessible to screen readers, add a long description that can fully convey the information displayed on the graphic. Use headings, lists, and other structural elements to organize content in a long description. 

You can add long descriptions to images using the longdesc attribute in the <img> element.

For additional information about how to ensure your email copy and images are accessible, check out It's Not Just Your Website: How Email Must Be Accessibility-Compliant.

Meeting Image Accessibility Standards

In order to keep images on your website accessible to all people, regardless of ability, incorporate the above best practices into your web design and content management processes. For a quick inspiration on website accessibility, take a look at our list of 10 Web Accessibility Examples for ADA Compliance.

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading