Skip to content

Accessibility guidelines

Introduction

Accessibility is a key part of web forms. They should be easy to use for everyone. In the sections below, we will provide some guidelines on how to make your forms more accessible.

Forms is built with accessibility in mind, but it is important to use the features correctly to ensure that the forms are up to standard.

WCAG criteria level

Lime Forms fulfills the requirements for WCAG 2.2 level AA

General guidelines

Use of language

Labels, instructions and custom error messages should clearly describe the purpose of the form field. Use simple and clear language. For longer texts, make use of the "Helptext" feature, that is available for most of the field types.

Required fields

If your form contains any required fields, the form should include a description of the symbol used to mark required fields. E.g. "Fields marked with * are required" or "* = The field is required".

Reference: https://www.digg.se/webbriktlinjer/alla-webbriktlinjer/skapa-tydliga-faltetiketter-ledtexter#h-Vadkraverlagen

Visual design

  • Use a clear visual design with good contrast between text and background.
  • Use a clear and consistent layout. Split big forms into multiple steps.
  • Use section break fields to separate different parts of the form. E.g. personal information, order information etc.
  • Limit the use of placeholders, by default these have very low contrast. Use more descriptive labels instead.

Themes in Forms

We've put a lot of effort into making sure that the default theme meets the accessibility standard. Use of the themes Paper, Lumen or using custom CSS should always be tested for accessibility, e.g. by checking the contrast meets the required levels.

Field types

The type of field used should be appropriate for the data being collected. For example, use a date field for dates, a number field for numbers etc. The different fields are designed to be accessible, but it is important to use them correctly.

General guidelines for fields

Use correct type of autocomplete attribute for fields. E.g. "email" for email fields, "tel" for phone number fields etc. Read more about the available autocomplete attributes here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values

Image field

  • Always provide an alternative text for images. This is important for screen readers.

How to test accessibility

Automated testing

There are several tools that can be used to test accessibility. Here are some automated tools that can be used:

Manual testing

Tools will not catch all accessibility issues, so manual testing is also important. Here are some things to test manually:

  • Keyboard navigation - make sure all fields can be accessed using the keyboard

    • Use the tab key to navigate through the form
    • Interactive elements might use different keys, e.g. space is used check a checkbox
    • All focusable elements should be reachable by keyboard

  • Screen reader testing - test the form with a screen reader.

    • NVDA for Windows
    • VoiceOver for Mac
    • JAWS for Windows

When doing the screen reader test, make sure that the screen reader conveys enough information. Essentially, you should understand the form without seeing it.

Visual testing

  • Color contrast - check that the text has good contrast with the background
  • This will be checked automatically by the automated tools, but it's good to check manually as well
  • Error handling - test that error messages are displayed correctly
  • Check that error messages are displayed when submitting the form with invalid data
  • Check that error messages are displayed in a clear and understandable way
  • Form validation - test that the form validation works correctly
  • Check that the form cannot be submitted with invalid data
  • Check that error messages are displayed when submitting the form with invalid data
  • If you're using custom CSS, make sure that it doesn't interfere with the accessibility of the form

For a complete list of things to test, see this checklist: https://www.a11yproject.com/checklist/