Chapter 2 : Charts and Graphs

Charts and graphs are also images on the web pages. However the information conveyed through these images is large. Often the data should also be represented to the user in alternate formats such as tables. An alternate text method is not sufficient to convey all the data available on the charts or graphs.

  1. Alternate text cannot accommodate large amount of content.
  2. Content provided through alternate text cannot have semantics. It can be only a set of words, cannot be a table or list.

The possible ways in which the information can be conveyed are

  1. Alternate format
  2. Long description.

Alternate format:

In many cases the information on a chart need alternate formats. Not only a screen reader user, even a user who have color deficiencies, users who have cognitive difficulties may also find it difficult to understand the assense of a chart or graph. Alternate formats such as tabular structure along with the graphical representation benefits everyone. In the interest of the space on the web page often designers rely on show/hide widgets. By default the chart or graph will be available on the screen, however a link that says ‘Show tabular format’ is provided to replace the picture with a table.

Long Description method

A longdesc attribute is available in HTML markup that can be added to the <img element. The value of the longdesc attribute is the file that contains additional information of the page. This file can be a simple notepad or a word document or even a HTML file.

The information conveyed through the chart can be updated in a semantic way in this alternate page. Screen reader users can activate the long description page with a special keystroke assigned i.e. NVDA key + D with NVDA screen reader.
Remember that a simple alternate text is still required even a longdesc attribute is provided. A sample code is provided below.
<img src=‘images/world_disability_senses.jpeg’ alt=‘ World senses on disability’ longdesc=‘Additional_description.html’ />

Group of images

Images such as ratings for a product on an eCommerce website need alternate text. The catch here is that all the 5 images does not require alternate text. All the images together convey the meaning not the individual ones. So, ideally the alternate text is required for only one image among the 5 and the rest 4 needs null alternate text.
<img src=‘selected_star.png’ alt=‘3 out of 5 stars’ />
<img src=‘selected_star.png’ alt=‘’ />
<img src=‘selected_star.png’ alt=‘’ />
<img src=‘star.png’ alt=‘’ />
<img src=‘star.png’ alt=‘’ />
The screen reader reads the above example on a page as ‘Graphic 3 out of 5 stars’.