UX Design and Development course

Form Labels and Inputs

When creating a form, there is a common misconception as how to best use the lable and input combination.

First off, the WRONG way to do things is to wrap the input inside a label:

<label>Please enter your name:
  <input type='text' id="fullName" placeholder='Full name' name='Name' required>
</label>

When creating markup like this, the proper way to address this is to use the for attribute.

The ID of a label form-related element in the same document as the label element. The first such element in the document with an ID matching the value of the for attribute is the labeled control for this label element.

The preferred way to address this is the following:

<label for="fullName">Please enter your name:</label>
<input type='text' id="fullName" placeholder='Full name' name='Name' required>

Creating Accessible Forms

source

Text inputs

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

Matching for and id values associate the label with the appropriate form control. Because id must be unique on each page, only one label can be associated to each unique form element. This means you cannot have one label for multiple form elements. Additionally, screen readers do not support multiple labels that are associated to the same form element.

Another benefit of using labels is that the user can click on the label itself to set focus to the form element. This is useful to some with motor disabilities, particularly when selecting small checkboxes and radio buttons. You can try this by clicking on the word "Name:" above to see focus set to the text box. Clicking adjacent labels provides an easy way to check for proper form labeling.

Textareas

<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 grouping of radio buttons. The <legend> provides a description for the grouping. In screen readers, the legend text is generally read for each control in the fieldset, so the legend text should be brief and descriptive.

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>

Fieldset and legend should only be used to associate groups of controls when a higher level description (i.e., the legend) is necessary. Single checkboxes or basic radio buttons (such as male/female for gender) that make sense from their labels alone do not require fieldset and legend. Nested fieldsets should generally be avoided.

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>

To improve the accessibility of this list even further, we could add optgroup, to group the 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>

Note that optgroup is not fully supported by some user agents and screen readers, so it should not be relied on to present vital category information. In cases where optgroup is not supported, it is simply ignored. Do not confuse the label attribute of the optgroup element with the label element. They are very different things.

Multiple select menus allow the user to choose more than one option from the list.

It is recommended that multiple select menus be avoided. Not all browsers provide intuitive keyboard navigation for multiple select menus. Many users do not know to use CTRL/Command or Shift + click to select multiple items. Typically, a set of check box options can provide similar, yet more accessible functionality.

Buttons

For form buttons (submit and reset input elements and button elements), no additional accessibility information is required. The value attribute for input buttons and the 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>

Because reset buttons can be inadvertently selected, there are few cases when they should be provided.

Image buttons

If you use an image button (<input type="image"> rather than a standard button, the input must have appropriate alt text.

<input type="image" name="submitbutton" alt="search" src="submit.png">