Accessibility means making sure everyone is able to navigate and complete your form. It is not just a best practice, but also a legal requirement for some organizations and jurisdictions.
Formstack Forms live forms are built to support accessibility. They have been successfully audited against WCAG 2.1 AA and Revised Section 508. While this is a solid foundation, how accessible a specific form is also depends on the content added and the design choices made. Here are some recommendations:
Structure and content
-
Use Sections to break long forms into pages or logical groups. Give sections and fields clear, descriptive labels. Make sure the structure makes sense when read in order.
- For images add alternative text that describes the purpose of the image. This also applies to header and footer images. For purely decorative images, use an empty alt text.
-
Use simple language. If a form field would benefit from additional explanation, consider using supporting text.
Headings
- Add a level one heading (H1) to every page of your form: Select a section, click “Edit Section Heading Content” and switch to the Code View to insert a `h1` tag. This help article explains in detail how to add a H1 to your section.
Themes and contrast
- Use the Formstack Light Theme or Formstack Dark Theme from the stock themes. These themes have been audited and are guaranteed to have sufficient contrast and text size. When creating a custom theme, you might want to base your theme on one of these.
-
If you customize colors or use custom CSS, check the contrast with a tool like the WebAIM Contrast Checker.
Signature Fields
-
When using a Signature field, allow typed signature, so users who cannot draw easily can still complete the field.
Here are two tools that can help you check your form for accessibility issues:
Known Issues
- Focus behaviour: When loading a Formstack form, the first input field is automatically focused. This enables users to start filling out the form right away, but it might be flagged as an accessibility issue. You can override this behavior by adding the query parameter shouldAutoFocus=0 to the URL of your form.
- reCAPTCHA and other plugins and integrations are controlled by their vendors and might not be fully WCAG-compliant.