Technology has helped to make the world and the web more accessible to everyone. With tools such as screen readers, visually impaired individuals can still access written text and visual information. Not all online content is readable by screen readers, however. Designers and creators must be aware of practices that ensure their content is widely understood.
Infographics are a visual medium. An infographic presents complex information or data using pictures and icons in place of words, charts, and graphs that map out data and the use of color. This color usage can make infographics harder to comprehend for people with visual or cognitive disabilities.
There are ways to make infographics and other online content more accessible. Here are some guidelines to follow:
(Pixabay/Pexels)
Include Text Descriptions for all Images
Since most of an infographic’s design relies on images, including text descriptions for each image is essential for accessibility. A screen reader will not recognize any text included on the image itself. Instead, you will need to write alternative descriptive text for every image you use. Alternative text is hidden behind each image in the HTML code.
Another option is to place a full descriptive transcript beneath the file wherever you post infographics, which is the easiest option for helping screen readers to pick up written text. When writing the transcript, remember the design choices made on the infographic. If certain words or statistics are highlighted or bolded, try to convey the same meaning in your text description.
You may choose to include a link to the text transcript instead of having it on the same page as the infographic. You should include a transcript description with a clickable link directly above or below your infographic.
Text Formatting
For sighted readers with mild visual impairments, making your text as clear and legible as possible is still important. Always choose easy-to-read fonts and, when possible, go with larger font sizes. Serif fonts are known to be harder to decipher.
It is also essential to keep the text clear and concise. Avoid longer sentences and lines that ramble on. Ensure the language and tone are appropriate and easy to understand to keep the audience engaged.
Create the Infographic Using HTML and CSS
As mentioned, text transcript descriptions may be hidden behind images in the HTML code. If you have the skills or the budget, you could convert your infographic into CSS code for even better accessibility. CSS code allows you to embed the infographic’s content directly onto a website.
With semantic HTML, you can include accessibility features on the website itself. This is done through clear descriptions of the page layout and structure. For readers who use keyboards with hotkeys that assist with jumping from heading to heading, semantic HTML can help with navigation. Lists and graphs should also be clearly defined in the HTML. HTML infographics also increase the SEO for a website.
Use Adobe Acrobat Pro for PDF Creation
Historically, a PDF file was one static image. This format caused accessibility issues for many readers. With Adobe Acrobat Pro, however, a PDF infographic may be created using accessibility markup tags that screen readers easily read. This method allows for the ability to include selectable text on the PDF file itself.
Consider the Screen Reader
We’ve discussed including text descriptions for all images to assist screen reader users, but there are other safe practice tips to consider. Dashes, commas, and dots with numbers in the text will not be apparent on a screen reader. For example, “22 – 30” will come out simply as “22, 30.” Including particle words like “from” or “to” help to avoid confusion.
Clearly describe in the text transcript any implied headings or visual icons. Take the time to consider visual clues in the infographic that may be missed in a textual read from a screen reader.
Link Formatting
Any links used in an infographic need to be separate from the image and have clear text describing where the link will take the user. “Click here” is not helpful for a visually impaired reader. Ensure that the placement and destination of the link are all easily understood in the copy.
Color Contrasting
The use of color in infographic design is helpful in many ways. Colors represent brands, can be symbolic, bring up different feelings and emotions, and help with visibility. When deciding on what colors to use, accessibility must also be considered. Those with visual impairments rely on high-contrast colors for better readability. If the background and foreground colors are too close, readers will not be able to understand the text.
Any information only represented through color should be clearly explained in the descriptive text or other non-visual cues. When designing an accessible infographic, try putting the content into a gray-scale to evaluate what only comes across in color and what will need further explanation if its colors are not perceived.
Infographics break down complex information into an easier-to-understand visual format. While creating content to be understood by everyone, designers must ensure that the information is truly understandable and accessible to all. Accessible design shouldn’t hinder creativity, but by following these accessibility practices, you can expand your audience and reach.