universal-design-center

  • forms banner

Web Accessibility Criteria - Forms

Description

Forms are interactive elements used to capture user-provided information. There are many aspects that make up a form including the form fields itself (also known as controls), instructions, error identification and form submission. Forms require an extensive amount of user interaction and therefore must be designed in a way that will ensure they are accessible and usable to all users regardless of disabilities.

Form Accessibility

Label Element

To ensure accessibility, all forms should have label elements. Text labels should describe the function of each form field. The label element should explicitly associate text with a form field.

Unique For attribute and ID

When the label element is present, a specific form control called the FOR attribute, must be associated to it. A unique ID attribute must also be present that matches the same value as the FOR attribute of the label element. The FOR and the ID must be identical.

Aria-Label

In addition to proper form labels and attributes, to ensure the accessibility of a form field, Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) should be used. WAI-ARIA is a technical specification that defines methods to create accessible web content. Aria attributes and properties that are useful for making accessible forms are (but not limited to) aria-label, aria-labeledby, aria-describedby, aria-required, aria-disabled, aria-hidden, aria-live, aria-expanded, roles and landmarks.

Title Attribute

When the visual design cannot be accommodated with the label element, the title attribute should be used to identify form controls. For example, a Search field or a phone number field with separate components (area code and the number) may benefit the use of title attribute. The title attribute will not be visually displayed on the page but will be announced to assistive technology users when the field receives focus.

Use of Activate and Focus event handlers

When using “activate” and “focus” event-handlers, it is important to use them correctly to avoid sudden changes that could confuse or distract users. It may cause difficulty to complete an action as well. Actions linked to the “Onfocus” event are not controlled by the user and will be executed the moment a form field receives focus, without any acknowledgment from the user. This will be an unexpected behavior especially for assistive technology users. They may get confused while navigating through the form field elements triggered by a “focus” event-handler. To execute an action, events such as “Onclick”, “Onkeydown” or “Onkeypress” are used because they will listen to the user’s action/entry to trigger the associated function.

For the following HTML buttons, the function associated will be triggered only if the user clicks the button or presses a key.

      • <button onclick="SubmitFormData()"> Submit </button>
      • <button onkeypress= SubmitFormData()"> Submit </button>
back to top

Form Usability

User Errors

Always anticipate user errors. If a user were to improperly fill out a form an error message should appear notifying the user of their error and how they should fix it. To minimize the amount of user errors it is strongly recommended to use a specific set of characters and examples to ensure that user’s input valid data. JavaScript and CSS can be used to implement required form fields and specific data entry.

Required Forms

Required sections in forms must be clearly labeled with a symbol or character to inform users that a section is required. Commonly, an asterisk (*) symbol is used to indicate a required form field. Color can be used to show a required form field, as long as it is not the only way to convey the required form field. If color is used it must be combined with a symbol or character to identify as a required form field. An instruction must also be provided to define the meaning of the symbols or characters. (e.g. required form fields are marked by asterisk "*")

Fieldset and Legends

A group of interrelated form fields should be code by fieldset and legend. The fieldset identifies the entire grouping and legend identifies the grouping's descriptive text. Using fieldset and legend ensures that the text description is read to screen reader users when the grouping is navigated to.

Form Validations

Forms must always be properly validated for correct information and valid data entry. Validating the input notifies the user with form errors and allows them to correct the forms.

Instructions

Form instructions should be provided to help users understand how to properly fill out the form.

For more information about accessible forms refer to the Best Practices for Accessible Forms page.

back to top

Why is it important?

Accessible forms make it visually and pragmatically easier for all users to understand the forms. Users can easily have associated forms and identify what information is asked of them. Additional reasons why form fields are important include:

  • Assistive technology users will be able to know what information to input in each form field.
  • Screen reader users navigate through a forms using the “Tab” key. Associated form labels are read for each form control when the user navigates to them. If the label is not properly labeled or associated with a form, the form instructions will not be read to assistive technology users.
  • When form fields are not properly associated to their labels, assistive technology users will not know which label is related to which form.
  • If form fields are not validated, users will not know about errors.
back to top


Section 508/WCAG 2.0 Summary of Requirement

Electronic forms that are designed to be completed online, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. (Section 508)

Best Practices

