A More Accessible Venn Diagram

September 4, 2007

There will always be a point in a project where a designer/developer will have to ask himself/herself, "how should I markup this content so that it has the most meaning and is the most accessible?" Or at least I hope designers and developers are asking such questions.

In my transition from the "Dark Ages" of the table-based layout to the future-forward thinking of web standards and CSS based layouts, I've learned how to ask myself this question frequently. It was a long road of rethinking problems and getting rid of the bad habit of doing presentational markup.

While my markup may not always be perfect, there are different ways to do so in a more accessible manner. Every developer may have a good argument to why their markup is cleaner and better. But the point is that we, as designers/developers, are asking questions about and critically analyzing our HTML structure. We need to keep ourselves accountable for thinking ahead, being more accessible and helping standards develop.

The other day, I came across a problem, brought up by another designer at work, that we were unable to find guidance with on the web. There's so much out there, yet we couldn't find a single article pertaining to the correct way to markup and present a Venn diagram. We had to ask ourselves the basic question and then consider if trying to figure this out was in the budget. Was providing people with an accessible Venn diagram worth it? We could simply put the provided diagram on the web as an image, but then how would a blind person see the relationships or even read what the diagram says? How could search engine spiders crawl it efficiently?

After determining that this was a problem worth solving, we asked ourselves "How do you show the relationships on a Venn diagram?" An unordered list? While that's possible it doesn't really show "relationships," which is the whole purpose of the diagram. How do we show the overlapping areas and the shared areas between the different items?

Before I begin with our method to solve this problem, I'd like to address a common practice for providing accessibility to images. This practice includes the use of the longdesc attribute. This attribute can simply be applied to the img element and it points to the page (or site) where more information about the image can be found. The longdesc is used when the description of the image is too long to put in the alt tag. While this is a very good practice for accessibility and further explanations of a chart or graph, I feel that it could possibly be handled a littler slicker. So, how can we make the explanation part of the illustration of the relationships?

We came to the conclusion that we needed to mark this up as a table.

Now that you're done scoffing and wondering why on Earth we would resort to using the evil tables. What are tables used for semantically? Well, tabular data! Just because we're doing standards-based layouts with CSS doesn't mean we should NEVER use tables. It just means we shouldn't use tables for our layout. But if a particular part of the document requires providing tabular data or illustrating relationships in a table, then the best element for the job is the table (a properly marked up and accessible table of course).

A table here makes the most sense. Let's use a familiar example:

The Primary Color Wheel for Pigments/Subtractives

If we have a Venn diagram that looks like:

We'd want to first begin with determining the main categories. For the primary colors Cyan, Magenta, and Yellow we want to make them the main table headers. Then the secondary colors Red, Green, and Blue we should make headers along the side of the table. Their relationships should be shown by putting "included" on the rows underneath each primary color that makes up the secondary color of that row. And without excluding Black, we put it on the 4th row with "included" in each column, since it's acquired by mixing all the colors.

Here's what the markup would look like (Line wraps marked » —Ed.):

<table id="color-wheel-table" summary="This table displays the relationships »
 in the color wheel with the primary pigment (subtractive) colors. This is »
 an attempt at a more accessible Venn diagram.">
	<thead>
		<tr>
			<td></td>
			<th id="cw-cyan" scope="col"><a href="#" title=" »
			 Cyan, a primary pigment/subractive color">Cyan</a></th>
			<th id="cw-magenta" scope="col"><a href="#" title=" »
 Magenta, a primary pigment/subractive color">Magenta</a></th>
			<th id="cw-yellow" scope="col"><a href="#" title=" »
 Yellow, a primary pigment/subractive color">Yellow</a></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th id="cw-blue" scope="row"><a href="#" title=" »
 Blue, acquired when Cyan and Magenta are left because Yellow is subtracted."> »
 Blue</a></th>
			<td headers="cw-blue cw-cyan">included</td>
			<td headers="cw-blue cw-magenta" included</td>
			<td headers="cw-blue cw-yellow"></td>
		</tr>
		<tr>
			<th id="cw-red" scope="row"><a href="#" title=" »
 Red, acquired when Yellow and Magenta are left because Cyan is subtracted."> »
 Red</a></th>
			<td headers="cw-red cw-cyan"></td>
			<td headers="cw-red cw-magenta">included</td>
			<td headers="cw-red cw-yellow">included</td>
		</tr>
		<tr>
			<th id="cw-green" scope="row"><a href="#" title=" »
 Green, acquired when Cyan and Yellow are left because Magenta is subtracted."> »
 Green</a></th>
			<td headers="cw-green cw-cyan">included</td>
			<td headers="cw-green cw-magenta"></td>
			<td headers="cw-green cw-yellow">included</td>
		</tr>
		<tr>
			<th id="cw-black" scope="row"><a href="#" title=" »
 Black, acquired with all colors together.">Black</a></th>
			<td headers="cw-black cw-cyan">included</td>
			<td headers="cw-black cw-magenta">included</td>
			<td headers="cw-black cw-yellow">included</td>
		</tr>
	</tbody>
