How To Make Your Infographics More Accessible

Whenever we put out information on the web we have the goal of reaching as many people as possible. This also involves making our content accessible to people with disabilities.

For visual-heavy content, it's important to make sure they are accessible to people who depend on screen readers to surf the web. Whenever you add an image to your website it's important to fill out the alt attribute with enough description to help convey the information to people who might have difficulty viewing it.

🚫 Wrap Code📋 Copy
01:  <img src="path/to/image" alt="An infographic providing recycling stats of different materials">

Unfortunately, a simple text description is not always enough to describe content such as infographics and graphs. The w3 specification [↗] describes different ways to better capture as much description needed for these types of images.

To better capture the information in the above infographics we introduce the arial-details attribute to point our image to the section of our page containing more information by referencing its id detailed-infograph in this case.

We add a bit of CSS to take the extra details section off the screen, ideally though, if it doesn't affect your design it should not be hidden.

🚫 Wrap Code📋 Copy
01:  <style>
02:      /* CSS */
03:      .hide-detailed-infograph {
04:          height: 1px;
05:          margin: -1px;
06:          overflow: hidden;
07:          padding: 0;
08:          position:absolute;
09:          width: 1px;
10:          border:0;
11:          clip: rect(0 0 0 0);
12:      }
13:  </style>
14:  <!-- Image tag -->
15:  <img src="path/to/image" aria-details="detailed-infograph" alt="An infograph providing recycling stats of different materials">
16: 
17:  <!-- Detailed infographic -->
18:  <dl class="hide-detailed-infograph" id="detailed-infograph">
19:     <dd>Plastic</dd>
20:     <dd>Americans throw away enough plastic bottles each year to circle the earth four times.</dd>
21:     <dd>Glass</dd>
22:     <dd>Recycling 1 glass bottle saves enough energy to light a 100-watt light bulb for 4 hours.</dd>
23:     <dd>Aluminium</dd>
24:     <dd>Recycling a single aluminum can save enough energy to run a television or computer for three hours.</dd>
25:  <dl>

Here is another article you might like 😊 "Diary Of Insights: A Documentation Of My Discoveries"