Everyone has had to deal with forms at some point. In the past, more on paper. Today, they are increasingly digital forms, as they are used for user interaction with a website. Be it when communicating online or ordering an item, you can find them everywhere. Internet searches, for example with Google, are also affected. Filling out these forms is difficult for people with physical or cognitive impairments as well as blind and visually impaired people. In order to enable everyone to participate in public life, these forms must be designed to be accessible. But how do you actually create accessible form elements?
There are various techniques for this. However, before looking at the techniques, you should be familiar with the form elements. These can be divided into different types. There are the following types, among others
- Single-line input fields
- multi-line input areas
- Selection lists
- Radio buttons
- Checkboxes
- Submit/cancel buttons
Labeling of form fields
In order to achieve accessibility in forms, the various control elements must be labeled. These labels enable assistive technologies to recognize the functions of the controls and pass them on to the user. It is important that the labels are clearly linked to the controls, otherwise screen readers will not be able to connect to the elements. As a result, users will have difficulty understanding the form. They cannot recognize which information needs to be entered in which fields. As a result, they cannot fill in 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 positioned accordingly. For input fields and selection lists, the label is placed before the control elements. 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, for example, represent the send or cancel function in a form. With aria attributes, the descriptions of the respective elements are only recognizable for assistive technologies. They can therefore 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 accessibility on the Internet. 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 several elements. This is made possible by an aria-labelledby.
Single and multi-line input fields
Input fields are among the most frequently used elements in forms. They can be single-line or multi-line. Single-line fields are used for short queries, e.g. for a person's name, an email address, a street or a city.
They are created in HTML with the input tag and the type attribute.
Additional attributes can also be added, e.g. to define the line length.
Multi-line fields are generally used for larger text areas such as text messages. These are then created with the textarea tag. Here too, the developer can specify the number of lines and the line length. However, to make these fields accessible, the label tag must be added. However, it is not possible to create a link between the label and the elements if these are not clearly assigned. These must then be linked to each other 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>
A single-line input field for the first name with the type "text" is first created here. The label "Your first name:" is made visible to everyone by the label element. This is placed before the input element, as it is output before the input field. These areas are linked to each other via the for attribute in the label tag and the id attribute in the input element. It is important here that both contents are identical, as 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 multi-line input area is created using the "textarea" tag. The label element then displays the caption "Your message:". Here too, the two areas with the same text content are linked to each other using the for and id attributes.
General information
In general, forms should be clear and unambiguous. Predictability is also very helpful. This allows users to quickly recognize 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 visually separated. This makes orientation easier. They can also be separated 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 barrier-free design of form fields is operability via the 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 it easier to understand and use forms. Another way to simplify operation using the keyboard is to use keyboard shortcuts. Here, form elements can be stored with key combinations. This can help to reach certain areas more quickly or to operate functions more quickly. The accesskey attribute in HTML is used for this purpose. This attribute is added to the element for which it is to be used. The key that is then used for the keyboard command is simply assigned there. For example, if you assign the "n" key to a field or button, it can be operated in Windows using the keyboard shortcut (Alt + n).
However, it is important to ensure that this shortcut is not already being used for another command in the browser.
Reduction to the minimum
It is also advisable to reduce the whole process to the essentials so as not to place an unnecessary burden on people with disabilities. Therefore, only the absolutely necessary data should be requested. Existing data should not be requested. 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 if they are required. For example, it makes no sense to ask for the age of children if you have previously selected that there are no children.
Help and error messages
Input help should also be provided. This can take the form of a dialog box or a tooltip. These can be used to explain the input in more detail. Another option would be to link to a separate help page. This would increase the success rate enormously. Mistakes still happen. Meaningful error messages are then important. For example, if the password was entered incorrectly when logging in, 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 different types of errors. Firstly, 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 if an incorrect value is entered despite a valid format. An example of this would be entering the value 34 for a day of the date. The message would then read: "The month of March has 31 days. Please enter the day again".
Another type of error is invalid entries. Here, the developer specifies values that are invalid. Finally, there is the error type if no entry was made for mandatory fields. This occurs, for example, if the email address query is a mandatory field and the entry has been forgotten. However, this also often happens with the general terms and conditions. On many websites, you cannot continue without agreeing to this declaration.
Mandatory fields
Forms often contain mandatory fields. These must be marked as such. A frequently used symbol to indicate a mandatory field is an "*", which is displayed next to the form field. In this case, however, it should be indicated at the beginning of the form that the fields marked with an asterisk are mandatory. Another option is to display these mandatory fields in a different color or shade. However, these are not accessible to everyone. So that screen reader users can also recognize them, the required or aria-required attribute should also be used. This informs the screen reader that it is a mandatory field.
Placeholder
One way to make forms even easier to understand and more user-friendly is to use placeholders in form fields. Placeholders are temporary texts that are displayed within a form field to indicate to the user what type of information should be entered. These texts disappear as soon as the form field is clicked or focused on and can be replaced by 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 entries
All users should have the option of saving their entries. There are always problems with longer forms. To avoid data loss, these can be saved. For this purpose, a button can be implemented that saves the current status. This makes it easier to fill in complex forms. This also has the advantage that missing entries can be added at a later date. Repeating these entries leads to some users not completing the form. This can be annoying for both the website operator and the user.
Authentication and time limit
Authentication increases security on the Internet. However, it is also one of the barriers that keep cropping up. These often occur on websites where a login is required. However, to ensure that these are accessible to everyone, forms must be designed to be barrier-free. In many cases, authentication procedures are time-limited. You then only have very little time to log in. It is often only 30 or 60 seconds. For many people with disabilities, this is not enough time to log in. It is therefore important not to set a time limit for logging in.
Captchas pose a further problem. They are used to identify the user as a person 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 also be clicked on, for example those showing a car. However, these are not always accessible. Blind or visually impaired people cannot recognize these images. To overcome this barrier, an audio option should be offered.
In summary, it can be said that 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 complete the forms independently.
