search
Ctrlk
Get HelpForm.io on GitHub

Using the Accessibility Compliance Module

circle-info

The Accessibility Module uses a Library License. Contact [email protected] for information about acquiring a Library License.

hashtag
Enabling the Accessibility Module

The Accessibility Module must be imported and registered at the application level before it can be used, as seen in the following snippet:

import { Formio } from '@formio/js';
import vpat from '@formio/vpat';
Formio.license = ‘--- YOUR LIBRARY LICENSE –--’;

Formio.use(vpat);

hashtag
Designing Accessible Forms

Each Form.io component is evaluated for accessibility compliance based on how the component is presented within a standalone application.

When building forms using the Developer Portal Form Builder or the Enterprise Form Builder Module the following components met WCAG 2.1 accessibility standard during testing, and may be used to create fully accessible forms:

Basic
Advanced
Layout
Data
Premium

Text Field

Email

HTML

Hidden

Data Source

Text Area

URL

Content

Container

File

Number

Phone Number

Columns

Review Page

Password

Field Set

Checkbox

Day

Panel

Select Box

Time

Table

Select (Must use HTML5)

Currency

Well

Radio

Button

Using these components to create an accessible form may require configuring the component settings and parameters in a specific way. Ensure all labels, descriptions, and other relevant fields are completed as required.

hashtag
Avoiding incompatible components

A selection of components may present elements or functionality that do not comply with accessibility standards. The following components are not included in the Accessibility Compliance Module, and using them may create accessibility limitations in a form or application:

Basic
Advanced
Layout
Data
Premium

Select using Choices.js

Tags

Tabs

Data Map

CAPTCHA

Address

Data Grid

Nested Form

Date & Time

Edit Grid

Sketchpad

Survey

DataTable

Tagpad

Signature

Custom

hashtag
Wizards and Accessibility

Displaying a form as a Wizard, it is an accessibility best practice to ensure the Form Settings set the Wizard Header to Classic. Using a Vertical header/step indicator may require significant customization to meet accessibility standards.

hashtag
Using Accessible Templates

When using the USWDS template, it must be imported and registered to be used within the application, similar to the following:

The USWDS template does not require the Accessibility Module. Likewise, the Accessibility Module does not necessitate using the USWDS template for all forms. Some features, however, require the use of both the Accessibility Module and the USWDS template. Such features include:

  • Accessible tooltips.

  • Accessible Date/Time component.

  • Ability to use accessible “Modal Edit” windows for components when being filled in by end users.

In order to use USWDS templates within FormView Pro or Form Manager, the Enterprise Server in the deployment must have the environment variable VPAT=true .

hashtag
Embedding Accessible Forms

Accessible forms are used just like any other form, with the additional steps of importing the necessary module and any required templates.

To embed the “https://examples.form.io/example” directly to a website the following code would be used:

PreviousAbout Accessibility and WebformsNextDeveloper License

Last updated

Was this helpful?