Infographics can be a powerful tool for connecting with your audience, but they can also present unique accessibility challenges. For starters, infographics rely on visual perception, and they’re frequently presented as image files. Without appropriate alternative text (also called alt text), they may be unreadable for users with vision disabilities.
Let’s get this out of the way: Every image needs a text alternative, regardless of its complexity. The good news is that writing alt text for infographics isn’t as difficult as you might assume. Here are a few tips to keep in mind when building your content.
Consider a CSS infographic
If your infographic will live on your website, the best practice is to use CSS (Cascading Style Sheets) to build and style the graphic. This can provide a better experience for both visual and non-visual readers.
With CSS, a talented designer can use responsive and fixed text to keep viewers engaged — and since you’re using semantic HTML, you’re keeping all of the important information in plain text.
Of course, if you’re posting your infographic to social media (or if you’ve already created the entire graphic, and you don’t have a designer on staff), you may not have this option.
If your infographic is a pre-rendered image, you can create a text-only transcript or a long description of the image. That will usually provide a better experience than cramming the entire infographic into the HTML alt tag, particularly if your infographic has subheadings, lists, and other elements that would be easy to present with semantic HTML.
Related: Using Infographics While Keeping Your Site Accessible
Keep alt text concise and direct
While you could write extremely long alt text, that’s not necessary if you’re already providing another alternative (such as a long description or a transcript).
HTML alt text does not need to contain all of the data from the infographic; it simply needs to quickly summarize its function. Provide simple alt text that explains the purpose of the image.
For example:
Infographic showing sales figures for 2021.
Notice that the alt text doesn’t go into extreme detail — that’s because we’re assuming that the text alternative provides all of that detail. That longer text alternative should appear immediately after the image, either in its entirety (via a long description) or as a hyperlink (for transcripts that appear on another page).
Related: 8 Common Image Alt Text Mistakes to Stop Making
Make sure CSS infographics use color thoughtfully
The plaintext version of your infographic should include all of the information that would be apparent to a visual user. In other words, you shouldn’t rely on visual perception to get your point across.
For example, let’s say your infographic shows the shopping habits of men and women. You’ve got a heading that says “Shopping Habits of Men and Women,” then two columns: one in blue (representing the men) and one in pink (representing the women).
Per the Web Content Accessibility Guidelines (WCAG), you should never use color alone to convey information — and you could easily correct this issue by adding “men" and “women" at the top of the respective columns.
Other quick tips to keep in mind:
- Follow WCAG’s requirements for color contrast. Low-contrast text may be unreadable for people with color vision deficiencies, people browsing in bright ambient light, and other users.
- If your CSS infographic uses tables, make sure the tables are readable with assistive technology. For additional guidance, read: How To Build Accessible Tables.
- Think carefully about the information you include. Remember, simple infographics are often much more effective and accessible.
A thoughtful approach pays off: If you think about accessibility when planning your infographic, you’ll have less work to do in the long run. More importantly, you’ll keep readers engaged with your content.
To learn more, download our free eBook: Developing the Accessibility Mindset. For guidance with a specific accessibility issue, send us a message to connect with an expert.
