This guide is derived from the book Understanding Accessibility, Published by HiSoftware Publishing... The Entire book can be viewed online in accessible HTML Help format.

1. Colored Text as the only way to determine a required step
2. Required Form Fields

1. Colored Text as the only way to determine a required step
Example one demonstrates an incorrect use of color. Color is used to communicate user navigation. This example has the user perform an action based on the color of text. This could be a desirable design practice, however it could be meaningless to someone who had vision disabilities that prevented him or her from identifying the color.

Current HTML – EXAMPLE 1
In the current HTML the color is the only way to determine how to go to the correct product.

Thank you for your interest in our product. For

those with:</font>

<p><font size="2" face="Verdana">Product A Follow Instructions that are in Red</font></p>

<p><font size="2" face="Verdana">Product B Follow Instructions that are in Green</font></p>

<p><font color="#FF0000" size="2" face="Verdana">Register your Product Here</font></p>

<p><font color="#008000" size="2" face="Verdana">Register your Product Here</font></p>

Information
This HTML could be corrected by simply providing more descriptive text. Developing accessible pages does not prevent you from using color. You must simply take into account that a Web site visitor may be blind or colorblind. If this is the case then visual prompts will not allow the user to complete the process that you have designed.

Corrected HTML – EXAMPLE 1

In the corrected HTML color is no longer the only way to determine the correct action.

Thank you for your interest in our product. For

those with:</font>

<p><font size="2" face="Verdana">Product A Follow Instructions marked A that are in Red</font></p>

<p><font size="2" face="Verdana">Product B Follow Instructions Marked B that are in Green</font></p>

<p><font color="#FF0000" size="2" face="Verdana">Register your Product A Here</font></p>

<p><font color="#008000" size="2" face="Verdana">Register your Product B Here</font></p>

top

2. Required form fields
Example two demonstrates a bad use of color. This example uses colored text to communicate which fields of a form are required for successful submission.

Current HTML – EXAMPLE 2

In the current HTML color is the only way to determine which fields are required to submit the form.

<form method="POST" action="--WEBBOT--">

<p>Required fields are RED</p>

<p>User Name <input type="text" name="T1" size="20"></p>

<p>User Address <input type="text" name="T2" size="20"></p>

<p><font color="#FF0000">User E-Mail Address</font><input type="text" name="T3" size="20"></p>

<p><input type="submit" value="Submit" name="B1"></p>

</form>

Corrected HTML – EXAMPLE 2

In the corrected HTML color is not the only way to determine which fields are required to submit the form.

<form method="POST" action="--WEBBOT--">

<p>Required fields are RED and Marked with an *</p>

<p>User Name

<input type="text" name="T1" size="20"></p>

<p>User Address

<input type="text" name="T2" size="20"></p>

<p><font color="#FF0000">* User E-Mail Address</font>

<input type="text" name="T3" size="20"></p>

<p>

<input type="submit" value="Submit" name="B1">

</p>

</form>

Apply what you have learned

In the above example the completion of the form can be accomplished without any dependence on color. However the form itself is not accessible. Use labels to make the form accessible!

top
 

Printer Friendly Version...