Using the Accessibility Compliance Module
Enabling the Accessibility Module
To enable the Accessibility Compliance Module, the following environment variable must be configured in the Enterprise Server as part of the deployed environment:
VPAT=true
Additionally, the module must be imported and registered at the application level, as seen in the following snippet:
import vpat from '@formio/vpat';
import { Formio } from '@formio/js';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:
Text Field
HTML
Hidden
Data Source
Text Area
URL
Content
Container
File
Number
Phone Number
Columns
Review Page
Password
Date & Time
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.
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:
Select using Choices.js
Tags
Tabs
Data Map
CAPTCHA
Address
Data Grid
Nested Form
Survey
Edit Grid
Sketchpad
DataTable
Tagpad
Signature
Custom
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.
Using Accessible Templates
When using the USWDS template, it must be imported and registered to be used within the application, similar to the following:
import uswds from '@formio/uswds';
import { Formio } from '@formio/js';
Formio.use(uswds);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.
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:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/css/uswds.min.css">
<link rel="stylesheet" href="https://cdn.form.io/js/formio.form.min.css">
<link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/js/uswds.min.js"></script>
<script src="https://cdn.form.io/js/formio.form.min.js"></script>
<script src="https://cdn.form.io/uswds/uswds.min.js"></script>
<script src="dist/vpat.js"></script>
</head>
<body>
<div id="formio"></div>
<script type="text/javascript">
Formio.use(vpat);
Formio.use(uswds);
Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
</script>
</body>
</html>Last updated
Was this helpful?