</table>
				

"Included" is used because it's a word that actually means something. There was much debate over whether a pseudo-checkmark done with the √ character was sufficient. But we came to the conclusion that the checkmark only means something visually. Thus the use of "included" in the common rows/columns has some textual meaning more appropriate in this situation.

Then to display the actual Venn diagram we use the Phark Image Replacement technique (http://www.mezzoblue.com/tests/revised-image-replacement/#phark2) to place the diagram as a background of the table, and we use a negative text-indent value to shove the text off the screen to the left. This technique, as opposed to the display: none; technique, is used because the FIR is no longer recommended for use due to its inaccessibility issues. An example of the non-recommended FIR is Doug Bowman's original version (http://www.stopdesign.com/articles/replace_text/).

The CSS for this would look like (Line wraps marked » —Ed.):

<style type="text/css">
	* { margin: 0; padding: 0; }
	
	#color-wheel-table {
		width: 436px; height: 436px;
		background: url(http://www.heyokadesign.com/uploads/ »
 color-wheel_venn-diag.gif) no-repeat 0 0;
		text-indent: -9000em;
		border-collapse: collapse;
	}
	
</style>
				

However, we'd want the user to be able to hover over each section on the color wheel to get little tooltip notes about the colors, or possibly allow them to click to visit another page. There only needs to be a few additions to make this happen (Changes made in bold, line wraps marked » —Ed.)):

<style type="text/css">
	* { margin: 0; padding: 0; }
	
	#color-wheel-table {
		position: relative;
		width: 436px; height: 436px;
		background: url(http://www.heyokadesign.com/uploads/ »
 color-wheel_venn-diag.gif) no-repeat 0 0;
		text-indent: -9000em;
		border-collapse: collapse;
	}
	
	#color-wheel-table * {
		float: left; display: inline;
		width: 1%; height: 1%;
	}

		#color-wheel-table th a { position: absolute; »
 left: 229px; top: 115px; display: block; width: 54px; »
 height: 27px; }
		/* coords and dims for cw-cyan */
		#color-wheel-table th#cw-magenta a { left: 71px; »
 top: 232px;width: 83px; }
		#color-wheel-table th#cw-yellow a { left: 267px; »
 top: 277px;width: 64px; }
			
		#color-wheel-table th#cw-blue a { left: 152px; »
 top: 163px; width: 46px; }
		#color-wheel-table th#cw-green a { left: 268px; »
 top: 198px; width: 58px; }
		#color-wheel-table th#cw-red a { left: 187px; »
 top: 280px; width: 43px; }
		#color-wheel-table th#cw-black a { left: 199px; »
 top: 215px; width: 52px; }
</style>
				

Briefly, what's happening is that we're positioning the table relative so that we can position each table header's anchor tag absolutely within the diagram. But in order to do so, we must float: left; display: inline; to get rid of the default table-cell structure of each element within the table. Then we position each anchor tag according to its location on the diagram.

A More Accessible [...]

September 4, 2007

Mark Caron

1 comment

• Digg
• del.icio.us
• StumbleUpon