Accessibility Compliance Module

Overview

The Accessibility Compliance Module is a separately licensable add-on to the Form.io Platform that supports developers in building forms that meet accessibility guidelines.

To get started using the Accessibility Compliance Module, go to the guide Using the Accessibility Compliance Module.

For background information on the role of Form.io in application accessibility, refer to the section About Accessibility and Webforms

What the Accessibility Compliance Module Delivers

The Accessibility Compliance Module allows developers to deliver a fundamentally different experience to end users of a form.

Some of those changes include:

• Forms exclusively use components that can be compatible with accessibility technology such as:

  • Screen readers.

  • Alternative input devices.

  • Alternative system displays.

• Modified visuals, such as high-contrast modes.

• Improved screen reader interaction:

  • Better descriptions of form components and fields

  • Announcements of field validation errors

• Accessible interaction with form components:

  • Keyboard (or alternative input device) navigation of wizard pages.

  • Keyboard (or alternative input device) selection within datepicker components.

• Improved focus order within forms, wizards, and form components.

• Modified display of form state:

  • Unified list of errors on form page.

  • Screen reader description of active/available wizard pages.

While these features can be delivered through the use of the Accessibility Compliance Module, they are not automatic. Developers must intentionally design forms and the host application to deliver any accessibility features required.

How the Accessibility Compliance Module Modifies the Form.io Platform

The module changes the platform at both the level of form building and form rendering.

Form Builder with Accessibility Compliance Module

The module restricts the components available to Form Builders, blocking the use of components that may not meet accessibility standards.

Form Renderer with Accessibility Compliance Module

The Accessibility Compliance Module overrides the default form renderer to change:

• Screen reader announcements of Form User action.

• Focus order/Focus trap/Focus placement

• Dynamic change of aria-attributes

• Validation messages handling

• Special styles for invalid/valid fields

Templates with Accessibility Control Module

Through the accessibility-focused USWDS template, or the standard Bootstrap template, the module supports:

• Proper HTML markup (every form field needs an associated label, correct component structure etc.)

• Aria-attributes such as aria-describedby, aria-labelledby, etc.

• Additional helpful messages for sighted users

• Additional instructions for non-sighted users (e.g. number types, etc.)

• WCAG compliant color contrasts (only applicable for USWDS for now)

Where To Go Next

• Using the Accessibility Compliance Module

• About Accessibility and Webforms