Web Accessibility for Graphs – Best Practices

by Neal Levene on Tuesday, September 1, 2009 · 1 comment

in Visualization

Graphs pose particular challenges for those with reduced vision. The University of Illinois has a useful website that provides best practices on overcoming these challenges.

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.

At the Web Accessibility Best Practices page of the Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES), they provide an example of an Accessible Graph Example.

Accessible Graph Example

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” />

Following this recommendation will greatly enhance the material that you are presenting to all audiences. Business writing will almost always improve with better and clearer description. While this recommendation will make your graphs accessible, all of the recommendation improves the communication of information to all audiences.

Social Media Links:
  • RSS
  • email
  • Twitter
  • Facebook
  • del.icio.us
  • StumbleUpon
  • Digg
  • Google Bookmarks
  • Technorati
  • Sphinn
  • SphereIt
  • Mixx
  • LinkedIn
  • Reddit
  • Live
  • Netvibes
  • Yahoo! Bookmarks
  • Yahoo! Buzz
  • PDF
  • Print

We welcome your feedback. Please leave us a comment below. If you haven't already, there is no time like the present to subscribe to the RSS feed.

Category and Tags

This post filed in the following categories:

  • Visualization - Visualization is any technique for creating images, diagrams, or animations to communicate a message.

About the Author

This post was written by Neal Levene, CEO of InnovaTech, Inc., who blogs about data and business issues here at Simple Complexity and about a variety of other topics at NealLevene.com. Find Neal on LinkedIn or follow him on Twitter. Neal is available to speak to your organization on a variety of topics. You may also use Simple Complexity's Contact Form.

Comments

{ 1 comment… read it below or add one }

1 Nymphaea Thursday, September 3, 2009 at 10:42 am

I agree that a good text alternative for graphics is necessary, but I doubt if using the longdesc is really best practice since it is not always clear how to access it. Would it not be more appropriate to make this description available to everyone, e.g. in visible text?

Reply

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:

WordPress Admin