How to label USB sticks

Creating Accessible Forms
Accessible Form Controls

You are here: Home> Articles> Forms> Page 2: Accessible Form Controls

Text inputs


id = "name" type = "text" autocomplete = "name">

Matching and values ​​associate the label with its form control. Because attribute values ​​must be unique on each page, a form control can only have one associated.

Another benefit of labels is that the user can click on the label to set focus to the form control. This is useful on small screens and to some people with motor disabilities, particularly when targeting small checkboxes and radio buttons.

Clicking on labels is also an easy way to check for proper form labeling. If clicking the label sets focus to or activates the form control, then that label is programmatically associated.

Text areas


id = "address"

autocomplete = "street-address">

<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>

Checkboxes

The contains the group of checkboxes, and the labels the group. Screen readers may repeat the legend for each control in the group, so the legend text should be brief and descriptive.

<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>

Radio buttons

Field set and legend should only be used when a higher-level label is necessary. Single checkboxes or basic radio buttons that make sense from their labels alone do not require fieldset and legend.

Nested fieldsets can cause odd screen reader behavior and should be avoided.

Other input types

Other types -,, and (and various data / time alternatives),,,,,, and - must also have associated descriptive text using elements.


<label for="favcity">Which is 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">São Paulo</option>
<option value="11">Tokyo</option>
</select>

Select menus

Grouping options


<label for="favcity2">Which is 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">São Paulo</option>
</optgroup>
</select>

Long lists of options can be grouped with. However, since is sometimes ignored in the screen reader environment, don't rely on this technique to convey vital context.

Multiple-select menus


Multiple-select menus allow the user to choose more than one option.Avoid using multiple-select menus.

Not all browsers provide intuitive keyboard navigation for them. Many users do not know to use Control / Command or Shift + click to select multiple items. A group of checkboxes provides similar functionality in a more accessible way.

Buttons

Screen readers announce the nested text for elements, and the attribute for input buttons. Form buttons must never be empty. >
value = "Submit Search" >
<button>value = "Reset"</button>

Activate

Reset buttons should not be used unless specifically needed, because they are easy to click by mistake.

Image buttons

Image buttons () must have equivalent text. Otherwise, screen reader users will just hear "button", with no indication of what the button does. alt = "search"

src = "submit.png">

JavaScript Jump Menus

A jump menu is a (or a custom widget that behaves like one) that triggers page changes or navigation when a user clicks an option with the mouse. When navigating with a keyboard, merelybrowsing

the options with the arrow keys can trigger the change. This unexpected navigation can confuse and disorient keyboard and screen reader users. A jump menu should be replaced with a standard menu and button, with the button acting as the trigger. The exact behavior varies across browsers and operating systems.

Bad example

This is a typical example of the problem. In some browsers, navigation to the first option will be triggered spontaneously when the user tries to explore the options.

Good example

Triggering from a submit button supports keyboard accessibility across all browsers. Users can explore the options using the up / down arrow keys and then click the Submit button.

Important Attributes

Form fields collecting certain types of user-specific information need appropriate attributes to identify input purpose. Users can benefit when common field types (name, address, birthdate, etc.) are represented consistently across the web. The ability to programmatically determine the purpose of each field makes filling out forms easier, especially for people with cognitive disabilities. for = "name2"
> Name: id = "name2" type = "text">

autocomplete = "name"

Required fields

Required fields are commonly identified with an asterisk, but screen readers don't always announce this character. We recommend one of the two following techniques — or simply including the word "required" in the label.

It's okay to use the asterisk as a visual cue as long as it is accompanied by one of the screen-reader-friendly techniques below.

Applying the attribute to a form control will cause screen readers to announce "required" along with the label — and that's all. No validation or "enforcement" mechanism comes along with this attribute, and it has no visual impact. >

aria-required = "true"

The HTML attribute likewise causes screen readers to announce "required", and also triggers the browser to warn the user with a visual tooltip if the user leaves the field blank. Screen readers also announce the tooltip content when it appears. >

required

Invalid fields

When performing form validation, applying the attribute to a form control will cause the screen reader to announce "invalid" when that control gets the focus — and that's all. There is no visual impact. You can apply this to required fields that the user left blank or to fields that failed validation in some other way. This is helpful to users who cannot see the icons and color changes that are typically used to flag errors visually. >