Graphs and Charts

Graphs and charts are great tools for visually displaying data to users. Some people can understand data better if it is visually displayed while yet others can understand the data more quickly if it is in table form. In my experience the two combined make it easier for users to understand the data better. Since graphs and charts usually tell a story from different perspectives than the data does it is always important to have them along with your tables of data.

The downside is that people who are visually impaired cannot understand the graphs and charts so we need a way to explain to them what the graph or the chart is showing the user. In the previous section we discussed the alt attribute but most graphs are complex and would require at paragraph or two to explain fully what the graph is saying. This does not mean we want to leave out the alt attribute, that should always be put in.

The way we describe what the graph is showing is by using the longdesc attribute which most page readers support and some browsers. The longdesc is actually a link to a file that explains what the graph is showing.


<img src="/images/basic_wai/usage.png" alt="usage summary for grindinggears.com" longdesc="usage_summary.html">

?>

In the usage_summary.html file we would have something similar to below


<p>usage summary for grindinggears.com description</p>
<p>This graph shows how many pages,
files, and hits there were during each given month. In April there
were 96 page views. In May there were 197 page views. The page views
in June went down with only 87 page views. In July the number of page
views went up to 168. In August the page views hit a new record high
of 1934. In September the site started to take of with more than
double the August number with a display of 4909 page views. October
was not quite double August but still showed a great in case in page
views serving 7812 pages.</p>

?>

By making this description available to those browsers and page readers that support longdesc it makes it possible that users will get more out of your graphs. There are some browsers and page readers that do not support longdesc so the standard way to get around this is to use what is called a "D-link" which is putting a link next to the graph with a D in it which would look like D next to the graphic.

For those web masters and developers that do not like the D-link method you can use another method which involves using a clear image and setting the alt attribute to "Description of usage summary for grindinggears.com" and linking that to the page with the description. The upside to this is that the page itself has not visible link, as long as you set the border equal to zero. I see no reason why a web master would not want to give everyone the option of reading the description but everyone has their own preferences.

Most browsers allow you to turn images off so make sure you test your site with your images turned off to make sure that all the alt tags do show up. You can also test, with some browsers, that the alt tags are set by putting your mouse over the image and seeing if a box shows up that has the alt tag text in it. Some browsers, however, do not show the alt tag text when you house over a button, they show the title text instead so the best way to test is just to turn off images and make sure everything shows up the way you think it should.