Accessibility: Creating an Accessible Wix Form

3 min read

Forms allow site visitors to submit information, join a mailing list, and more. When creating a form, it's important to keep accessibility in mind to ensure that everyone can view and use it.

Follow the steps in this article to build a form that visitors can navigate and interact with, and get the most out of your site.

Step 1 | Display field titles

Display field titles to allow visitors to identify each form field. Displaying titles provides clarity, and indicates to visitors the field they are currently in.

To display field titles:

Select the form in your editor.
Click Edit Form.
Select a form field.
Click Settings.
Hover over the field title and click the More actions icon .
Click Show field title.

The forms center. A field has been selected, and the cursor is clicking 'Show field title'.

Step 2 | Define your field titles

After you've enabled field titles, make sure you clearly define them. The title should be specific to ensure visitors know what exactly is required (last name, phone number, etc.).

To define the field titles:

Select the form in your editor.
Click Edit Form.
Select a form field.
Click Settings.
Enter the text under Field title.
Click Save.

The forms center. A field has been selected, and the cursor is clicking the title field.

Step 3 | Customize the form's design

Adjusting the form's fields and buttons by state (Regular, Hover, and Error) can create a logical visual experience. We recommend customizing the design for the Hover state, for example - so visitors know which part of the form they're interacting with.

Good to know:

The Hover state is how the form field / button looks when a visitor hovers over it. The Regular state is how it's displayed before a visitor interacts with it.

To customize the form's design:

Select the form in your editor.
Click Settings.
Select Design.
Choose which part of the form you want to customize:
- Fields:
  1. Select Form Fields.
  2. Select Hover from the drop-down menu.
  3. Change the field design:
    - Fill color & opacity: Set the color of the field background and drag the slider to change the opacity.
    - Border color & opacity: Set the color and opacity of the field border.
- Buttons:
  1. Select Buttons.
  2. Select the button you want to customize (Submit, Back, Upload, etc.).
  3. Click the Hover tab.
  4. Change the button's design:
    - Text color: Set the color of the button text in the hover state.
    - Color & opacity: Set the color of the button background and drag the slider to change the opacity.
    - Border color & opacity: Set the color and opacity of the button's border.

The form field design panel is open. The hover state has been selected, and the cursor is clicking the color box.

Tips:

You should also customize the form fields in the Error state to ensure improved accessibility.
Learn more about colors and contrast in site accessibility

Step 4 | Enable visual indicators on your site

Visual indicators can help those with different vision / mobility needs navigate your site. When you enable them, visitors using the Tab key can see a blue box around the section or element they are on. Learn more about visual indicators

Visual indicators are automatically enabled on sites built in the Studio Editor.

To enable visual indicators:

Select Settings on the top bar of the Wix Editor.
Select Accessibility Wizard.
Select the More actions icon on the top right of the Wizard.
Select Advanced accessibility settings.
Select Visual indicators.
Enable the Allow keyboard users to navigate through your site toggle.

The visual indicators toggle has been enabled in the advanced settings of the Accessibility Wizard.

Next step:

Go back to the Accessibility Checklist to continue improving your site's accessibility.

Did this help?

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.

Get Matched