Image Accessibility

Images are already about accessibility. Having good imagery on your site that truly serves the purpose of your content can actually improve the overall accessibility of your site. Here's a snippet on this topic from the Web Accessibility in Mind (WebAIM) website:

Some people think that graphics are bad for accessibility. The truth is that graphics can be of great benefit to the accessibility of a web page by providing illustrations, icons, animations, or other visual cues that aid comprehension for sighted individuals. Too often we forget that when we design for people with disabilities, we are not designing only for the blind. We must consider disabilities of all types. Graphics can be especially useful to individuals with certain reading disabilities, learning disabilities, attention deficit disorders, or cognitive disabilities.

Using imagery to enhance the accessibility of your content can be a big win for you and your visitors. Think strategically about how images can make the content of your site more accessible. A wall of text is not necessarily the most accessible format for your content.

Purposeful imagery can greatly improve the accessibility of your content, but we will also want to make sure that the images we add are accessible in and of themselves. By considering things such as alternative (alt) text, long descriptions, color and contrast, minimizing text within your images, and avoiding images that can cause seizures, you can make sure that the imagery on your site is accessible to visitors with disabilities (e.g. low vision, color-blindness, or blindness) or those who have turned off images in their browser. Working to make your images accessible also helps search engines better index the content on your site, which can improve your SEO (Search Engine Optimization).

Writing good alternative (alt) text

Alternative text (or the alt attribute on the image tag, e.g.: <img alt="alternative text here" />) is used to explain the purpose of an image to those who are using screen readers or have images disabled in their browser. Unfortunately, we don't necessarily always want alternative text. To better understand this, I like to use this handy decision tree (below) to decide whether my image needs alt text. I've added some examples into the decision tree below to hopefully make it a little more useful.

Follow the decision tree to figure when to provide alt text:

• Is this image the only content of a link or form control? (For example, an icon or graphic representing a button, such as the home icon that often is a link to your homepage)
  • Yes: Use the alt attribute to communicate the destination of the link or action taken
  • No: Continue on!
• Does this image contain text? (For example, a "Make a gift" button graphic)
  • Yes:
    • If the text in the image is also present as real text nearby, use an empty alt attribute.
    • Otherwise, if the image is the only source of that text, then use the alt attribute to include the communicative text of the image (not text included for visual effect)
  • No: Continue on!
• Does the image contribute meaning to the current page or context? (For example, your image might add specifics to a topic on the page, like a photograph of your staff working on a specific project described on the page)
  • Yes, and it’s a simple graphic or photograph: the alt attribute should briefly describe the image in a way that conveys that meaning.
  • Yes, and it’s a graph or complex piece of information: include the information contained in the image elsewhere on the page.
  • Yes, but a suitable alt text is unknown at the time of publication (for example on a photo upload site): provide a caption for the image.
  • No: Continue on!
• Is the image purely decorative or not intended for the user? (For example, a pattern graphic or an unrelated landscape photo used to add color to the page)
  • Yes: Use an empty alt attribute.
  • No: Continue on!
• Image use not listed above or unsure about what alt text to provide?
  • This decision tree does not cover all cases, for detailed information on the provision of text alternatives refer to the World Wide Web Consortium (W3C) Editor's draft "HTML5 techniques for providing useful text alternatives" requirements and recommendations.

When to write long descriptions

When your image is too complex to describe in short alternative text—for example, if the image is of a chart, graph, or infographic—you will want to provide a longer description of the contents of the image in addition to the short alternative text. A long description should provide all the information available through the complex graphic, but in text form. For example, if your graphic shows a chart tracking growth over time, your long description should describe what the chart is showing and list the values of growth for each unit of time. The reason we want this kind of detail for a complex graphic is that our graphic in this case is conveying critical information. The chart itself contains data that the user should be able to access. If they are blind or have other disabilities, we need to give them another way to access that data.

There are a couple of ways to provide long descriptions:

1. Provide a long description elsewhere on the page, such as a caption.
2. Use a normal hyperlink to link to another page that contains the long description.
3. Provide a link to a long description via the longdesc attribute, which can be added to the <img> tag.

To learn more about each of these methods, visit the WebAIM page on long descriptions.

Color and Contrast

Similar to the long description, when we have critical information being conveyed through our graphic (in this case maybe a chart or infographic), we want to consider disabilities such as color blindness and low vision. Make sure there is sufficient color contrast in your image so those with low vision can distinguish important information. The best tool for analyzing color contrast and also taking into consideration color blindness is The Paciello Group's Colour Contrast Analyser. By entering in your custom color values, you can make sure you are using sufficient color contrast in your graphics and simulate how those colors will look to those with color-blindness. The way the analyser tool (and others like it) checks for sufficient color contrast is by looking for a color contrast ratio of 4.5:1 for normal text (for level AA of WCAG 2.0). For larger text, a contrast ratio of 3:1 is acceptable under AA standards.

Now, when you go to download and install this handy program, don't be intimidated by their wall of text (maybe they should add some images?). Instead, skip to the Downloads section and grab the version that's right for your operating system. Once you open the Colour Contrast Analyser, you'll see it's very easy to use.

Why we should minimize text in images

Users may need to scale up the size of a webpage to view it at an accessible size to accommodate for low vision. When this happens, graphics can become fuzzy and hard to read. When we put text inside our graphics, this text becomes harder to read if the user has scaled their browser. Although we can use alternative text to describe the text inside an image, instead, we will want to try to avoid putting text inside our graphics as much as possible to minimize the risk of it being inaccessible. Common cases where we do need to use text inside an image might be for logo or trademarks, and complex button graphics using special fonts. That said, nowadays we can more than ever find more accessible solutions using web fonts and floating the text over a background graphic. Again, we will want to make sure that there is sufficient color contrast so that the text is legible.

Here are some guidelines to follow if you're going to place text inside an image:

• Make your font sizes as large as possible
• Use simple block fonts when possible
• Use good color contrast between the text and background

Avoid images that can cause seizures

OK, this might seem obvious, but it's worth stating. Flickering visuals that create a strobe-like effect may cause seizures in some individuals. Now, I don't recommend that anyone use animated graphics on their site without a very good reason, but in particular, we want to avoid high contrast, strobe-like animation effects, even if you think your "Warning!" message warrants it. The WebAIM site gives some examples and goes into greater detail about this particular accessibility consideration.

In conclusion...

Images can greatly improve the accessibility of your site's content, but we need to be careful to make our images accessible to everyone by including appropriate alternative text, long descriptions, and making sure they use appropriate color contrast. I hope this post has been a helpful introduction to understanding some of the accessibility considerations you should balance when adding an image to your site. At the very least, I hope the alt text decision tree can be a useful tool! Remember, it's better to do a little bit than nothing at all, so if you're feeling overwhelmed, just start with the small stuff.