How are form elements designed to be accessible?

Everyone has had to deal with forms at some point. In the past, more on paper. Today, it's more and more digital forms, because they serve the interaction of the user with a website. Whether it's communication on the Internet or ordering an item, you can find them everywhere. Searching the Internet, for example with Google, is also affected. Filling out these forms is more difficult for people with physical or even cognitive impairments, as well as for blind and visually impaired people. In order to enable all people to participate in public life, these forms must be designed to be barrier-free. But: How do you actually create accessible form elements?

There are several techniques for this. However, before dealing with the techniques, one should know the form elements. They can be divided into different types. Among others, there are the following types

• single-line input fields

• multiline input areas

• Selection lists

• Radio buttons

• Checkboxes

• Submit/Cancel Buttons

Form field labeling

To achieve accessibility in forms, the various controls must be labeled. These labels allow assistive technologies to recognize the functions of the controls and communicate them to the user. It is important that the labels are clearly associated with the controls, otherwise screen readers will not be able to connect to the elements. As a result, users have difficulty understanding the form. They cannot identify what information needs to be entered into which fields. As a result, they are unable to fill out the form correctly and often make mistakes. However, the descriptions are not all labeled the same. The decisive factor is whether they should be visible to everyone or not. In the HTML programming language, a distinction is therefore made between the label element and the aria attributes. The label element is used for input fields, selection lists, radio buttons and checkboxes and must be placed accordingly. For input fields and selection lists, the label is placed in front of the controls. For radio buttons and checkboxes, however, they are placed after the control element. The for attribute must be added so that the labels can also be linked to the corresponding element.

The aria attribute is used in HTML for buttons. Buttons can represent submit or cancel in a form, for example. aria attributes make the descriptions of the respective elements recognizable only to assistive technologies. Therefore, they can also be used for input fields that should only be visible to the screen reader. There are many aria attributes that are used to improve web accessibility. However, these differ in their type and function. The so-called aria-label is used to label an element. Of course, it is also possible to use the same label for multiple elements. This is made possible by an aria-labelledby.

Single and multiline input fields

Input fields are one of the most frequently used elements in forms. They can be single-line or multi-line. Single-line fields are used for short queries, such as a person's name, an email address, a street address, or a city.

They are created in HTML with the input-Tag and the type attribute.

In addition, other attributes can be added that define, for example, the line length.

Multiline fields are usually used for larger text areas like text messages. These are then created with the textarea-Tag . Again, the developer can specify the number of lines and the line length. However, in order for these fields to be accessible, the label-Tag must still be added. However, it is not possible to create a link between the label and the elements if they are not uniquely assigned. They must then be linked via the for attribute and the id attribute. In the following HTML example, simple labels are implemented in such input fields.

<label for=“vorname“>Ihr Vorname: </label>

<input type“text“ name=“vorname“ id=“vorname“ />

<br />

<label for=“nachricht“>Ihre Nachricht: </label>

<textarea name=“nachricht“ id=“nachricht“> </textarea>

Here, a single-line input field for the first name with the type "text" is created first. The label "Your first name:" is made visible to everyone by the label element. This is placed in front of the input element, since it is output before the input field. The for attribute in the label-Tag and the id attribute in the input element link these areas together. It is important that both contents are identical, otherwise they cannot be linked. The name attribute serves as an identifier for this field and is required for transferring the data to a server page.

Next, a multiline input area is created with the Tag "textarea". The label "Your message:" then appears here via the label element. Here, too, the two areas with the same text content are linked via the for and id attributes.

General notes

In general, forms should be clear and unambiguous. Predictability is also very helpful. This allows users to quickly see what is required of them. A clear and sensible structure is also very important. Related content elements can be grouped together. Logically separated units can also be separated visually. This facilitates orientation. In addition, they can be set off from each other by color. It is important that the minimum contrast of 4.5:1 is maintained.

Keyboard operability

