Accessible forms

Overview

Online forms are an important way to engage with users and make it easy to collect information, whether it’s for feedback, permitting or parking tickets.

ProudCity and accessible forms

ProudCity Forms gives users a flexible way to set up and manage mobile-friendly, accessible, WCAG 2.1 AA compliant forms. ProudCity Forms is powered by Gravity Forms.

Tips

The default settings address many form accessibility issues, however, there are some best practices you should familiarize yourself with. Gravity Forms has a great primer and list of tips for creating accessible forms.

General field settings

• Field label: Always fill out the Field label, explain clearly to the user what needs to be filled out.
  • Example label: Contractor name
  • Example description: Please fill out the contractor name if it’s different from the Applicant name.
• Input mask: Do not use an input mask. Leave that box unchecked.
• Multi-file upload: Do not enable Multi-file upload with the File upload field. Using single file upload is ok.

Appearance field settings

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

Advanced field settings

• Rich text editor: Do not enable the Rich text editor.
• Autocomplete: Enable autocomplete for name, address, and email fields. The default settings for these fields have the autocomplete values already filled out.

Resources

• Accessibility Guide for Content Providers (Gravity Forms)
• How to Create an Accessible Form (with Gravity Forms)
• Form fields to avoid
• Five Top Tips for Creating an Accessible Form
• Gravity Forms Accessibility Documentation
• ProudCity Forms 101