- Forms should be easily navigable using the "tab" key (same idea as tabbing through links); each click of the tab key should move the user through the form in a logical order.
- It is best not to put forms in a table, as doing so may cause difficulty in navigating, depending on how the table is set up.
- Related elements (check boxes and radio buttons) should be grouped together using the
<fieldset> element and each
<fieldset> should have a
- Each form element should have a clear
<label> element with it. Screen readers use the label element to read off the text in between the tags and inform the user what type of form element is being used.
- Always make
<label for=""> and
<input id=""> attributes identical. If they are not some screen reader software may not make the connection and / or render the form in an understandable manner.
- Don't include text that is not enclosed in any form control, such as the label element. Screen readers may ignore this text completely and users will not be made aware of it.
- When indicating required form elements, use methods other than color or font styling alone (bold, italicized, etc.). The best option is using something like "First Name (required)" in the appropriate form field.
- If validation discovers an error, ensure the user is alerted to it in an apparent and accessible manner. Are error messages rendered at the top of the page so the user learns of the issues as soon as possible? Are error messages rendered outside of the form markup? Then enable the user to easily access the form field that needs to be fixed and support resubmission and revalidation of the form.
- Take the time to do user testing of the form to ensure it is actually understandable and usable.
<form method="post" action="">
<legend>Name - (required)</legend>
<label for="fname">First Name</label>
<input id="fname" type="text" name="text33" size="12" />
<label for="lname">Last Name (Required)</label>
<input id="lname" type="text" name="text34" size="12" />
<legend>Computer Type</legend> <br />
<input id="mac" type="radio" name="radiobutton3" value="radiobutton" />
<label for="mac">Mac </label><br />
<input id="pc" type="radio" name="radiobutton3" value="radiobutton" />
<label for="pc">PC</label><br />