One of the most important features for the accessible design of form fields is the operability via keyboard. There are people who are unable to use a mouse due to their disability. It is therefore all the more important to design forms in such a way that they can also be navigated using the keyboard. The use of label elements and aria attributes makes forms easier to understand and operate. Another way to simplify operation via the keyboard is the use of keyboard shortcuts. Here, form elements can be stored with keyboard shortcuts. This can help to reach certain areas faster or to operate functions faster. The accesskey attribute in HTML is used for this purpose. This attribute is inserted at the element for which it is to be used. There simply the key is assigned, which is then used for the keyboard command. For example, if you assign the key "n" to a field or a button, it can be operated in Windows with the keyboard shortcut (Alt + n).

However, make sure that this keyboard shortcut is not already used for another command in the browser.

Reduction to the minimum

Likewise, it is advisable to reduce the whole thing to the essentials so as not to place an unnecessary burden on people with disabilities. Therefore, only the absolutely necessary data should be requested. The query of already existing data should be dispensed with. In addition, the visibility of form fields can be adapted to the situation. Optional input fields or fields that are linked to conditions do not have to be visible. They can be displayed when they are needed. For example, the query for the age of children makes no sense if it was previously selected that no children are present.

Help and error messages

In addition, an input help should be offered. This can be in the form of a dialog box or a tooltip. With their help, the input can be explained in more detail. Another possibility would be to link to a separate help page. This would increase the success rate enormously. Mistakes still happen. Important are then meaningful error messages. For example, if the password was entered incorrectly during login, the message "Username or password is incorrect" should not appear. It is better to filter the error. Correct here would be: "The password you entered is incorrect. Please enter the correct password". 

There are several types of errors. First, the format error. Here the password is entered in the wrong format. For example, letters are entered instead of numbers. Value errors can also occur. This can happen when an incorrect value is entered despite a valid format. An example of this would be entering the value 34 for a Tag of the date. The message would then read, for example: "The month of March has 31 days. Please enter the Tag again".

Another type of error is invalid input. Here, the developer specifies values that are invalid. Finally, there is the error type when no input was made for mandatory fields. This happens, for example, if the email address is a mandatory field and the input was forgotten. Often this also happens with the general terms and conditions. On many websites, you will not be able to proceed without agreeing to this statement.

Mandatory fields

Forms often contain mandatory fields. These must be marked as such. A frequently used symbol to indicate a mandatory field is an "*" displayed next to the form field. In this case, however, it should be pointed out right at the beginning of the form that the fields marked with an asterisk are mandatory fields. Another option is to display these mandatory fields in a different color or shading. However, these are not accessible to everyone. So that screen reader users can also recognize them, the attribute required or aria-required should also be used. This tells the screen reader that it is a required field.

Placeholder

One way to make forms even more understandable and user-friendly is to use placeholders in form fields. Placeholders are temporary texts that appear within a form field to indicate to the user what type of information should be entered. These texts disappear once the form field is clicked or focused on, and can be replaced with the actual content of the form field. Placeholders can be easily inserted into the HTML input element of a form field by using the placeholder attribute.

Save inputs

All users should have the possibility to save their entries. Problems occur time and again with longer forms. To avoid data loss here, they can be saved. For this purpose, a button can be implemented that saves the current state. This then makes it easier to fill out complex forms. This also has the advantage that missing entries can be completed at a later time. This is because repeating these entries causes some users to stop filling out the form. This can be annoying for both the operator of a website and the user.

Authentication and time limit

Authentication increases security on the Internet. However, it is also one of the barriers that keep popping up. These often occur on websites where a login is required. But in order for these to be accessible to all, forms must be designed to be barrier-free. This is because in many cases, authentication procedures are time-limited. People then have very little time to log in. Often it is only 30 or 60 seconds. For many people with disabilities, this is not enough time to log in. Therefore, it is important not to limit the input by a time.

Captchas pose another problem. They are used to identify the user as a human being and not as a computer. Here, the user is asked to identify a distorted image and enter the result in a form field. Often, however, all images must be clicked on, for example those showing a car. However, these are not always barrier-free. Blind or visually impaired people cannot recognize these images. To get around this barrier, an audio option should be offered.

In summary, the accessible design of form fields is an important step on the way to an accessible digital environment. The use of correct designations, a clear and structured layout, as well as operation via the keyboard and corresponding error messages increase the likelihood that people with disabilities will also be able to fill out the forms independently.