Forms

Designing accessible forms goes beyond screen-reader friendliness.

What Accessible Forms DO

  • Sets up for clear comprehension, especially for those with cognitive disabilities. They can better understand it and how to complete it.

  • Voice-to-Text support; those who use speech-input can use labels via voice commands to activate form controls and move focus to where they need to complete fields.

  • Considerations for people with limited dexterity benefit everyone else, too: larger clickable areas (with labels) and ease of interaction with radio buttons and checkboxes.

  • People using screen-readers can identify and understand form controls due to its association with labels, field-sets and structural elements.

Source: https://blog.prototypr.io/designing-accessible-forms-82f2ea11697f

Creating Accessible Forms

Source: WEBAIM, https://webaim.org/techniques/forms/controls

Text Inputs

<label for="name">Name:</label>
<input id="name" type="text" name="textfield">

Matching for and id values to associate the label. Id must be unique on each page, and only one label can be associated to each unique form element.

Text Area

<label for="address">Enter your address:</label><br>
<textarea id="address" name="addresstext"></textarea>

Checkboxes

<fieldset>
<legend>Select your pizza toppings:</legend>
<input id="ham" type="checkbox" name="toppings" value="ham">
<label for="ham">Ham</label><br>
<input id="pepperoni" type="checkbox" name="toppings" value="pepperoni">
<label for="pepperoni">Pepperoni</label><br>
<input id="mushrooms" type="checkbox" name="toppings" value="mushrooms">
<label for="mushrooms">Mushrooms</label><br>
<input id="olives" type="checkbox" name="toppings" value="olives">
<label for="olives">Olives</label>
</fieldset>

The <fieldset> surrounds the entire group of checkboxes and <legend> describes the grouping.

Radio Buttons

<fieldset>
<legend>Choose a shipping method:</legend>
<input id="overnight" type="radio" name="shipping" value="overnight">
<label for="overnight">Overnight</label><br>
<input id="twoday" type="radio" name="shipping" value="twoday">
<label for="twoday">Two day</label><br>
<input id="ground" type="radio" name="shipping" value="ground">
<label for="ground">Ground</label>
</fieldset>

Simple checkboxes or radio boxes such as male / female, age, do not require a fieldsetand legend.

Select Menus

<label for="favcity">Choose your favorite city?</label>
<select id="favcity" name="select">
<option value="1">Amsterdam</option>
<option value="2">Buenos Aires</option>
<option value="3">Delhi</option>
<option value="4">Hong Kong</option>
<option value="5">London</option>
<option value="6">Los Angeles</option>
<option value="7">Moscow</option>
<option value="8">Mumbai</option>
<option value="9">New York</option>
<option value="10">Sao Paulo</option>
<option value="11">Tokyo</option>
</select>

Select Menus with Grouped Options

<label for="favcity2">Choose your favorite city?</label>
<select id="favcity2" name="favcity2">
<optgroup label="Asia">
<option value="3">Delhi</option>
<option value="4">Hong Kong</option>
<option value="8">Mumbai</option>
<option value="11">Tokyo</option>
</optgroup>
<optgroup label="Europe">
<option value="1">Amsterdam</option>
<option value="5">London</option>
<option value="7">Moscow</option>
</optgroup>
<optgroup label="North America">
<option value="6">Los Angeles</option>
<option value="9">New York</option>
</optgroup>
<optgroup label="South America">
<option value="2">Buenos Aires</option>
<option value="10">Sao Paulo</option>
</optgroup>
</select>

Buttons

Form buttons do not require additional accessibility information. Value attribute for input buttons and nested text for <button> elements will be read by screen-readers when the button is accessed. These must never be left empty.

<input type="submit" name="submit" value="Submit Search">
<input type="reset" name="reset" value="Reset">
<button>Activate</button>