LogoLogo
Getting StartedDevelopersDeployment GuideGet Help
  • Quick Links
  • Welcome to Form.io
    • Getting Started With Form.io
    • Launch a Form
    • Overview of Form.io
  • Developer Tool Ecosystem
    • PDF Solution
    • Enterprise Form Builder
    • Form View Pro
    • The Security Module
    • Accessibility Compliance Module
    • Developer License
    • SQL Connector - Deprecated
    • Integration Libraries
    • Form.io CLI Tool
  • User Guide
    • Introduction
    • Form.io Developer Portal
    • Teams
    • Projects
      • Project UI
      • Project Settings
      • Stages
      • Multi-Tenancy
    • Resources
      • ResourceJS
    • Forms
      • Form Creation
      • Form Types
      • PDF Forms
      • Embedding a Form
      • Form Revisions
      • Form Settings
    • Form Building
      • Form Builder UI
      • Form Components
        • Component Settings
        • Basic Components
          • Resource as Select Component Data Source
        • Advanced Components
        • Layout Components
        • Data Components
        • Premium Components
          • Nested Forms
        • Custom Components
      • Logic & Conditions
      • Existing Resource Fields
      • Actions
    • Submissions
      • Accessing Submissions
      • Importing Submissions
    • Form.io eSignature - Coming Soon
    • Form.io Reporting Module
    • PDF Template Designer
    • Form View Pro
    • Form Manager
    • Enterprise Form Builder Module
      • Installation
      • User Guide
  • Developer Guide
    • Introduction
      • Application Development
      • API Documentation
    • Form Development
      • Form Renderer
      • Form Builder
      • Form Embedding
      • Form Evaluations
      • Form Templates
      • Custom Components
      • Translations
    • JavaScript Development
      • JavaScript SDK
      • JavaScript Frameworks
      • JavaScript Utilities
    • Authentication and Authorization
      • SAML
      • OAuth
      • LDAP
      • Resource Based Authentication
      • Email Authentication
      • Two-Factor Authentication
    • Roles and Permissions
      • Field Match-Based Access
      • Field-Based Resource Access
      • Group Permissions
    • Integrations
      • Email Integrations
      • File Storage
      • Google Developer Console
      • eSign Integrations
      • Relational Databases
    • Modules
    • Fetch Plugin API
    • CSS Frameworks
    • Offline Mode
    • Audit Logging
  • Deployments
    • Self-Hosted Deployment
      • Local Deployment
        • Local File Storage
      • Kubernetes
      • Cloud Deployment
        • AWS Deployment
          • AWS Lambda
          • Form.io/AWS Elastic Beanstalk End-To-End Encrypted Deployment
        • Azure Deployment
          • Azure App Service
            • Azure MSSQL Connector - Deprecated
          • Azure Virtual Machine
          • Azure Kubernetes Service
          • Set up the DB
        • GCP Deployment
          • GCP Cloud Run
      • On-Premise Deployment
      • Enterprise Server
      • PDF Server
    • Deployment Configurations
      • DNS Configuration
      • Load Balancer Configuration
    • Licenses
      • License Management
      • Library Licenses
    • Portal Base Project
      • Portal SSO
      • Portal Translations
    • Maintenance and Migration
      • Changes to Premium Libraries
  • FAQ
    • FAQ
    • Tutorials & Workflows
      • Password Reset
      • Dynamic Select Filtering
      • Approval Workflow
      • SSO Email Token
      • Embedding A Video
      • Data Source Validation
      • Select Data Source Options
      • Nested Form Workflows
        • Nested Wizard Forms
      • Save as Draft
      • Role-Based Conditions
      • Custom Component
      • Dynamic Radio and Select Box Values
      • Override CKEDITOR
    • Errors
    • Examples
    • License Utilization Checks
  • Contact Us
Powered by GitBook
On this page
  • Overview
  • Accessibility Standards and Form.io
  • Building accessible forms
  • Features of the Accessibility Module
  • Enabling the Accessibility Module
  • Rendering accessible forms
  • Templates and accessibility
  • Embedding Accessible Forms

Was this helpful?

  1. Developer Tool Ecosystem

Accessibility Compliance Module

PreviousThe Security ModuleNextDeveloper License

Last updated 1 month ago

Was this helpful?

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 is compliant. Further, an accessible form does not necessarily mean that the 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.

Accessibility Standards and Form.io

There are many standards used to evaluate the accessibility of an application. One of the most common standards is the , 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 being WCAG 2.1 compliant it means that component, when used according to best practices, will not interfere with a web application's WCAG 2.1 rating.

Additionally, the United States General Service Administration developed the (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 that renders forms using markup and classes that are compatible with USWDS standards.

Building accessible forms

The first step toward implementing forms in an accessible application is building the form.

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 or the 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

Date & Time

Field Set

Checkbox

Day

Panel

Select Box

Time

Table

Select

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:

Basic
Advanced
Layout
Data
Premium

Tags

Tabs

Data Map

CAPTCHA

Address

Data Grid

Nested Form

Survey

Edit Grid

Sketchpad

DataTable

Tagpad

Signature

Custom

Wizards and Accessibility

Features of the Accessibility Module

The Form.io Accessibility Module alters the functionality of Forms, as well as the Form.io Platform, in several ways. The Accessibility Module:

  • Provides overrides for the formio.js renderer.

  • Limits components in the Developer Portal Form Builder to avoid components with limited accessibility.

  • Includes Form Builder markup overrides in order 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.

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

The Accessibility Module is a separately licensed module. Contact sales@form.io for more information.

Additionally, the module must be imported and registered, as seen in the following snippet:

import vpat from '@formio/vpat';
import { Formio } from '@formio/js';

Formio.use(vpat);

Rendering accessible forms

Once the Form Builder defines the form with accessible features, it is up to the Form Renderer to present the form within the application in an accessible way.

The role of the form renderer includes the following accessibility-related functions:

  • 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

Templates and accessibility

The role of the template includes the following accessibility-related functions:

  • 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)

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>

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

Templates control how Form.io renders each component into a visual and functional element in the form user's browser. The default template uses Bootstrap to control the look and functionality of each component. Form.io also provides a to render components in an accessible way.

Web Content Accessibility Guidelines
US Web Design System
template
Form Builder
Enterprise Form Builder Module
Form Settings
USWDS template