Beyond Alt Text: Making Infographics & Complex Visuals Accessible

This is your golden rule. Never present information only visually.

While a simple alt text like “Infographic showing Q3 sales data” is a start, for complex visuals, it’s just not enough. Your alt text should be a concise summary of the graphic’s main takeaway.

Example: For a sales infographic showing growth, alt=”Infographic: Company sales grew 25% in Q3, driven by increased online conversions.”

This is where you put all the detailed information presented in your infographic into plain text on the page itself, or on a linked page. Think of it as the infographic’s transcript.

How: Place the text directly below the infographic, link to a dedicated “text version” page, or put it in an expandable section. This ensures screen readers, search engines, and anyone who prefers reading can access the full content.

Sometimes, an alt text summary isn’t enough, and placing all the text on the page clutters it. This is where a “long description” comes in.

For very complex charts, diagrams, or intricate infographics that require extensive explanation to understand fully.

You can use an HTML longdesc attribute (though its support can be inconsistent), or more commonly, simply provide a link directly below the image that says something like, “View text description of this infographic” which leads to a separate page or section with the full details.

Often, infographics include data presented in tables. An image of a table is useless to a screen reader.

If you’re displaying tabular data, use proper HTML table elements (<table>, <th>, <td>). This allows screen readers to navigate the data cell by cell, understanding rows and columns properly.

Avoid screenshots of spreadsheets. If you have data in an image, also provide it in a standard, accessible HTML table.

Your infographic’s colour palette needs to be readable.

Ensure text and graphical elements (like lines in a graph) have enough contrast against their backgrounds to be easily seen by people with low vision or colour blindness. Use the WCAG 2.1 AA guidelines.

Never use colour as the only way to convey information. If you’re showing different categories, use distinct patterns, textures, or labels in addition to colour.

While infographics are visuals, simplicity aids accessibility.

Tools like WebAIM’s Contrast Checker or Coolors.co help you check your colour pairings.

Use tools (like the Flesch-Kincaid test in Microsoft Word) to ensure any textual content accompanying your infographic is easy to read.

Some design software (e.g., Adobe Illustrator) has plugins that can help check colour contrast.

While there are tools that claim to “fix” accessibility with a single snippet, their effectiveness for complex visuals is limited. Focus on building accessibility in from the start and use these tools with caution.