Making your form more inclusive

This is an article about accessibility, diversity, and inclusion.

Form

The form is used to collect users’ data inside and outside the web. We use the form in HTML to get input from the user, which will later be sent to a server for processing. This element may contain text, radio buttons, checkboxes, and much more.

It’s commonly used to get clients registered into a customer system, data collection in research, and log in/registration on websites.

But how can I make it more accessible and inclusive?

Accessibility

Labels and placeholder

Using the combination of labels and placeholder throughout your form helps guide users as they interact with the document.

It is important to know what to write on the and tags while writing your HTML code. The labels are used to tell the user what information belongs in a given field and are supposed to be located outside the input field. Placeholders are located inside the input field and add a description, hint, or even an example of what type of information is supposed to be written on the field.

Colour contrast

Colour contrast is important for making sure that everyone (including people with disabilities) can read your form. This means that the background, texts, and images should have enough colour contrast so that people can perceive them as intended.

On web pages, you can use Lighthouse to check if your form is contrasted enough.

Validation

It’s important to make validations on the data the user has provided and information about the user’s mistakes and how to correct them. This makes sure that the data is clean, correct, and useful. You should always make sure that your form has all the required fields filled, that the data is valid and the type of input is correct.

Line alignment

For paragraphs, the left-aligned text is simpler to read than the centered text. This is because when you center your text, the beginning of each line shifts. This makes your users work harder to figure out where each line starts so they can keep reading. There is no consistent area for users to move their gaze to after they finish each line, without a standard indentation.

This is very helpful to people with disabilities such as ADHD and Dyslexia.

Centering text is great for titles and subtitles, but for larger texts, aligning to the left is ideal.

The major exception is when you are working with people who use the right to left scripts in their languages (such as Arabic, Aramaic, Hebrew, Persian, Japanese, etc). In this case, you should use right-aligned text.

Inclusion

Preferred name

Preferred (or chosen) name is a different first name than the one legally used by someone. Many people have a preferred name and your form should respect and include it. There are different reasons why someone can have a chosen name: it could be related to a reflection of their gender identity, adequation to a different culture or just to distinguish oneself from someone with the same or similar given name.

In your form, you can simply add a “preferred name” field after the “first name” and “last name” fields. Whenever the user sees their name on your website, research, etc., the name shown should always be their preferred name.

Race

Race is a category based on the biological, physical, and social traits of a certain group of people. It varies widely depending on where your public is from. In the United States, the most common categories are White, Black, Asian, Native American, and Latino. In Brazil, for example, the scenario is pretty different: White, Black, Asian, Mixed (Pardo), Indigenous.

For this reason, when making your form, research race in your target audience’s country. A good thing to do is to always add the “Other” category with the option for the user to complete it. Don’t forget to add an option for those who would “Rather not say”, too.

In this way, you can make your form more diverse and inclusive.

Gender

Gender identity is how someone identifies themself internally and how they express this externally.

When needed to include the option of gender identity of the user, try to be inclusive and add more than “female” and “male” to it. Binary? Only in computers! Be inclusive and put at least four options: Male, Female, Other (such as Non-Binary), and Rather not say. You can add a “(please state)” after the “other” option so users can identify their gender identity themselves, a simple text input where the user can write in their choice.