Infographics on the web have skyrocketed in popularity over the last few years for many great reasons. Often, they are able to quickly convey complex bits of information and show key relationships between data sets. For sighted users, representing data as an infographic actually improves accessibility. It’s easier to understand because infographics:
- contain more concise pieces of information.
- illustrate nebulous concepts and large numbers in a simple way
- visually depict relationships and comparisons between data sets and information
Infographics tend to be very social media friendly because users can scan the information, share it with networks, and move on.
RETHINKING GRAPHICS & ACCESSIBILITY
It turns out that the infographics’ benefits to sighted users can also be used to create a case for making the same content more accessible to the blind or visually impaired. Users with low vision or no vision at all are also looking for concise information that quickly conveys a complex concept or data relationship or distills a large set of data or text into a small piece of information. It’s no secret that the visually impaired as a whole have a tougher time conquering math concepts, so it stands to reason that they would also benefit from a more descriptive approach to data. Why not make the content available and easy to consume for everyone?
IT’S ALL SEMANTICS
The best and most accessible option for infographics is to avoid the temptation to simply use a text alternative to describe an existing image. Images that contain text get distorted and pixelated for low-vision users who use zooming tools, and infographics in general, contain so much data that alternative text just wouldn’t do them justice. The better solution is to mark up the content using native HTML elements (headings, unordered lists, ordered lists, tables, etc., where appropriate) and style the HTML accordingly using CSS to be visually appealing for sighted folks. This approach allows:
- sighted and non-sighted users to scan the headings.
- screen reader users to quickly find out how many items are listed in data sets.
- print stylesheets to function properly, giving a nice report on the printer instead of just a photo.
- simple functions such as copy and paste to operate as expected for sharing content or quoting the source on social networks.
EASTER EGGS FOR SCREEN READER USERS
Screen readers are very literal and, as such, tend to read out numbers in a list with no particle words or punctuation. In many cases, non-sighted folks have a tough time discerning if the numbers should be read as a series (13, 21, 34, 55…) or a range (34 – 55).
Using a CSS technique to position text off the screen, it’s simple to add some particle words (such as “from” or “to”) for screen reader users. In the case of a range of numbers, the dashes can be presented using graphics and not part of the text content of the page. For example, in the second data point shown in the image below, instead of a screen reader announcing “twenty-six percent fifty-five sixty-four” it would be “twenty-six percent fifty-five to sixty-four.”
Another example is implied headings. Sighted users can understand quickly from images that a data set title should be “gender” but if the heading doesn’t appear in the design, it should be added and visually hidden using CSS. Screen reader users can scan the page by headings and understand each section without having to infer meaning from surrounding text.
CONCLUSION
Creating accessible infographics should not be rocket science for anyone who can slice PSD files and turn out good-quality HTML and CSS. There can be a few extra bits of work involved in perfecting the finished page, but in the end, the infographic is not just some static image. It is readable by people using assistive technology and also easily indexed by search engines, which can be considered a type of blind user.
On that note, an HTML-based infographic can use existing information for social sharing (such as image thumbnails, summaries, etc.) and be even more visible and shareable on networks such as Facebook and Pinterest. If you want your content shared online, then why would you allow barriers and annoyances to keep your infographic from going viral?
Furthermore, it would be an interesting exercise to move away from images to create responsive infographics for the mobile web. In today’s world of portable devices, it’s becoming more and more important to reach users who are on small screens. Giving them the ability to avoid pinching and zooming would be well-received, I’m sure. Good usability benefits everyone, not just the disabled.