Infographics have become popular in recent years for many reasons. They are a great way to convey complex information in a visual way. They can be designed as images, websites, print material or PDFs. What makes them unique is that they contain the use of graphical elements to represent words, demonstrate various concepts and numerical information into a more simplified format. Not only are they beneficial to sighted users, but they can also be useful for people with visual disabilities. Users with low vision can benefit from infographics that provide concise information that quickly conveys a complex concept or data relationship or even text that has been presented into a visual piece.
While they are helpful, certain types of infographics can present some accessibility barriers to users with other disabilities. Therefore, designers must keep accessibility practices in mind when developing infographics to ensure the content is recognizable to screen readers.
Illustrated Infographics
These are the most popular infographic formats, yet they are the format that is the least accessible. Some screen readers cannot recognize elements such as text or headings because they are designed in an image format. However, these types of infographics can be made accessible by adding an alternative text description that is known as a transcript. This transcript is a full-text version of the infographic that screen readers will recognize and is made accessible to all users. This CDC infographic on how disability impacts all of us is an excellent example of transcript. It provides the title of the infographic, as well as the headings and bulleted information of the data.
Additionally, transcripts can be embedded within infographics with advanced web development skills.
HTML and CSS Infographics
Developers and designers can create infographics directly on to websites using special coding in HTML and CSS. HTML is the standard markup language that is used to create web pages and is typically made up of various elements. CSS describes how the HTML elements are displayed on things such as screen, paper or other media.
If developers properly code websites with HTML and CSS, they can be accessed by assistive devices such as screen readers.
PDF Infographics
Another type of infographic that is gaining popularity is the PDF infographic. PDFs can be made accessible if document accessibility practices are followed. In order to make an accessible PDF, software such as Adobe Acrobat can be used to properly markup tags and structure that will make it easily read by screen readers. The Rocky Mountain ADA Center’s Document Accessibility Course is a great resource for learning how to make documents, such as PDFs, accessible.
Accessible Practices
Designers should keep the following best practices in mind when developing accessible infographics:
- Text display: Making sure that text is always clear and easy to understand and avoid the use of small text and complex language.
- Images: Images that are used must be described to convey important meaning or messaging.
- Links: Whenever there is a link, the text must clearly describe where it will be taking the user. Avoid using “click here” or “learn more.”
- Color contrasting: Ensure that there is enough color contrast between the background and foreground content. Keep users with visual disabilities in mind.
- Structure: Properly identify and tag headings, body content and titles.