Implement form accessibility to boost CR

Step-by-step Playbooks
, , , , ,
1

Contributors

@andreea-macoveiciuc-content-expert

Business Benefits

Increase form completion and generate more leads for your business.

Adjust the tabbing navigation of your form by adding the tabindex function in your HTML source code.

  1. Open the website source code and scroll to the section of the first form field.
  2. Add the following code for the first form `
  3. For the second form field, change the x variable to number 2.

Talk to your website developer to add a text label to each form field in HTML source code to help users complete the form faster and add the id=x of each form in the source code.

Add a condition to the form to link the ID to the name by adding the condition for=x. If you are using a form builder in a funnel builder, add the field’s name in the field description without having to edit the HTML code.

Create a description for the date fields in your form to highlight the correct format of the date.

On the right side of the date field, add the correct date format, such as DD/MM/YYYY.

Add error validation triggers on your website to inform users on what fields have not been completed correctly.

Add a condition to highlight the field with errors in red. Add a test at the top of the form summarizing which section contains the error. Provide an explication on what are the requirements for each field

Place icon fonts in the menu section or within the form itself at the beginning of the text that represents the idea of the text.

For example, in the login forms, add an icon with an envelope before the email field. If you are using a form builder, you can select between their choice of icons to please at the start or end of the form field.

Remove drop-down menus from your form fields and enable text only completion.

Enable if possible, the autocomplete function to make the form completion process faster.

Add more functions to your field to increase completion depending on the type of information required.

Add plus and minus buttons if users need to fill in a number or add a number slider to select a price range.

Replace CAPTCHA codes with I Am Not A Robot checkbox.

Generate a code for the checkbox in JavaScript. Open the source code of the form or HTML file and add the JavaScript code at the end of the form.

Last edited by @hesh_fekry 2023-11-14T15:45:30Z