Accessible Forms
By adding a little extra code to your forms, screen reading technology can
help users fill out the forms correctly, and not have to guess what field they
are in.
The <label> tag is used to make forms more accessible to screen reading
technology. By
providing a label for each control (radio button, text box, etc...) the screen
reading technology will be able to provide the user with the information
necessary to correctly fill out the form.
The tab index attribute, tabindex="#", is useful for setting the order in which the form
fields are accessed using the tab key. It can be used in input tags
<input> as well as in hyperlink tags <a>.
Some people apply alt tags to their input tags, and this does improve
accessibility, but it may prevent data from getting through mail scripts or into
SQL databases. Always test your forms.
General rules to follow when creating forms:
- Place form labels adjacent to (next to) their corresponding form controls.
- Provide markup for labels, using the <label> tag.
- Group related form elements using the <fieldset> tag.
- Provide a title or "legend" for each field set using the <legend> tag.
- Group radio buttons in a <fieldset> tag, and provide a <label> for each
checkbox.
- Group checkboxes in a fieldset tag, and provide a <label> for each
checkbox.
- Always provide a button to submit forms.
Two visually similar forms have been created.
Here is
the code from the second page, showing the label, id, for, tabindex, fieldset,
and legend tags which makes the form accessible
in bold, red text.
<form action="MAILTO:mediafacilitator@hotmail.com" method="post" enctype="text/plain">
<p>
<label for="fname">First Name:
</label>
<input type="text" name="First" size="20"
id="fname" tabindex="1">
<label for="lname">Last Name:
</label>
<input type="text" name="Last" size="20"
id="lname" tabindex="2"></p>
<fieldset>
<legend>Meeting Location</legend>
<p>Where would you like to meet?
<input type="radio" name="Location" value="Meet in Katrina's Office"
id="ko" tabindex="3">
<label for="ko">Katrina's Office </label>
<input type="radio" name="Location" value="Meet in ELIC"
id="elic" tabindex="4">
<label for="elic">ELIC </label>
<input type="radio" name="Location" value="Meet in requestor's office"
id="office" tabindex="5">
<label for="office">Your Office</label></p>
</fieldset>
<fieldset>
<legend>Issues</legend>
<p>What Issues will we be discussing?
<input type="checkbox" name="web" value="Web Accessibility"
id="access" tabindex="6">
<label for="access">Web Accessibility
</label>
<input type="checkbox" name="distance" value="Distance Learning"
id="dist" tabindex="7">
<label for="dist">Distance Learning</label></p>
</fieldset>
<p>
<label for="how">How do you prefer to be contacted:
</label>
<select name="format" id="how"
tabindex="8">
<option value="Not Selected">Select Method</option>
<option value="Phone">Phone</option>
<option value="Voice-mail">Voice Mail</option>
<option value="E-mail">E-mail</option>
<option value="Campus-mail">Campus Mail</option>
<option value="TTY">TTY</option>
<option value="Other">Other, describe in comments section</option>
</select></p>
<p>
<label for="comment">Comments:</label></p>
<p>
<textarea rows="3" name="S1" cols="72"
id="label" tabindex="9"></textarea></p>
<p>
<input type="submit" value="Submit" name="B1">
<input type="reset" value="Reset" name="B2"></p>
</form>
Warning! "The following links will take you to sites outside the
Cuesta College web server. Cuesta College has no control over the content or
availability of these sites."
Awesome Page on Designing
Accessible Forms with Tables
Return to Top
|
