Check a form's accessibility

The WCAG accessibility standards developed by the World Wide Web Consortium (W3C) are designed to make web content accessible to everyone, including people with disabilities.

Following these standards when building a form can significantly improve your users' experience, ensure compliance with legal standards,and align with your company's ethical values. By prioritizing accessibility, you demonstrate your commitment to inclusivity and set a strong foundation for future growth and innovation.

Forms ensures that the following accessibility standards are followed:

  • Keyboard navigation - form elements are accessible via keyboard, with logical tab order and visible focus indicators.

  • Screen reader compatibility - controls are labeled and announced correctly by screen readers. This includes descriptive aria labels for navigation buttons and error messages.

  • Form labels and instructions - fields have visible, programmatically associated labels and clear instructions.

  • Error handling - error messages are clear, specific, and linked to the relevant fields. Also, icons have been added to error messages to assist people with color blindness.

  • Input assistance - forms supports autocomplete features offered by the browser, and ensures that custom inputs are accessible via keyboard and screen readers. For example, when the user of the form enter text in fields like name, email, and address, the browser provides relevant suggestions based on previously entered data.

    Note

    To benefit from the autocomplete option for free text, you must set up field type and field subtype for the relevant fields.

  • ARIA attributes - forms uses appropriate ARIA roles and attributes for custom elements, and includes dynamic content announcements.

  • Responsive design - accessibility is tested across various devices and screen sizes.

In addition to the standards Forms implements automatically on all forms, some accessibility criteria are depending on your form's design. To check if your form's design meets accessibility standards:

  1. In the top right corner, click Accessibility to initiate an accessibility check of the entire form. A detailed report is generated within seconds. It outlines any possible WCAG Level A accessibility issues found in the form with the following color codes:

    • A green mark indicates that your form meets the accessibility standards.

    • A yellow mark indicate that a feature does not meet accessibility standards, and a notification text includes a description of the issue.

  2. For the yellow marked notifications, click the target icon to be redirected to the exact field item that needs your attention:

    • Alt text missing from image - add descriptive alt text readable by screen readers to all image elements to convey the content and purpose of the images.

    • Label missing from field - ensure each input field has a corresponding label element to describe its purpose, so that the label (for example, Phone, Email, and so on) can be announced by screen readers.

    • Low contrast of element's text - increase the contrast between text and background colors to meet the minimum contrast ratio of 4.5:1 for normal text and 3:1 for text bigger than 18pt, or 14pt for bold font.

    • Link missing descriptive text - ensure link text clearly describes the destination or purpose of the link (for example, avoid using click here or read more).

  3. Fix the accessibility issue before running the accessibility check, and repeat the instructions until you pass all the criteria for compliance to WCAG accessibility standards.

Note

You must perform the accessibility check for Desktop view and Mobile view independently.

Do you have some feedback for us?

If you have suggestions for improving this article,