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

Ready to see AudioEye in action?

Watch Demo

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.

Many factors go into image accessibility, including:

  • The inclusion of text alternatives (alt text).
  • Color contrast, typography, and font choice (for images that contain text).
  • Long descriptions for complex images.

In this article, we cover one of the most common accessibility issues — image accessibility. We’ll explain the factors that determine whether an image is accessible, and we’ll provide a quick checklist for evaluating images in your web content.

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. Without text alternatives, screen readers (assistive technology that outputs text as audio or braille) may skip images entirely or simply announce that the user is viewing an image — which isn’t a great experience for nonvisual readers.

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.

Other quick tips:

  • Don’t use the file name as the alt text.
  • Pretend that you’re describing the image over the phone to a friend: What information would they need to know?
  • If the image functions as a link, the alt text should describe the link destination.
  • Avoid redundancy. If the text surrounding the image describes it in detail (for instance, there’s a text caption following the image), the alt text can be very brief.

To learn more about alt text, check out our blog post What Is Alt Text, and Why Does It Matter for Accessibility? or review the Web Accessibility Initiative’s Image Tutorial.

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. For example, you shouldn’t instruct users to “click the red button.”
  • 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

The best practice is to avoid using images of text. Usually, there’s a better way to present the content — you can use CSS to style your text visually, and because your text is still on the web page, it remains accessible for screen reader users.

If you must use text, readability is important. 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.

The long description is designated by the longdesc HTML attribute. You’ll use longdesc to point to a URI (Uniform Resource Identifier) such as another part of the page or a separate resource. This approach allows you to use headings, lists, and other structural elements to organize content in a long description.

For example, an image might have the following markup:

<p><img src="mychart.gif" alt="a complex chart" longdesc="mydescription.html"/></p>

That would point to a page (“mydescription.html") that would contain a detailed breakdown of the information from the chart. You might also point to a different section of the same page where more info is available.

Note that in this example, we still have an alt attribute. It’s important to include both an alt and a longdesc. You don’t want to remove the alt text entirely unless the image is decorative or redundant (in which case you’ll still need an empty or null attribute).

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.

Image Types

Developers often ask whether certain image formats are more accessible. The answer: Not really — you can apply an alt attribute to any type of image, and screen reader users generally won’t care whether that attribute appears on a GIF, PNG, or a JPG.

In general, you should opt for higher-quality formats if images present important information. People with vision disabilities may magnify (or “zoom in" on) the image, so it’s a good practice to zoom to 200-400% and make sure your images are still legible.

That’s particularly important if your images contain pre-rendered text — but remember, wherever possible, you should not use images with text. Instead, use CSS to style your text.

Steps to Ensure Image Accessibility

It’s easy to create accessible content when you build with an accessible mindset. Remediating hundreds of issues after the fact is much more difficult — so get into the habit of checking your images for accessibility before publishing.

Here’s a quick list to help you avoid common mistakes:

  • The image has alt text. Decorative images have empty (null) alt text. 
  • The image alt text is simple, concise, and describes both the content and purpose of the image. 
  • If the image contains text, that text is presented within the alt text.
  • Resizing the page doesn’t cause the images to appear out of their logical order. Read more about “reflow" and how it impacts accessibility.
  • If the image is a part of a link, the alt text describes the link’s destination (not necessarily the image itself). 
  • If the image contains text, its colors meet the Web Content Accessibility Guidelines (WCAG) minimum thresholds for color contrast. Use AudioEye’s Color Contrast Checker to test color-pairs against WCAG guidelines.
  • The image doesn’t flash or blink. Learn about the best practices for using flashing or blinking content.
  • Complex images (such as charts or graphs) have a longdesc attribute that points to a long description of the image.

Meeting Image Accessibility Standards with AudioEye

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.

AudioEye can help you build a sustainable strategy for improving accessibility — and finding issues with your images before they impact your audience. Here’s how:

  • Automated Testing: AudioEye's advanced technology automatically scans your website for missing or incorrect alt text, insufficient color contrast, and other image-related accessibility concerns, along with hundreds of other potential issues. Some issues are resolved automatically through our powerful automated remediations.
  • Human Expertise: Our team of accessibility experts can manually review content to catch nuanced issues that automated tests might miss, such as alt text that is technically present but doesn't accurately describe the image's purpose or context.
  • Ongoing Monitoring: AudioEye continuously monitors your website for new accessibility issues, ensuring your content remains accessible as your site evolves.

Request a demo today to get started. Or, to learn more about common accessibility issues, take a look at our list of 10 Web Accessibility Examples for ADA Compliance.

Ready to see AudioEye in action?

Watch Demo

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading