Understanding and Applying
Section 508 Standards

Use Color for Design, not Context:

(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

Good web design may use color and other visual markers to help users navigate the site. For example, visited links may be a different color, font, or size to help users remember where they have been in the site.

However, color and other visual elements should not be used as the only guide. A web site that asks students to use the RED links and faculty to use the BLUE links would be a poor example of color use. To fix the problem, the designer might put all the RED links in the left column and the BLUE links in the right column of a layout table and indicate the difference between the columns in the column headers and table summary. Here is a sample table:

Links for Faculty	Links for Students
Grade Reports	Course Descriptions
Internal Procedures	Faculty Contact Information
Scheduling	Events and Workshops

And here is the code that created this table:

<table width="60%" border="2" summary="This table contains navigation links for faculty and students. The faculty links are in the left column and the student links are in the right column.">
<tr>
<th class="xtextred" scope="col">Links for Faculty</th>
<th class="xtxtblue" scope="col">Links for Students</th>
</tr>
<tr>
<td class="xtextred">Grade Reports</td>
<td class="xtxtblue">Course Descriptions</td>
</tr>
<tr>
<td class="xtextred">Internal Procedures</td>
<td class="xtxtblue">Faculty Contact Information</td>
</tr>
<tr>
<td class="xtextred">Scheduling</td>
<td class="xtxtblue">Events and Workshops</td>
</tr>
</table>

Note: there is still a problem with this table. A screen-reader will read tables from left to right then down. So, this table, read by JAWS, sounds like this:

"Links for faculty, links for students, grade reports, course descriptions, internal procedures, faculty contact information, scheduling, events and workshops."

In this arrangement, the information for faculty and students is read alternately, rather than in a group. A better way to organize this table would be:

Links for Faculty	Links for Students
Grade Reports Internal Procedures Scheduling	Course Descriptions Faculty Contact Information Events and Workshops

The code for this version of the table is:

<table width="60%" border="2" summary="This table contains navigation links for faculty and students. The faculty links are in the left column and the student links are in the right column.">
<tr>
<th class="xtextred" scope="col">Links for Faculty</th>
<th class="xtxtblue" scope="col">Links for Students</th>
</tr>
<tr>
<td class="xtextred"><ul>
<li>Grade Reports</li>
<li>Internal Procedures</li>
<li>Scheduling</li>
</ul></td>
<td class="xtxtblue"><ul>
<li>Course Descriptions</li>
<li>Faculty Contact Information</li>
<li>Events and Workshops</li>
</ul></td>
</tr>
</table>

In this version, JAWS would read all the faculty-related links before reading the student links. In addition, the links have been put into an unordered (bulleted) list, and JAWS would announce how many items are in each list before reading each item. This makes it even easier to follow the table information.

For more on organizing data tables, see the Data Table Headers section of this guide.

Tip for testing -- There are two simple ways of testing a web page to determine if this requirement is being met: by either viewing the page on a black and white monitor, or by printing it out on a black and white printer. Both methods will quickly show if the removal of color affects the usability of the page.

Automated testing -- See what your pages look like to a users with different levels of colorblindness. Process your pages through the Colorblind Web Page Filter.

Next