Accessible Forms Using the ID Attribute
Wednesday, September 22, 2004
Hi Hillary, I am looking for the code for a simple FORM element. I get conflicting results when I try to validate my form through LIFT and Bobby. LIFT shows it 508 compliant and Bobby shows it is not 508 compliant. Is there an example you could show me? This is the page in question: http://www.bdarling.com/survey.html
Thank You
Sharon Baldwin
sharon@bdarling.com
**********************
ANSWER
**********************
Hi Sharon,
Thanks for writing. Here's a simple tip to help your form become compliant.
An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value.
So for Question 1 the code would change from this:
<FIELDSET>
<LEGEND>1. How would you best describe yourself?</LEGEND><br>
<LABEL for="WhoAreYou">Resident:</LABEL>
<input type="radio" name="WhoAreYou" value="Resident" id="WhoAreYou">
<LABEL for="WhoAreYou">Businessperson:</LABEL>
<input type="radio" name="WhoAreYou" value="Businessperson" id="WhoAreYou">
<LABEL for="WhoAreYou">Visitor:</LABEL>
<input type="radio" name="WhoAreYou" value="Visitor" id="WhoAreYou">
<LABEL for="WhoAreYou">Employee:</LABEL>
<input type="radio" name="WhoAreYou" value="Employee" id="WhoAreYou">
<LABEL for="WhoAreYou">Other:</LABEL>
<input type="radio" name="WhoAreYou" value="Other" id="WhoAreYou">
</FIELDSET>
to this:
<FIELDSET>
<LEGEND>1. How would you best describe yourself?</LEGEND><br>
<LABEL for="Resident">Resident:</LABEL>
<input type="radio" name="WhoAreYou" value="Resident" id="Resident">
<LABEL for="Businessperson">Businessperson:</LABEL>
<input type="radio" name="WhoAreYou" value="Businessperson" id="Businessperson">
<LABEL for="Visitor">Visitor:</LABEL>
<input type="radio" name="WhoAreYou" value="Visitor" id="Visitor">
<LABEL for="Employee">Employee:</LABEL>
<input type="radio" name="WhoAreYou" value="Employee" id="Employee">
<LABEL for="Other">Other:</LABEL>
<input type="radio" name="WhoAreYou" value="Other" id="Other">
</FIELDSET>
Also, you don't need to add a LABEL attribute for the SUBMIT or RESET buttons, because screen readers read the text that's on the button.
Hope this helps!