March 29 2021

Best Practices for Making Infographics ADA Conformant

infographics ADA conformanceInfographics are an increasingly popular content marketing tactic. Their highly visual nature allows for sometimes complex topics to be broken down in an easy-to-follow format, allowing readers to better comprehend and digest these topics. However, because they are 100% reliant on visuals, they are a huge challenge for the 60 million Americans who have some kind of disability. The answer is not to stop using infographics in your marketing plan but instead to understand how to make them accessible to everyone, no matter their disability.

What are screenreaders?

For the uninitiated, screen readers like JAWS and NVDA are tools that allow a person with visual difficulties to have a webpage read to them. Screen readers are actually older than HTML, and HTML was written with screen readers at least partially in mind. So if the HTML is coded correctly, the screenreader will read it correctly. But as advanced as screenreader technology is, it still cannot read images that are purely of text, which is what an infographic is.

A good solution to making infographics ADA conformant

Let’s say you have a Mortgage Paymentinfographic called “mortpay.gif” describing how if you put $25 extra a month on a 10 year/$10,000 loan, you’d save $380 and shorten the loan by 28 months. The easiest way to make this meet WCAG standards would be to do the following:

  1. Make sure the alt=”” in the image. <img src="mortpay.gif" alt="">. This tells ALL screen readers to ignore the image.

  2. Provide the exact same information at regular HTML text below the image: If you put just $25 extra a month on a 10 year, $10,000 loan, you’re save $380 and shorten the length of the loan by 28 months!

This is perfectly respectable solution and works for all screenreaders. But with most Infographic pages, it’s still a strange experience for screenreader users. Many pages with infographics contain just an infographic (or infographic + HTML description). Visually, this makes sense, but to a screenreader, it feels like the page is slight, or like it didn’t fully load.

A better solution: using the LONGDESC code

There is a better way to meet current WCAG standards and have the infographic work seamlessly with the page, and that’s using this LONGDESC best practice:

Using the same infographic and the same HTML information, you tie the two together:

  1. Make sure you have a valid alt (don’t have it be too wordy) and then a longdesc that points to the equivalent text in the page. <img src="w3html.gif" alt="mortgage early paydown example” longdesc="">

  2. Make sure the <p> or <div> that contains the description has the id tagged in the longdesc:<p id=”PaydownDesc”> If you put just $25 extra a month on a 10 year, $10,000 loan, you’re save $380 and shorten the length of the loan by 28 months!</p>

  3. Make sure that in the page, the actual description is the very first thing after the image itself. This prevents the user from accidentally jumping to another part of the article and losing context. It also makes sense to sighted users since it looks like a caption.

A screenreader reads out the longdesc, and provides the option for the user to jump to the description or not.  Best of all, this isn’t complicated or particularly difficult to do. It’s basic HTML that can be done inside any CMS by anyone with a cursory understanding of HTML.

Infographic design considerations for ADA conformance

In addition to the coding best practices outlined above, it’s also smart to be aware of other ADA considerations when designing an infographic, including color contrast and font sizes. Using a color contrast checker tool to select colors that pass WCAG guidelines is smart for every designer, and being aware of WCAG font size recommendations can also be helpful to partially sighted individuals.

The popularity of infographics is not expected to slow down anytime soon, but balancing this visual medium with the importance of making your content accessible to all is key to making sure your content marketing game is strong. ZAG is happy to talk to you about best practices for creating custom infographics, as well as making them ADA conformant, so contact us to discuss this topic further.

  • Website
  • Website Compliance

ZAG Interactive is a full-service digital agency in Glastonbury, CT, offering website design, development, marketing and digital strategy to clients nationwide. See current job openings.
Related Article
Accessibility in All Phases of a Project Lifecycle