Web Accessibility Best Practices

Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES)

University of Illinois at Urbana/Champaign

Graphs

Graphs are excellent ways to convey complex relationships in data. The images themselves are unusable by those with reduced visual acuity or non-graphical browsers, but that does not mean the content must remain inaccessible.

For accessible graphs, ALT text equivalent to a good title for the graph must be provided. Also required is a longer description with either a table of the graph data (using accessible table markup) or a long description of the relationships in the data the graph was intended to convey. This could be something as simple as, "The graph indicates sales rose steadily from January 2000 to March 2003, from 2 million units to 3 million units." The long description should be linked to the image by the longdesc attribute or included in the source document.

Accessible Graph Example

IBM Stock Price and Volume for July 2000 to November 2000

The graph of the IBM Stock Price and Volume indicates that the stock price rose to a peak of $120 in early June, fell to a low of $105 in early July, rose to the maximum price of $133 in September, and fell to the minimum price of $87 in late October. The share volume was relatively constant with larger, transient peaks near the minima in July and October. The table of data used to generate this graph is available.

Example HTML Source

<img src="images/image-longdesc-003.gif"

  alt="IBM Stock Price and Volume for July 2000 to November 2000"

  longdesc="images/image-longdesc-003.html" />