universal-design-center

  • laptop with codes on screen

Best Practices for Accessible Forms

Web Forms are considered the most interactive elements in a web environment. Users navigate, select, expand, insert data and do all possible types of interaction with the Web Forms. As a result, it is very imperative to ensure the accessibility of forms. Following are a list of things to consider when building a form and later when testing a form for accessibility. 

A.T. = Assistive Technology 

Form Validation

back to top

Verify whether the form has proper input data validation for form fields that require specific data-type entry, e.g. numeric values only (for zip code). 

Input Mask

back to top

Verify whether a proper and accessible input mask is provided for any form fields that require specific data format such as phone number or social security number. 

Instructions

back to top

Verify whether a proper and accessible instruction is provided for form fields that require user instruction for valid data entry. For example, "include street and apartment number". 

Default Value

back to top

Verify whether the form field has default value or not. If a default value/option is available, verify whether it is provided to all users and other options can be selected instead of the default value.

Required Fields

back to top

Verify whether all required form fields are properly marked as "required" and a proper description is provided to the user.

Error Handling

back to top

Verify whether the error handling system is functional and consistent. Proper error messages that would direct users with clear instruction and/or links to the errors, should be provided for all missing form fields or invalid data entries. Error messages should be also accessible for assertive technology users.  

Keyboard Access

back to top

Verify whether all form content and fields are accessible via keyboard.

Visual Focus

back to top

Verify whether all form fields and interactive elements within the form receive proper visual focus associated with keyboard navigation.

Tab Order

back to top

Verify whether all form fields and interactive elements follow a correct tab order based on the normal sequence of content. This should be applicable when CSS is disabled as well.

Headings

back to top

Verify whether the form fields, sections, instructions and sub-pages have correct heading structure.  

Labels

back to top

Verify whether all form fields have proper and meaningful labels associated. The "ID" and "FOR" attributes must match for each pair of field and label. 

Reading Order

back to top

Verify whether the form content follows a correct/standard reading order. It is especially important for assistive technology users. 

CSS

back to top

Verify whether all functionalities and content of the form remain the same when CSS is disabled.

Navigation

back to top

If the form is extended to multiple pages, verify if there is a proper mechanism to navigate through different pages of the form. Number of pages and a proper title for each page of the form should be provided to the user. 

Review and Submission

back to top

Verify whether the form has a "review page" before submission. For sensitive and important information the user should be allowed to review and verify the data prior to final submission. Also, the review page/section should provide proper information and functionality to confirm or revise the data inserted, by properly navigating user to the willing to change. 

Page Title

back to top

Verify if the form page and/or form sections have meaningful titles that would describe the purpose and content of each form or section.

Page Reload with Data Input

back to top

Verify whether the sensitive data inserted in the form fields are not restored and shown when the form is reloaded or user navigates to the previous sections.

Assistive Technology Navigation

back to top

Verify whether the form is accessible with Assistive Technology. All the content of the form including, form fields, labels, headlights, legends, field-sets, error messages, paragraphs, buttons, instructions, tool-tips, input masks, default values, entry types, pop-up messages, confirmation boxes, navigation paths (for multi-page forms), review section and all other content are announced and provided to the assistive technology users accordingly. 

Assistive Technology keyboard shortcuts

back to top

Verify whether the form page is fully navigable using the standard keys including assistive technology navigation keys. If not, verify whether any instruction is provided for assistive technology users to navigate the form properly. 

Timed Response

back to top

If no activity is detected for certain period of time while the form is open, verify whether a Timed Response mechanism exists for properly informing user about the time restriction and allowing to extend time (if possible). It should also save user entries by protecting form input data (if user account is associated with the form).