Accessibility Compliance Module

Overview
Form Builder:
Restricts non-accessible components and options in order for a user who is building a form to create fully accessible forms.
Each Form.io component is tested for accessibility compliance using standalone applications. To create accessible forms, we offer a form builder which includes only the components which were revised and designed in compliance with WCAG 2.1 standards.
Form rendering module handles the following: 
Screen readers' announcements upon user action
Focus order/Focus trap/Focus placement
Dynamic change of aria-attributes
Validation messages handling
Special styles for invalid/valid fields
Form.io USWDS template module OR Form.io Bootstrap template module handles the following:
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)
Contact [email protected] for more information
Features
1.Accessible Form Manager
2.Accessibility Templates  (USWDS)
Accessibility templates github path: https://github.com/formio/uswds​
Provides HTML markup for accessible forms.
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.
Each Form.io component is tested for accessibility compliance using standalone applications. To create accessible forms, we offer a form builder which includes only the components which were revised and designed in compliance with WCAG 2.1 standards
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:
1.​https://github.com/formio/formio.js​
2.​https://github.com/formio/uswds​
3.​https://github.com/formio/vpat​
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:
1.​https://github.com/formio/formio.js​
2.​https://github.com/formio/uswds​
3.​https://github.com/formio/vpat​
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>
​
The Security Module
Developer License
Last modified 1mo ago