Visit the Best Practices for Accessible Forms  for a complete list of best practices for accessible form making, 

  • Provide form labeling controls
  • Use the <label> element, with appropriate For and ID attributes.
  • It is recommended to use WAI-ARIA elements for additional accessibility support. 
  • Always group associated forms: Use the <fieldset> and <legend> elements to group and associate related form controls.
  • Provide form instructions to help users understand how to complete the form and individual form controls.
  • Form input must always be validated
  • Users should be allowed the ability to review data entries and undo changes and confirm data entry
  • User should receive Notifications about successful task completion, any errors, and provide instructions to help them correct mistakes.
  • Divide long forms into multiple smaller forms that constitute a series of logical steps or stages, and inform users about their progress.
  • Groupings of form controls, typically groups of related checkboxes and radio buttons, sometimes require a higher level description (such as "Shipping Method" for a group of shipping option radio buttons).
  • Use "activate" rather than "focus" as a trigger for changes of context
  • When forms have symbols, such as an asterisk, to indicate a required form field, the symbol must be defined.
  • Users must be notified that a form has a field-specific requirement such as a required date format (mm-dd-yy)

Examples

Form Field with Label and FOR and ID Attribute 

The form fields below demonstrates the proper method to use the label element with FOR and ID. The first text field is the First Name" field. The FOR and ID attribute for this field is "firstname". The second text field is the last name field. The FOR and ID attributes are the same ("lastname") but are different from the first input field.

 Source Code:

<label for= "firstname" > First Name: </label>

<input type= "text" id="firstname" >

 Source Code:

<label for= "lastname" > Last Name: </label>

<input type= "text" id="lastname" >
back to top

Title attribute 

The form below demonstrates how the title attribute can be used in the place of a Label element. 

Phone number: 

 

 Source Code:

<fieldset>
<legend> Phone number </legend> <input id= "areaCode” name="areaCode”
title="Area Code" type="text” size="3” value=""> <input id="exchange” name="exchange” 
title= "first three digits" type="text” size="3” value="">
<input id="lastDigits”
name="lastDigits” title= "last four digits" type=”text” size=”4” value="" >
</fieldset>
back to top

Activate and focus event handlers 

In the following examples the  "email" form field will change background as soon as it gains keyboard focus. This will result in almost disappearing of the placeholder example without giving a chance to the user to read the example or instruction.

<input type ="text" onfocus="highlight()" placeholder=" " />

Note: If an “Onfocus” event handler is used on an input form field/button, the function will be executed once the user navigates to the form field, without requiring further action/acknowledgement from the user.

back to top

Required form fields

The form below demonstrates a required form filed. When a user does not fill out the form field and selects the submit button, a pop up will a appear indicating the form field is required. To ensure all users are aware that the form field is required an asterisk (*) is used. Below the form field there is also a statement that explains the intent of the asterisk.  

 * Indicates required form field 

 Source Code: :

<form action= "/action_page.php" > Username*: <input type="text" name= "username" required  aria-required="true" >
<input type="submit">
</form>
back to top

Field set and legends

A field set or legend will display information that pertains to the form and what it includes.

Personal information:
 

 

 Source Code:

<fieldset>
<legend> Personal Information </legend>
<label for="name"> Name:</label>
<input id="name" type= "text">
<label for= "email" >Email:</label>
<input id="email" type= "text" >
</fieldset>
back to top

How to Test

Manual Review

Testing for form accessibility requires a variety assessment including form field validation, navigation, user interaction and submission in order to meet form accessibility standards. For a list of all items that must be considered, refer to the Best Practices for Accessible Forms page.

Automated Testing Tools

Web Accessibility Toolbar

  1. Open the Web Developer toolbar on your browser (Chrome, Firefox)
  2. Navigate to the “Forms” column
  3. Select “Display Form Details”

Web Accessibility Toolbar Forms Tab

WebAIM WAVE Toolbar

  1. Activate the WAVE toolbar and navigate to the “Details” panel. In that panel
  2. Navigate to the “Features” section
  3. Review all form fields that are present in the webpage.

The following accessibility errors or alerts related to forms are found by WAVE:

    • Missing form label icon Missing form label 
    • Empty form label icon Empty form label
    • Multiple form labels icon Multiple form labels
    • Broken ARIA reference icon Broken ARIA reference 
    • Broken ARIA reference icon Broken ARIA reference 
    • Missing legend (alert) icon Missing legend (alert) 
    • Orphaned form label (alert) icon Orphaned form label (alert) 
    • Form element has title (alert) icon Form element has title (alert) 

Compliance Sheriff

To test forms in Compliance Sheriff, select Section N checkpoint group in the CSU ATI Accessibility Requirements.

back to top

Resources