# Using the Accessibility Compliance Module

{% hint style="info" %}
The Accessibility Module uses a [Library License](/admin/licensing/library-licenses.md). Contact `sales@form.io` for information about acquiring a Library License.
{% endhint %}

## **Enabling the Accessibility Module**

The Accessibility Module must be imported and registered at the application level before it can be used, as seen in the following snippet:

```javascript
import { Formio } from '@formio/js';
import vpat from '@formio/vpat';
Formio.license = ‘--- YOUR LIBRARY LICENSE –--’;

Formio.use(vpat);
```

## **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](/userguide/forms/form-building.md) or the [Enterprise Form Builder Module ](/userguide/enterprise-form-builder-module.md)the following components met WCAG 2.1 accessibility standard during testing, and may be used to create fully accessible forms: 

<table data-full-width="false"><thead><tr><th>Basic</th><th>Advanced</th><th>Layout</th><th>Data</th><th>Premium</th></tr></thead><tbody><tr><td>Text Field</td><td>Email</td><td>HTML</td><td>Hidden</td><td>Data Source</td></tr><tr><td>Text Area</td><td>URL</td><td>Content</td><td>Container</td><td>File</td></tr><tr><td>Number</td><td>Phone Number</td><td>Columns</td><td></td><td>Review Page</td></tr><tr><td>Password</td><td></td><td>Field Set</td><td></td><td></td></tr><tr><td>Checkbox</td><td>Day</td><td>Panel</td><td></td><td></td></tr><tr><td>Select Box</td><td>Time</td><td>Table</td><td></td><td></td></tr><tr><td>Select (Must use HTML5)</td><td>Currency</td><td>Well</td><td></td><td></td></tr><tr><td>Radio</td><td></td><td></td><td></td><td></td></tr><tr><td>Button</td><td></td><td></td><td></td><td></td></tr></tbody></table>

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:

<table data-full-width="false"><thead><tr><th>Basic</th><th>Advanced</th><th>Layout</th><th>Data</th><th>Premium</th></tr></thead><tbody><tr><td>Select using Choices.js </td><td>Tags</td><td>Tabs</td><td>Data Map</td><td>CAPTCHA</td></tr><tr><td></td><td>Address</td><td></td><td>Data Grid</td><td>Nested Form</td></tr><tr><td></td><td>Date &#x26; Time</td><td></td><td>Edit Grid</td><td>Sketchpad</td></tr><tr><td></td><td>Survey</td><td></td><td>DataTable</td><td>Tagpad</td></tr><tr><td></td><td>Signature</td><td></td><td></td><td>Custom</td></tr></tbody></table>

### Wizards and Accessibility

Displaying a form as a Wizard, it is an accessibility best practice to ensure the [Form Settings](/userguide/forms/form-settings.md) 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:

```javascript
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 tooltip&#x73;*.*
* Accessible Date/Time component.
* Ability to use accessible “Modal Edit” windows for components when being filled in by end users.

In order to use USWDS templates within FormView Pro or Form Manager, the Enterprise Server in the deployment must have the [environment variable](/deploy/enterprise-server.md#environment-variables) `VPAT=true` .

## **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
<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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.form.io/developer-tool-ecosystem/accessibility/using-the-accessibility-compliance-module.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.