Accessibility

Each Form.io component is tested for accessibility compliance on standalone applications. To create accessibility compliant forms, we offer a form builder which includes only the components which were revised and designed in appliance with WCAG 2.1 standards.

Accessibility package includes:

  1. Accessible Form Manager

  2. Accessibility Templates (USWDS)

  3. Accessibility Module (VPAT - (rename in the future))

    • Accessibility module github path: https://github.com/formio/vpat

      • Provides overrides for formio.js renderer and builder.

      • Cuts down options within the Form.io Portal Form Builder to avoid components for which accessibility is not supported.

      • Includes Builder markup overrides to make the builder accessible (keyboard accessibility, accessible drag-n-drop functionality, additional screen reader announcements upon user actions).

      • Handles dynamic changes on the form and during building a form.

When customers utilize BOTH USWDS + VPAT for embedded forms within their applications, they receive the following features:

Features coming from the Form.io USWDS templates (#2 above):

  1. Proper HTML markup (every form field needs an associated label).

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

  3. Additional messages for sighted users (e.g. allowed file types for File component).

Features coming from the Form.io VPAT module (#3 above):

  1. Screen readers messages upon user action (File, Wizard components).

  2. Focus behavior handling (File, Wizard, Panel components).

  3. Dynamic change of aria-attributes (all form fields).

  4. Validation messages handling (all form fields).

  5. Special styles for invalid fields (all form fields).

Additional Features coming from using the combined Form.io USWDS+VPAT modules:

  1. Accessible tooltips.

  2. Accessible Date/Time component.

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

Accessible Form Manager

Repositories used:

  1. https://github.com/formio/formmanager (also included in standard FMGR)

  2. https://github.com/formio/angular (also included in standard FMGR)

  3. https://github.com/formio/formio.js (also included in standard FMGR)

  4. https://github.com/formio/uswds * (only included in Accessible FMGR)

  5. https://github.com/formio/vpat * (only included in Accessible FMGR) * - this repositories have accessibility features listed above

How to enable the Accessible Form Manager Application:

To enable access to our Form Manager Application with the Accessibility module, please contact [email protected] and we will be happy to help get you started!

  1. Within the Form.io Portal (i.e. portal.form.io) go to project settings.

  2. Open Public Configuration.

  3. Add new configuration key: “vpat” value: “true”.

  4. Save project settings.

To open form manager click on the “Form Manager” button on the portal or go to https://yourproject.yoursite.com/manager.

How to Embed Accessible Forms that were built within the Accessible Form Manager Application into customer applications (with accessible templates and VPAT functionality included in the applications):

Repositories used:

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

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.12.0/css/uswds.min.css">
<link rel="stylesheet" href="dist/uswds.css">
<script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
<script src="dist/uswds.js"></script>
<script src="dist/vpat.js"></script>
</head>
<body>
<div id="formio"></div>
<script type="text/javascript">
Formio.use(uswds);
Formio.use(vpat);
Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
</script>
</body>
</html>

Alternative Use Case: Embedding the Accessible Form Builder (commercial not OSS) directly within the customer application:

Repositories used:

Alternative way to use Accessible form builder is to embed the Form.io Form Builder within the application using the following code.

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.12.0/css/uswds.min.css">
<link rel="stylesheet" href="dist/uswds.css">
<script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
<script src="dist/uswds.js"></script>
<script src="dist/vpat.js"></script>
</head>
<body>
<div id="builder"></div>
<script type="text/javascript">
Formio.use(uswds);
Formio.use(vpat);
Formio.builder(document.getElementById('builder'));
</script>
</body>
</html>