Infographics are a very useful tool for blogs, especially for visually-appealing concepts and data best explained using a chart or graphic. Unfortunately, they are not very accessible. When we published an infographic called 25 Years of SEO, I noticed it contained lots of text that would be equally interesting as just plain text. I also noticed the alt text on the infographic was only the title of the image, which isn’t useful to someone using a screen reader. In an effort to increase the accessibility of our site, I researched the best way to make infographics accessible.
For infographics that don’t contain much text, using the alt attribute on the image should suffice, as long as the idea in the infographic can be expressed in a couple of sentences. Since we’re dealing with considerably more than a couple of sentences, I kept looking for a solution.
My first instinct was to use a block of content underneath the graphic with the class screen-reader-text. This special class is built into WordPress as a way to “hide” text intended only for screen readers. Its mostly used for labels on image links or icon-only menus, like social network links, or for adding text for screen readers when it needs additional text to be clearly understood. For an infographic, that block of content could be huge, especially if there is lots of text on the infographic. Google doesn’t look kindly on hiding large blocks of content since that could be a black-hat way of gaming the search engine algorithm. Thankfully, the kind folks at Webbism have a great technique for making accessible infographics that we are using to make infographics accessible.
Below the infographic, put a header tag (we’re using an h2 tag) containing something like “Text alternative to the _ _ infographic.” and give it an ID; we opted for using “text-alternative”. After that, type out the text from the infographic and/or explain the graphic as if someone couldn’t see it.
Above the infographic, put a link that takes the visitors to the “text alternative” header below the infographic. The text for this link, ideally, should mirror the header below; something like: “Text alternative for the _ _ infographic.” The href attribute (the “link”) should just be #text-alternative, matching the ID of the “text alternative” header.
The link above the graphic increases usability and gives screen readers an easy way to bypass the graphic and get to the content. Other users can easily scroll past the link to view the infographic. You’ll get an added SEO benefit from having all the text in the post too!