Digital Accessibility Blog

Using Infographics While Keeping Your Site Accessible

Written by Olivia | Feb 9, 2021

Infographics provide a compelling way to give readers information. By laying out statistics and key facts in a visually engaging way, infographics draw in the reader, providing them with a uniquely memorable experience.

However, any medium that relies heavily on visuals can create significant barriers for certain users. Many people with vision disabilities access the internet with screen readers, software tools that convert on-page content into audio or Braille. These tools would be unable to interpret a static image of an infographic, and poorly written text alternatives may not provide the same experience.

Even with a carefully written text alternative, infographics can cause issues. People who use keyboards for navigation may have trouble moving through infographics. Some users might not be able to read an infographic with small text, and people with colorblindness might miss information presented with certain colors.

That’s not to say that infographics are bad or that organizations shouldn’t use them. Infographics can be useful and engaging; however, designers should always consider their real-world users and the issues they may come across.

Whenever possible, avoid relying on visual media alone

Many web users think of infographics as large image files, ready to be shared via email or on social media. However, "infographic" doesn’t have to mean "static image," and a hefty PNG file might be less engaging than a well-written HTML webpage. By using actual text to create your design, you can reach a wider audience without sacrificing visual design. You’ll also improve your search engine visibility, since search engines can easily interpret HTML content.

An experienced designer can create stunning visuals using CSS and other styling, and creative use of responsive and fixed text can complement the effect. By keeping your text on the page, you can ensure that all of the information is accessible for people who use assistive technologies.

Of course, not all web users with disabilities use assistive technology. For everyone, your infographics should use appropriate colors, which you can check with the a11y® Color Contrast Accessibility Validator. Also use fonts that are easily legible for more users.

Define your infographic's layout with semantic HTML

When displaying your infographic onsite, you’ll need to ensure proper use of semantic HTML to convey the meaning of various elements on the page and define the structure of the infographic.

This will make infographics legible for screen readers and help users who access your website with other types of assistive technologies. For example, a person who navigates via keyboard can use hotkeys to quickly jump from one heading to the next. If the page has appropriate semantic HTML, that user can easily move from one section of an infographic to the next. However, when the page’s structure isn’t clearly defined, navigation can suffer. Likewise, take care to define lists, graphs, and other elements appropriately.

Incorporating semantic HTML isn’t especially difficult, but it’s more difficult to accomplish after the infographic is live. Always keep accessibility as a priority through the design process.

Remember, the idea of using semantic HTML to properly identify elements stays true even if your infographic is one large image. In this instance, you'd want to make sure your text transcript is well-structured.

When using static images, provide alt text explaining the presence of the infographic

If your organization has a vast library of static infographics, you might not have the budget to recreate every single one of them in CSS. One alternative: Provide detailed transcripts, properly formatted to give all of your users a similar experience.

To write effective transcripts, pay attention to how your design choices affect the user. Think about your intentions; are you using a certain font or color to show that a statistic is important? Does the infographic contain lists, subheadings, and a clear structure? Will users be able to get the same experience if they’re simply reading the text alone?

When providing transcripts for image-only infographics, ensure that the images have descriptive alt text that explains whether they can find the text-based transcript. Image alt text is preferable to simply hiding the image from screen readers — users may want to know that the page contains visual media with information.

Write an effective transcription of your infographic

Make sure that the written transcript provides the same information and a similar experience as the infographic. When visual elements are used for effect (for instance, different colors used to denote different demographics), those elements should be explained or reproduced in the text. For example: A reader with perfect vision may be able to understand that blue and pink text refers to statistics about men and women, but a person who cannot easily interpret those cues will need additional information to draw that conclusion.

Ideally, your transcript will appear on the same page as the image-only infographic.

Build infographics with accessibility in mind

Infographics provide a unique experience that isn’t easy to define in simple terms, and creating accessible infographics can seem challenging. However, accessibility standards aren’t intended to restrain your creativity or prevent you from using visual engagement to interact with your users.

The goal is to provide an equivalent experience for all users, and observing the principles of accessibility can dramatically expand your site’s audience. Infographics make excellent web content, and an accessible approach makes them even more powerful resources.