IntroductionLimitationsYour WordPress ThemeGeneral SettingsForm SettingsForm Fields To AvoidField SettingsGeneralAppearanceAdvancedAdding a form to a page
Introduction
What steps do I need to take to create an accessible form with Gravity Forms?
This questions can seem daunting when you are starting work on your project. The good news is that Gravity Forms is built to comply with WCAG 2.1 AA, the global standard for web accessibility. This article takes you through a number of the settings and form fields to help educate you as to what to use (and what to avoid) to move your particular form towards the best possible outcome for all users.
This is a checklist, written as a short and easy to use way check your forms. If you want to know about the 「why」, please read the accessibility documentation in the Knowledge Base.
Limitations
This checklist is an aid to help you get your form as accessible as possible, but it is not a guarantee.
There are a number of external factors that can affect accessibility, and some areas of accessibility research differ in their views of exactly what is needed, but this article will help you lock down some of the most common settings and options that can affect accessibility. If you have strict compliance requirements, we recommend you bolster the knowledge provided in our documentation with the expertise of an accessibility consultant or advisor. That』s what we did!
Additionally, note that form elements from plug-ins are not included in this checklist, such as those added by the Gravity Forms payment add-ons.This checklist was written for Gravity Forms 2.5, and we will look to periodically update it when there are accessibility improvements or changes in the forms.
Your WordPress Theme
First a word about the WordPress theme you are using. The color contrast between the text and the background is important. Your visitors must be able to read the content in a form.
Gravity Forms ships with it』s own stylesheet (CSS). The color contrast is optimised for a white background color, but your theme may have a darker background color that makes text unreadable when you use the Gravity Forms stylesheet. Check the color contrast ratio between the text and it』s background. It is recommended that ratio be 4.5:1 or higher.
Don』t disable the whole stylesheet only for the color contrast. Remember that the CSS also controls the look and feel of the form elements and the way error messages are displayed, which can also affect accessibility.
Depending on your theme, it may be possible to adjust or overrule some of the CSS using the customizer, or in the CSS of your theme. If needed, discuss options with your site developer or contact the theme provider for advice.
General Settings
Go to the Gravity Forms settings page under Dashboard > Settings and set:
Output Default CSS: 「On」.Output HTML5: 「On」.
Form Settings
For a newly created form, go to the Form Settings tab and check the following settings that are important for accessibility:
Label Placement: 「Top aligned」Sub-Label Placement: 「Above Inputs」.Validation Summary: 「On」.Required Field Indicator: Ensure the option to show a required field indicator is selected.Form button: Choose 「Text」. Use descriptive text.Form button Conditional Logic: Do not enable conditional logicEnable legacy markup: 「Off」.
Form Fields To Avoid
The following field types can create accessibility issues, and are not recommended for use in an accessible form.
MultiselectHTML blocks with text that contains essential informationSection breaks with text that contains essential informationreCAPTCHA V2 (an accessible alternative is the honeypot option, as can be found in the form settings).
Field Settings
The form fields settings can be found in the right hand sidebar when you create or edit a form. If a setting is not mentioned here, it has no known accessibility issues.
General
Field Label: always fill out the Field label, explain clearly to the user what needs to be filled out.Input mask: do not use an input mask. Leave that box unchecked.
Appearance
Field Label Visibility: always use a visible label, never hide it.Sub-Label Placement: above input.Custom Validation message: if possible, write meaningful to-the-point custom error messages. Enhanced User Interface: do not enable the enhanced User Interface for dropdowns.Multi-File Upload: do not enable Multi-File Upload with the File Upload field. Using single file upload is ok.
Advanced
Rich text Editor: Do not enable the Rich text editor.Autocomplete: Enable autocomplete for name, address and email fields. The default fields for these fields have the autocomplete values already filled out.
Adding a form to a page
Add the block for a form to the page and select the block settings:
Form settings: enable the Form Title.Advanced settings: do not set a positive tabindex. Keep the tabindex value -1. This means that no tabindex will be set.Do not add more than one of the same form to a web page. Each form on the page must be unique.