Accessibility Compliance Module
Overview
Forms necessarily require a degree of end-user interaction, which highlights the need to make that interaction accessible. Applications that require compliance with various accessibility standards and guidelines must be thoughtful about the design of the forms and the way those forms are presented within the application. Simply using form components rated to be compliant with accessibility standards does not ensure that the whole form or broader application is accessible. Application developers must evaluate the finished product holistically.
Form.io offers a variety of tools and best practices through the entire platform to support developers in implementing accessible applications.
Standards, Tools, and Templates
There are many standards used to evaluate the accessibility of an application. One of the most common standards is the Web Content Accessibility Guidelines, published by the World Wide Web Consortium (W3C). The current standard is WCAG 2.1.
WCAG 2.1 evaluates web accessibility based on several principles. When a Form.io component is described as meeting WCAG 2.1 compliant it means that component, when used according to best practices, will not interfere with a web applications WCAG 2.1 rating.
Additionally, the United States General Service Administration developed the US Web Design System (USWDS), a collection of standardized UI components and visual styles, to provide developers with a number of resources to aid in delivering accessible web applications and services. Form.io offers a USWDS template that renders form using markup and classes that are compatible with USWDS standards.
The following sections describe the role each component of the Form.io Platform plays in enabling developers to deliver an accessible application.
Form Builder
Each Form.io component is evaluated for for accessibility compliance based on how to component is presented within a standalone application. To create accessible forms, Form.io offers an accessibility-focused version of the form builder that includes only the components that that comply with WCAG 2.1 standards.
When building forms using the Form Manager application, the Form Builder will automatically restrict non-accessible components and settings allowing the user to create fully accessible forms.
When building forms using the Developer Portal Form Builder, 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
Currency
Well
Radio
Button
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 should not be used on forms where access by a broad audience with varying abilities is a priority:
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 sales@form.io for more information
Accessibility Features
Accessible Form Manager
Accessibility Templates (USWDS)
Accessibility templates github path: https://github.com/formio/uswds
Provides HTML markup for accessible forms.
Accessibility Module
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):
Proper HTML markup (every form field needs an associated label).
Aria-attributes such as
aria-describedby
,aria-labelledby
, etc.Additional messages for sighted users (e.g. allowed file types for File component).
Features coming from the Form.io VPAT module (#3 above):
Screen readers messages upon user action (File, Wizard components).
Focus behavior handling (File, Wizard, Panel components).
Dynamic change of aria-attributes (all Form fields).
Validation message handling (all Form fields).
Special styles for invalid fields (all Form fields).
Additional Features coming from using the combined Form.io USWDS+VPAT modules:
Accessible tooltips.
Accessible Date/Time component.
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 that includes only the components that were revised and designed in compliance with WCAG 2.1 standards
Accessible Form Manager
Repositories used:
https://github.com/formio/formmanager (also included in standard FMGR)
https://github.com/formio/angular (also included in standard FMGR)
https://github.com/formio/formio.js (also included in standard FMGR)
https://github.com/formio/uswds * (only included in Accessible FMGR) * - this repositories have accessibility features listed above
How to enable the Accessible Form Manager Application:
To enable the Accessibility Compliance Module, the following environment variable will need to be included in your Enterprise Server as part of your deployed environment.
VPAT=true
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.
Alternative Use Case: Embedding the Accessible Form Builder (commercial not OSS) directly within the customer application:
Repositories used:
An alternative way to use the Accessible form builder is to embed the Form.io Form Builder within the application using the following code.
Last updated
Was this helpful?