Developing Accessible Web Applcations Colors Sample

Demo

Table with colors and text

Item Information
Status	Number	Title
open	001	This is the first entry
closed	002	This is the second entry
pending	003	This is the third entry
closed	004	This is the fourth entry

Table with colors and IMG

Item Information
Status	Number	Title
	001	This is the first entry
	002	This is the second entry
	003	This is the third entry
	004	This is the fourth entry

Discussion

Whenever colors are used to convey information, there must be a textual equivalent provided, so that the information is available to AT users. Remember that many AT users, such as screenreader users, do not have access to visual-only information.

In the demos above, we've added a "status" column to the TABLE which textually conveys the color information. In the first, we've put the text directly in the cell. In the second, we've put an image in the cell, with the text set as an ALT attribute on the image.

An excellent way to quickly see if you have color-only information is to turn off CSS.

Sample Code

HTML

Table with colors and text
<table>
<caption>Item Information</caption>
<thead>
  <tr><th>Status</th><th>Number</th><th>Title</th></thead>
</thead>
<tbody>
  <tr class="open"><td>open</td><td>001</td><td>This is the first entry</td></tr>
  <tr class="closed"><td>closed</td><td>002</td><td>This is the second entry</td></tr>
  <tr class="pending"><td>pending</td><td>003</td><td>This is the third entry</td></tr>
  <tr class="closed"><td>closed</td><td>004</td><td>This is the fourth entry</td></tr>
</tbody>
</table>

Table with colors and IMG
<table>
<caption>Item Information</caption>
<thead>
  <tr><th>Status</th><th>Number</th><th>Title</th></thead>
</thead>
<tbody>
  <tr class="open"><td><img height="16" width="16" alt="open" src="Shared/open.gif" /></td>
    <td>001</td><td>This is the first entry</td></tr>
  <tr class="closed"><td><img height="16" width="16" alt="closed" src="Shared/closed.gif" /></td>
    <td>002</td><td>This is the second entry</td></tr>
  <tr class="pending"><td><img height="16" width="16" alt="pending" src="Shared/pending.gif" /></td>
    <td>003</td><td>This is the third entry</td></tr>
  <tr class="closed"><td><img height="16" width="16" alt="closed" src="Shared/closed.gif" /></td>
    <td>004</td><td>This is the fourth entry</td></tr>
</tbody>
</table>