On Infographics and Accessibility

My Infographic in Venngage

Though I did not make this infographic for this class (I created it in October 2015), I wanted to share it here now for my Digital Citizenship classmates to see. It is certainly relevant to our unit/collection 3 explorations as it argues for open educational resources (materials with Creative Commons licenses). Since others have been making infographics, I thought you might like to see one from Venngage. As Rebecca Missler points out in a comment on Sarah Carstensen’s blog, the free Venngage tools do not give you the completed image (though you could work around that with screenshots). Rather they only allow you to link to it. I’ve taken a partial screenshot as a preview because this post needs some sort of visual to lead you to click on the link!

Infographic: How Textbook Costs Impact Students Academically
(for a version that is accessible for the visually impaired, please refer to the “Making My Infographic Accessible” heading below)

Preview of infographic "How Textbook Costs Impact Students Academically"
Preview of my infographic.

Infographics & Accessibility

One of my personal professional development goals current/ending academic year was to beef up my understanding of accessibility and make a concerted effort to make my all of my works as accessible as I can (within time and tool restraints). In addition to learning the concepts and skills, I wanted to increase my awareness of accessibility issues and get in the habit of always asking myself, is this thing I just created  accessible? How can I make it more so?

Infographics are awesome for helping sighted people better and/or more quickly understand information or data. However, infographics appear to be completely inaccessible for people with visual impairments. The very idea of an infographic is that material is presented in a succinct visual format. If infographics are inaccessible, that would make these infographics quite ironic…

This infographic seems to have failed its own challenge.

This one tells you how to make your website accessible — in a way that is inaccessible for sight impaired people, of course.

The creator of this post fails to see the irony of posting a series of infographics on accessibility that are inaccessible. This is despite the fact that the creators of at least one of the original infographics created an accessible version!

And in tragic irony, from an organization that should know better, Microsoft’s infographic is wholly inaccessible, even if you download the pdf version (scroll to the bottom to view it).

(Side note: Those of you who are sighted, I encourage you to take a look at the content in the above infographics as there is great information there that you have the exclusive privilege of accessing.)

The problem lies in the infographics as standalone image files, as they often appear. The logical solution, then, is to build accessibility into your website and blog where you are displaying the infographic. I did some exploring online to see how we can go about ensuring universal access to our infographics.

A company called Ecru created an excellent example of how you can make an infographic accessible within your website or blog. Just above the infographic, they provide a link to an anchor within the page where the text of the infographic is provided as text on the web page. This seems incredibly common sense now that I see it, and yet it hadn’t occurred to me to approach it this way. My initial thought was to use alt-text to describe all the content of the infographic but that creates it’s own problems as there is no structure in alt-text.

The infographic itself points out a number of strategies that help make infographics more accessible for those who are sighted or sighted to some extent. These include the standard universal design concepts of considering structure (headings), color/contrast, clarity of text, and using alt-text for images (in this case, the infographic image when placed into your website or blog).

Preview of Ecru's infographic on making infographics accessible
Preview of Ecru’s infographic on making infographics accessible.

Interactive Accessibility encourages us to move away from infographics as images entirely in favor of making infographics with html and css (as in, building them into a website). This certainly is an option but, as Ecru points out in their infographic, this reduces the ability to share an infographic.

Making My Infographic Accessible

In response to what I have learned, I want to make my own infographic more accessible to people with visual impairments. Here is my text only version.

How Textbook Costs Impact Students Academically

Percentage of students who, at some point in their college careers:

  • Have gone without a required textbook at least once: 65%. Of those who have gone without, 94% were concerned about the impact this would have on their grade in the course.
  • Frequently go without a required textbook: 23%.
  • Earned a poor grade because they didn’t have the textbook: 34%.
  • Failed a course because they didn’t have the textbook: 17%.
  • Chose no to take a course based on the cost of the textbook: 45%.
  • Took fewer courses than they wanted due to textbook costs: 49%.
  • Dropped a course due to the cost of the textbook: 27%.
  • Have withdrawn from a class due to the cost of the textbook: 21%.

The high cost of textbooks has an impact on student success.

What can faculty do? Look in to open educational resources (OER) for your courses.

82% of students surveyed said they would do significantly better in a course if the textbook was available for free.

More information on OER:

Find OER:

Footnote: This infographic is licensed under a Creative Commons Attribution 4.0 International License. Data in this infographic is pulled from 2 surveys: “Fixing the Broken Textbook Market,” Student Public Interest Research Groups, January 2014, CC-BY 4.0 License; and “2012 Florida Student Textbook Survey,” Florida Virtual Campus, 2012, CC-BY/NC 3.0 License.

3 thoughts on “On Infographics and Accessibility

  1. The Ecru example and model is a good catch. I’ve done similar things with inaccessible mind maps…when I’ve been lucky, the mind-mapping software has included a reasonable way to export a text version or something that I can easily manipulate to create a well-structured text version for alternative consumption.

    The irony of inaccessible content about accessibility abounds…but it still surprises me that it exists even where relatively simple remedies like this exist.

    I haven’t tried creating infographics purely with HTML and CSS. I need to spend some time exploring that option (though I have done that with HTML/CSS systems for generating “slides” for presentations and have loved it because in creating the slides I’ml already creating the accessible content….win/win)

    • The thought of making a sharp-looking infographic in html and css makes my head hurt. 🙂 That would take way more time than easy to use tools like Venngage and Canva. It also requires more advanced technical skills to build an infographic in code.

  2. Nice infographic! The post makes a good argument as well. I love infographics for visually giving info but they are tricky to make accessible. I hadn’t thought about adding an anchor with the text, it is a great idea. Thanks for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *

*