Forms are one of the most common places where accessibility problems occur.

What to keep in mind while creating forms

Screen readers and keyboard-only users will have issues if you do not take steps to ensure your forms are accessible. An accessible form is one that contains labeled form fields and buttons. Those labels also appear on-screen so that information is available to all users. All form fields and buttons must have explicit labels for the visual user plus in the code.

Benefits of clarity and ease of use

Identify elements of a form for clarity. This includes instructions, cues, required form fields, and field formatting requirements to users. The order of elements should be logical and accessible. Be mindful that using tables to control layout can be problematic with forms. Everyone benefits from a well-organized, usable form, especially those with cognitive impairments. 

Form-building tools with built-in accessibility 

Use a form-building tool that creates accessible markup. This is easier than hand-coding. The USCF Drupal Starter Kit includes Drupal’s powerful Webform module. The Webform built-in contact form is accessible.

Tab order is essential for screen reader

Screen reader users generally navigate through a form using the Tab key to jump to the next element. The form label reads out loud for each form control when the user navigates to them. Any non-label text content between the form controls is usually skipped over.

Use the <label> tag

Using the <label> tag provides the explicit labels required for form fields. The <label> tag associates with the described form field if the label tag includes a “for” attribute. The "for" attribute must exactly matches the “id” attribute in the form field.

Assistive technologies communicate the expected form field information to the user. Note: make sure the <label> tag appears in the code before the <input> tag, as in the example code below.

Use placeholder attributes

Verify your placeholder attributes are not used in place of label tags.

While it’s acceptable to use them, they do not convey the required information to assistive technologies. They not an acceptable replacement for the <label> tag. More information about placeholder attributes and fieldset interoperability at the WHATWG blog article "The state of fieldset interoperability".

Advanced techniques: legend and fieldset tags

Complex forms need extra work to ensure they are clearly organized. The use of <fieldset> and <legend> tags improve the legibility and usability of forms by creating boundary lines around related fields and providing a visible title for the group.

Here is an example of how you would use <fieldset> and <legend> in your form:

<fieldset> <legend>Step One: Personal Information</legend> <label for=”name”>Name: </label> <input id=”email” type="text" size="20"> <label for=”email”>Email: </label> <input id=”email” type="text" size="20"> </fieldset>

There are several ways to label a form field. For example, you may use the aria-label or title attribute, but the best way is to create an on-screen label. This is an example of what the HTML looks like for a text box requesting a name:

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

Collecting Personal Data

A reminder of when collecting personal data using surveys and forms, refer to the UCSF Website Privacy Policy that governs data collection. Two survey platforms available at UCSF are Qualtrics and REDCap with links available from the UCSF MyAccess page.

Resources

Creating Accessible Forms from WebAIM

Guidelines for accessible surveys and forms from UCOP

From the W3C Web Accessibility Initiative:

• Custom Controls. Use stylized form elements and other progressive enhancement techniques to provide custom controls.
• Form Instructions. Provide users instructions about the form and about the individual form controls as they complete the form.
• Grouping Controls. Use the <fieldset> and <legend> elements to group and associate related form controls.
• Labeling Controls. Use the <label> element, and, in specific cases, other mechanisms (e.g. WAI-ARIA, title attribute etc.), to identify each form control.
• Multi-Page Forms. Divide long forms into many smaller forms. Create a series of logical steps or stages. Inform users about their progress.
• User Notifications. Notify users about successful task completions, warnings and errors. Provide instructions to help them correct their mistakes.
• Validating Input. Validate input provided by the user. Provide options to undo changes and confirm data entry.