WebAIR

(if yes) Do they also use pattern or text to convey the same information? (TAB08)

Why is this important?

To ensure that the information in a table is conveyed to everyone, colour should be used only in addition to a text description. In the example of the colour-coded bus timetable, the name of each bus route should be displayed in addition to using different colours. Alternatively, different patterns or differences in font may be used to convey differences, although this would not be conveyed to a screen reader.

How to fix the problem

Whenever colour coding has been used to convey information, make sure there is another means of conveying the same same information (such as a text description, or different patterns, or differences in font etc.).

Example

//An example of colour coding that is used in conjunction with a text label
<table>
<caption>
Table 1: An overview of ticket prices
</caption>
<tr>
<th scope="col">&nbsp;</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row" style="color: gold">Gold Tier</th>
<td>£30.00</td>
<td>£30.00</td>
<td>£30.00</td>
<td>£45.00</td>
<td>£60.00</td>
<td>£60.00</td>
<td>£45.00</td>
</tr>
<tr>
<th scope="row" style="color: silver">Silver Tier</th>
<td>£20.00</td>
<td>£20.00</td>
<td>£20.00</td>
<td>£30.00</td>
<td>£40.00</td>
<td>£40.00</td>
<td>£30.00</td>
</tr>
<tr>
<th scope="row" style"color: brown">Bronze Tier</th>
<td>£10.00</td>
<td>£10.00</td>
<td>£10.00</td>
<td>£15.00</td>
<td>£20.00</td>
<td>£20.00</td>
<td>£15.00</td>
</tr>
</table>

Further Information

  1. http://www.un.org/webaccessibility/1_visual/12_notcolouralone.shtml