- Impact
- 2
Forms are one of the primary means of getting information from users and a basic element of any interactive website. With web standards, accessibility and usability on the menu everywhere, it is time to check your form for standards. This article is an attempt to cover both usability and accessibility aspects of forms. With all the necessary techniques applied to a form, it will look well organised, easy to use and accessible to audience with disabilities (specifically visual in this case) and those using a screen reader.
Use LABEL and TABINDEX
In addition to being able to select/focus a form element (e.g. input box, radio button) by clicking the element itself, you can make it possible for the users to click the label (text beside the element) and select it. The new LABEL tag makes it possible. You need to put a LABEL tag around the text for the element and then assign the id to the element itself:
<label for=”city”>City </label>
<input type=”text” name=”city” id=”city” />
TABINDEX should be used where necessary to make the form elements navigable through keyboard’s TAB key as required. You can skip the optional fields by using TABINDEX when desirable. Here is an example:
Checkbox 1: <input type=”checkbox” name=”model1” id=”model” tabindex=”1” />
Checkbox 2: <input type=”checkbox” name=”model2” id=”model” tabindex =”2” />
Grouping Fields using FIELDSET and LEGEND
Using these two amazing tags you can group similar form elements improving the overall presentation of the form and eliminating the need of using tables. The fieldset tag creates the boxes, and the legend tag creates the caption. Here is an example :
<fieldset>
<legend>Address Details</legend>
<p><label for=”line1”>Address Line 1</label> <input type=”text” name=”line1” id=”line1” /></p>
<p><label for=”line2”>Address Line 2</label> <input type=”text” name=”line2” id=”line2” /></p>
</fieldset>
Use OPTGROUP tags in your SELECT boxes to group similar items
To increase accessibility of drop down lists, the OPTGROUP tag can further break the items in small groups.
<select name="country">
<optgroup label="Europe">
<option value="fra">France</option>
<option value="rus">Russia</option>
<option value="uk">UK</option>
</optgroup>
<optgroup label="North America">
<option value="can">Canada</option>
<option value="mex">Mexico</option>
<option value="usa">USA</option>
</optgroup>
</select>
Always Use an ALT text with all IMAGE BUTTONS
Whenever you use an IMAGE as a button in an input tag, always define an ALT text for it :
<input type=”image” alt=”Submit” name=”imageButton” src=”images/btton.gif” width=”100” height=”30” />
maxlength and content type constraints
When trying to constraint a particular field to a maximum number of characters, take extra care and do reasonable research on the possible maximum number. Consider all different standards in different countries. A big example is the length of postcode field. It is different in different countries. If you are designing a form, which is supposed to be used by users in more than one country or internationally, make sure you do not constrain the postcode to a number, which would frustrate the users of another country. A similar problem can occur when you constrain a postcode field to only accept numeric values, which would for example annoy a UK user where postcode contains alphabets as well.
When using drop down lists to constrain users to be able to only select from a given list, it is often a better idea to provide an “other, please specify” field.
Unnecessary splitting of Fields
Unless there is a valid reason to split a field into more, it is often better to give user the choice. It will always take longer to fill many fields than few. For example splitting the name field into first name, middle name and surname. Similarly splitting an address field into street name, street number, city and state. In different regions across the world people use different formats of addresses and names. Some terms can be even confusing for users of other countries like state, province and county. In different countries the distribution is different. So unless there is a good reason behind splitting a field, it is often a good idea to give user the choice. For example in case of a name field you can provide one field named full name and let the users enter their names as and how they want.
http://www.binarytrends.com/article_details/13/Standardise-Your-Forms-–-Accessible-/-Usable-Forms
Use LABEL and TABINDEX
In addition to being able to select/focus a form element (e.g. input box, radio button) by clicking the element itself, you can make it possible for the users to click the label (text beside the element) and select it. The new LABEL tag makes it possible. You need to put a LABEL tag around the text for the element and then assign the id to the element itself:
<label for=”city”>City </label>
<input type=”text” name=”city” id=”city” />
TABINDEX should be used where necessary to make the form elements navigable through keyboard’s TAB key as required. You can skip the optional fields by using TABINDEX when desirable. Here is an example:
Checkbox 1: <input type=”checkbox” name=”model1” id=”model” tabindex=”1” />
Checkbox 2: <input type=”checkbox” name=”model2” id=”model” tabindex =”2” />
Grouping Fields using FIELDSET and LEGEND
Using these two amazing tags you can group similar form elements improving the overall presentation of the form and eliminating the need of using tables. The fieldset tag creates the boxes, and the legend tag creates the caption. Here is an example :
<fieldset>
<legend>Address Details</legend>
<p><label for=”line1”>Address Line 1</label> <input type=”text” name=”line1” id=”line1” /></p>
<p><label for=”line2”>Address Line 2</label> <input type=”text” name=”line2” id=”line2” /></p>
</fieldset>
Use OPTGROUP tags in your SELECT boxes to group similar items
To increase accessibility of drop down lists, the OPTGROUP tag can further break the items in small groups.
<select name="country">
<optgroup label="Europe">
<option value="fra">France</option>
<option value="rus">Russia</option>
<option value="uk">UK</option>
</optgroup>
<optgroup label="North America">
<option value="can">Canada</option>
<option value="mex">Mexico</option>
<option value="usa">USA</option>
</optgroup>
</select>
Always Use an ALT text with all IMAGE BUTTONS
Whenever you use an IMAGE as a button in an input tag, always define an ALT text for it :
<input type=”image” alt=”Submit” name=”imageButton” src=”images/btton.gif” width=”100” height=”30” />
maxlength and content type constraints
When trying to constraint a particular field to a maximum number of characters, take extra care and do reasonable research on the possible maximum number. Consider all different standards in different countries. A big example is the length of postcode field. It is different in different countries. If you are designing a form, which is supposed to be used by users in more than one country or internationally, make sure you do not constrain the postcode to a number, which would frustrate the users of another country. A similar problem can occur when you constrain a postcode field to only accept numeric values, which would for example annoy a UK user where postcode contains alphabets as well.
When using drop down lists to constrain users to be able to only select from a given list, it is often a better idea to provide an “other, please specify” field.
Unnecessary splitting of Fields
Unless there is a valid reason to split a field into more, it is often better to give user the choice. It will always take longer to fill many fields than few. For example splitting the name field into first name, middle name and surname. Similarly splitting an address field into street name, street number, city and state. In different regions across the world people use different formats of addresses and names. Some terms can be even confusing for users of other countries like state, province and county. In different countries the distribution is different. So unless there is a good reason behind splitting a field, it is often a good idea to give user the choice. For example in case of a name field you can provide one field named full name and let the users enter their names as and how they want.
http://www.binarytrends.com/article_details/13/Standardise-Your-Forms-–-Accessible-/-Usable-Forms
Last edited:
