Online Forms

We often need to collect data from our users. The forms we use should provide clear instructions for how they should be complete. Users should be able to fill out our forms successfully without being worried about making a mistake. If you are manually creating an HTML form, you likey have immediate control over these items. If you are using a form building program, such as the one built into Omni CMS or those available from Microsoft Forms and Survey Monkey, there are still a few things you can do to improve the accessibility of your form.

Instructions and Error Detection

Your form should contain instructions that describe what data is expected on the form. This instructional text can help users understand what the form is asking and how they can complete the process successfully. If a user does make a mistake on the form, an error message should appear soon after the mistake is made. If interacting with form elements would change the page, such as by showing or hiding certain fields, instructional text should be present on the page describing these changes.

The error message should describe what the error is and how a user can correct it. As an example, you may be asking for a TTU ID number on a form. An error message stating "The entered data is incorrect." isn't very helpful. For clarity, you could change this error message to "Please provide your TTU ID Number. This should be the letter R followed by 8 numbers." That second message gives much more information on the mistake a user could have made and how it can be corrected.

Form Inputs

As with the general instructions on your form, the labels of form inputs should describe their expected values. A name field should have a label somewhat similar to "My Name", as something cute like "You can call me....." could confuse users. Form fields should be set to have an appropriate input type to help users know what to expect. Applying the appropriate autocomplete attribute can further tell users what data is expected, while also helping your form work with password managers or other tools that can fill out a form with a user's data. An online form should never ask for the same information twice. As an example, if you need to collect addresses for shipping and billing purposes, allow users to select that these addresses are they same so they don't have to redo work they've already completed. Form inputs should have a 3:1 color contrast ratio with their backgrounds and with other similar elements on the page.

The instructional text on your form should describe how required fields are indicated on the form. Your also need to make sure you are using more than just color to denote a required field. Required fields should be marked as such programmatically in the input itself, and the input label also needs some indicator to describe the field as required.

Form Completion

Once a user has completed a form, they should be able to verify, confirm, or cancel their submission. This is especially true if the form could lead to legal or financial obligations. If a user is logged out while completing the form, they should be able to resume their work after logging back in. A form should tell users if some period of inactivity will result in a loss of data.