Guide for Crafting Inclusive Infographics Using Our Tool
Infographics, content assets that convey information in a visual way, can be a powerful tool for communicating complex data. However, they can lack accessibility for people with visual disabilities, cognitive disabilities, and those using screen readers. To make infographics more inclusive, it's essential to consider the needs of these users and implement a few key strategies.
Prioritizing Readability
Large, Legible Fonts
To ensure readability, use sans-serif fonts like Arial or Verdana. Font size should be at least 12pt (16 CSS px) to make the content easy to read. It's also beneficial to allow manual font size adjustments if possible.
High Color Contrast
A high color contrast between text and background is crucial for users with low vision or color vision deficiencies. Aim for a contrast ratio of at least 4.5:1. Avoid problematic color combinations such as green/red, blue/purple, or green/grey, which are difficult for color blind users to distinguish.
Simplifying Visual Aids
Simple, Consistent Color Palettes
Limit the number of colors in your infographic to avoid overwhelming and confusing users with color blindness. Use a simple, consistent color palette to make the content more accessible.
Icons and Visual Separators
Incorporate icons and visual separators like boxes to aid in content categorization and separation. This helps users quickly locate and understand information without relying solely on color.
Structuring Content
Clear Visual Hierarchy
Create a clear visual hierarchy with appropriate sizing, positioning, and bolding of key information to guide users logically through the infographic.
Alt Text for Images and Icons
Provide descriptive alt text for all images and icons to support screen reader users with very low vision, describing what the images convey concisely.
Organizing Content
Organize content with clear structure and labels, spacing sections well to avoid clutter and facilitate easy scanning.
Accessibility Verification
Using tools like color contrast checkers and accessible design templates can help verify that your infographic meets accessibility guidelines and is usable for those with visual impairments.
Additional Considerations
- Offering alternative file formats is always a good idea.
- WCAG 2.0 requires a text font no less than 10 points for accessibility. Smashing Magazine suggests sticking to 16px fonts.
- Providing a detailed text transcript will make your infographic page SEO-friendlier.
- Use "Skip Navigation" links to make your graphic transcript easy to locate.
- Always make it clear where the transcript can be located by using headings like "Text Alternative" or "Text Version".
In the United States, over 7,2 million adults (ages 16 to 75+) were reported to have a visual disability in 2016. By implementing these strategies, you can ensure infographics are more inclusive and easier to comprehend for people with various visual disabilities.
