Text inputs

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.

Note

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.

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.

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.

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.

Choose your three favorite cities?

Note

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.

JavaScript jump menus

Because these types of menus are activated when the menu item changes, these menus can cause keyboard accessibility issues because you cannot scroll through the list without selecting one of the options.

Note

Some browsers (including Firefox) override these jump menus so they are not activated on keyboard change, but only after you either select an item using a mouse or press Enter if using the keyboard.

Go to a web site:

Providing a submit button separate from the list of choices that activates the currently selected item will allow full keyboard accessibility