Form Controls

Summary

Use label tags for all fields, fieldset and legend tags, and onfocus styling to ensure all users of your product can submit website forms. 


Impact

Impact

Label Tag

Input fields must have label tags to allow adaptive technologies to read the information correctly and allow the user to make informed decisions.

Fieldsets and Legend Tags

When assistive technology users browse through a form, they move from one form element to another form element, skipping any text that isn’t an associated label. Fieldsets and legend tags are used for radio button and checkbox groups to associate the heading that describes the radio button or checkbox group.

No Visible Label

In some cases such as a search field there isn't a visible label for adaptive technologies to read. A label must be designated for screen readers.

Onfocus Styling

When a user tabs through a web page using a keyboard, they move from active area to active area. An active area can be a hyperlink, form element, button, or any object the user has tabbed to. When a user lands on a link or object, that object has focus or is “onfocus”.

Dos and Don'ts

Dos and Don'ts

Expand all

Use Label Tags

In most cases, a text label is wrapped in a label tag. There are two ways to associate the label tag with the form element. Either method can be used, but the second method is more verbose and also more clear.

Do

The first method is to wrap the label tag around both the text label and the form element.

Do

The second method is to associate the label tag and the input field by using the same value in the “for” attribute in the label and the “id” attribute on the field element.

Use Fieldsets and Legend Tags

Coding radio buttons or checkboxes for accessibility can be a challenge.

Do

The most effective way to do this is to use fieldset and legend tags.

The appearance of fieldsets and legends can vary from browser to browser and may not match the styling of the rest of the form, but you can modify the appearance of both the fieldsets and legends using CSS.

Designate a Label for All Fields

In many designs there isn’t a visible label. Placeholder text may be displayed in a search field, as in this example from the MyU interface:

Search Bar

 

 

Having just visual placeholder text is not a enough; you also must designate a label that can be read by adaptive technologies. There are two options to accomplish this.

Do

The first is to have a label on the page, but make it only available to screen readers via CSS, like this:

The second option is to use the aria-label attribute:

It is up to you the developer what your preference is, unless you are otherwise constrained by the technology or library you’re using to construct your project.

Use Onfocus Styling

Users should be able to tell what area of a web page is onfocus via some sort of visual indicator, often an outline box (see below).

While many browsers automatically add an onfocus visual indicator, that functionality may be inconsistent and may not work for every page. Therefore you should use CSS ensure onfocus styling is included in your pages.

There isn’t a clear convention of how an onfocus link or object should look like; accessibility guidelines merely dictate that the visual style should be distinct (“highly visible”) from the rest of the text. 

Do

This CSS code example results in a light blue outline around the onfocus object:

Do

Another common form of onfocus styling for hyperlinks is to underline them (if they are not underlined already as part of the defined site styles) and add a light gray background.

If you have added any hover effects either through CSS or Javascript, make sure the effect also displays when the item has focus.

If you’re wondering what colors to use for your visual styling, check your college or unit’s graphic designer or the U of M brand guidelines for appropriate contrasting palette colors.

How-to