Generally Good Form
Forms are widely used to accept user input, be it for transferring it to the server or to act upon it locally using some JavaScript. HTML provides for accessibility, so cleanly laid out and marked-up form controls are already fully accessible all by themselves. Still, screen readers may sometimes announce specific elements a bit irritatingly.
The following example contains all basic HTML form controls:
- Single-line text input:
<input type="text">(withmaxlength,readonly, anddisabledvariants). - Multi-line text input:
<textarea>. - File upload:
<input type="file">. - Radio buttons:
<input type="radio">. - Multiple checkboxes:
<input type="checkbox">. - Single select (combobox):
<select>. - Multi-select (list):
<select multiple>. - Single select with grouping:
<select>with<optgroup>. - Multi-select with grouping:
<select multiple>with<optgroup>. - Single checkbox:
<input type="checkbox">. - Submit button:
<button type="submit">(with adisabledvariant).
Each form control has a corresponding <label> element that is connected to it using the for attribute (pointing to the control’s ID). This allows screen readers to announce the controls correctly.
Each group of radio buttons and checkboxes has a surrounding <fieldset>/<legend> structure: in addition to the control’s <label>, screen readers also announce the <legend> of the surrounding <fieldset>. The usage of this structure is not limited to radio buttons and checkboxes: all kinds of related form controls can be grouped like this.
As the controls are surrounded with a <form> tag, the form can be submitted without hitting the submit button: simply press the Enter key while you are focusing on a control (except multi-line text input and file upload).
In the example, all attributes are irrelevant for demonstration purposes (for example name) are omitted.
Working Example
Explanation
Navigate the example using tap or Tab and notice how the screen reader announces all relevant information about the current form control.
Code
<form>
<div class="control">
<label for="name">Full name </label><input id="name" maxlength="20" type="text" />
</div>
<div class="control">
<label for="biography">Biography </label><textarea id="biography"></textarea>
</div>
<div class="control">
<label for="planet">Planet </label><input id="planet" readonly="" type="text" value="Earth" />
</div>
<div class="control">
<label for="coupon">Coupon </label><input disabled="" id="coupon" type="text" value="Not available" />
</div>
<div class="control">
<label for="image">Image </label><input id="image" type="file" />
</div>
<fieldset>
<legend>Gender</legend>
<div class="control">
<input id="gender_male" name="gender" type="radio" /><label for="gender_male">Male</label>
</div>
<div class="control">
<input id="gender_female" name="gender" type="radio" /><label for="gender_female">Female</label>
</div>
</fieldset>
<fieldset>
<legend>Hobbies</legend>
<div class="control">
<input id="hobbies_hiking" type="checkbox" /><label for="hobbies_hiking">Hiking</label>
</div>
<div class="control">
<input id="hobbies_dancing" type="checkbox" /><label for="hobbies_dancing">Dancing</label>
</div>
<div class="control">
<input id="hobbies_gardening" type="checkbox" /><label for="hobbies_gardening">Gardening</label>
</div>
</fieldset>
<div class="control">
<label for="age_group">Age Group</label><select id="age_group">
<option>
0 to 9 Years
</option>
<option>
10 to 19 Years
</option>
<option>
20 to 29 Years
</option>
<option>
30 to 39 Years
</option>
<option>
40 to 49 Years
</option>
<option>
50 to 59 Years
</option>
<option>
60 to 69 Years
</option>
<option>
70 to 79 Years
</option>
<option>
80 to 89 Years
</option>
<option>
90 to 99 Years
</option>
</select>
</div>
<div class="control">
<label for="idol">Idol</label><select id="idol" size="2">
<option>
Michael Jackson
</option>
<option>
Jesus
</option>
<option>
Mahatma Gandhi
</option>
<option>
John Doe
</option>
</select>
</div>
<div class="control">
<label for="interests">Interests</label><select id="interests" multiple="">
<option>
Readings
</option>
<option>
Cinemas
</option>
<option>
Theaters
</option>
<option>
Operas
</option>
<option>
Concerts
</option>
</select>
</div>
<div class="control">
<label for="favourite_car">Favourite Car</label><select id="favourite_car"><optgroup label="Swedish Cars">
<option>
Volvo
</option>
<option>
Saab
</option>
</optgroup><optgroup label="German Cars">
<option>
Mercedes
</option>
<option>
Audi
</option>
</optgroup></select>
</div>
<div class="control">
<label for="my_bike">Favourite Dish</label><select id="my_bike" size="2"><optgroup label="Vegetarian">
<option>
Green Salad
</option>
<option>
French Fries
</option>
</optgroup><optgroup label="Carnivorous">
<option>
Big Mac
</option>
<option>
Roast Beef
</option>
</optgroup></select>
</div>
<div class="control">
<label for="public_transports">Public transports</label><select id="public_transports" multiple=""><optgroup label="Ground">
<option>
Train
</option>
<option>
Bus
</option>
</optgroup><optgroup label="Water">
<option>
Ship
</option>
<option>
Submarine
</option>
</optgroup><optgroup label="Air">
<option>
Plane
</option>
<option>
Cable Car
</option>
</optgroup></select>
</div>
<div class="control">
<input id="accept_agbs" type="checkbox" /><label for="accept_agbs">I accept the terms and conditions</label>
</div>
<div class="control">
<button type="submit">Register</button>
</div>
<div class="control">
<button disabled="">Cancel</button>
</div>
</form>.control, fieldset {
margin: 6px 0;
}
label {
display: inline-block;
width: 120px;
vertical-align: top;
}
input + label {
width: auto;
}NIL