A A A A A

Informative Images Examples

Example 2: Data Chart

Chart Image

The below stock chart page on nasdaq.com features an example of informative image with an adequate text equilvalent. The flow chart that shows the trend of the stock quote of the company featured on the page is an image; the image is marked by the red box (left image). When images on the page are turned off by the broswer (right image), the stock quote trend information becomes unavailable. Although an alternative text, "stock chart", is provided through alt attribute of the img element identifying what the image is, this does not convey the same information the image carries.

This issue is resolved by providing an alternative access, based on text and hence more widely accessible, to the information that is conveyed graphically in the image.

screenshot of alternative text for the stock chart image - 'stock chart'

screenshot of informative image of chart on Nasdaq stock chart page screenshot of the stock chart page with the chart image hidden

Text Data Table

When the chart image is clicked on, a popup window with the data table that features the same set of data, in a tabular format instead of a chart, launches. Since this data table is text, it is accessible to users using assistive technologies.

screenshot of the popup window linked from the chart image with the text equivalent -- the data table of the same data set -- of the chart image