[Four circles - one orange, one pink, one purple, and one red - and 4 purple lines fly into screen then join together to form the TetraLogical logo]

TetraLogical

[The TetraLogical logo whooshes off screen]

[A dark purple background appears with the title "Accessible building blocks for web: form fields" written in large yellow font]

Accessible building blocks for web: form fields

Form fields are a vital component of many websites. They allow people to enter information and complete key tasks.

[A video of a form being filled in plays on screen]

However, if not designed and coded with accessibility in mind, they can pose serious barriers to many people including people with cognitive disabilities and people using screen readers. So, what makes form fields easy to understand and fill in for everyone?

[A photograph of a young man with Down syndrome sitting in front of a laptop, wearing headphones]

Clear labels and error messages, well-planned label positioning, good use of colour, and properly associated HTML elements, are all key to accessible form fields.

[A white slide with the title "Accessible form fields" is displayed. Four list items slowly appear on screen: "Clear labels and error messages", "Well-planned label positioning", "Good use of colour", and "Properly associated HTML elements"]

[The white slide is replaced by a light purple one with large, yellow text "Language"]

Language

Help people enter the correct information in form fields by writing clear and descriptive form labels, such as "Full name (including middle name)" for a field requiring a person's full legal name.

[A form is displayed. One of the input fields in the form is preceded by the text label "Full name (including middle name)". An arrow appears on screen, pointing to the label]

Clearly identify required fields. For example, on this form the text "required" is at the end of the labels for the two input fields, as both fields must be filled in.

[A form titled "Subscribe" and containing two input fields appears. The fields are preceded by the labels: "Name (required)" and "Email address (required)". A border appears around the "required" text in both labels, to highlight it]

For less familiar or complex forms, it may be useful to provide additional instructions. For instance, not all people may know where to find their National Insurance Number. As shown here, the instruction "It’s on your National Insurance card, benefit letter, payslip or P60" followed by example data may prove useful to many.

[A form titled "Personal details" is displayed. One of the fields in the form is preceded by the label "National Insurance Number". The instruction "It’s on your National Insurance card, benefit letter, payslip or P60. For example, QQ 12 34 56 C" is in between the label and the input field. An arrow pointing to this instruction appears on screen]

Always use a persistent text label for each form field. Placeholder text disappears when someone starts typing, so it should never be used as a substitute for a label.

[A video of a form being filled in plays on screen. The fields in the form have a placeholder but no persistent label. When text is entered in each field, the placeholder disappears. A large "X" icon is displayed on top of the form]

Finally, if people enter incorrect information, explain the error clearly and simply, and offer guidance on how to fix it.

In this form, when a policy number in an incorrect format is entered, the error message "This doesn't look right. Your policy number starts with EGA or AGL, followed by 6 numbers" is displayed above the field.

[A form titled "About you" is displayed. The form contains a "Policy number" input field. A string of six digits has been entered in the field. A red exclamation mark icon and the red text "This doesn't look right. Your policy number starts with EGA or AGL, followed by 6 numbers" are in between the label and the form field. An arrow pointing to the error message appears on screen]

[The web page is replaced by a red slide containing large, white text "Visual design"]

Visual design

When designing forms, place labels where people expect to find them. Labels are usually above input fields and combo boxes, and to the right of radio buttons and checkboxes.

[A form titled "Registration form" is displayed. The form contains three input fields, a group of three radio buttons, and a checkbox. Arrows pointing to the labels of all fields appear to highlight the label positioning: above the input fields and to the right of the radio buttons and checkbox]

Keeping labels close to their fields helps everyone, especially people enlarging the content.

[The same form, enlarged. The first two input fields take up the whole screen. The labels sit very close to the input fields]

Also, carefully plan how to use colour in your forms.

Never use colour alone to identify fields that are required or in error. In this form, the field in error is identified by a red border and a red label, as well as an exclamation mark icon and a text error message above the field. This makes it easy for everyone to recognise there is an error.

[A form titled "Personal details" is displayed. The form contains a "Phone number" input field where a string of six digits has been entered. The label "Phone number" and the border of the input field are red, and a red exclamation mark icon followed by the red text "Please enter a valid phone number" are in between the label and the form field. Four arrows appear on screen to direct attention to the label, the form field border, the exclamation mark icon, and the red error message]

And make it easy for all to see form fields by giving their border a colour that has a good contrast with the adjacent colours, at least 3:1.

[A form titled "Subscribe" and containing two input fields is displayed. An arrow appears on screen to draw attention to the border of the first form field. The text "3:1" slowly appears on screen]

In this example from the TetraLogical website, the grey border of the input fields has a contrast ratio of 8.9:1 with the light violet background.

[The same Subscribe form is on screen. The Colour Contrast Analyser (CCA) tool appears next to it, showing a contrast ratio of 8.9:1 between the grey colour #444444 used for the border of the form fields and the light violet colour #F6F3F8 used for the background]

[The web page is replaced by an orange slide containing large, white text "Implementation"]

Implementation

By using HTML native controls such as <input>, <textarea>, <select> and so on, you can easily create form fields that are keyboard accessible and are recognised as expected by screen readers.

[The text "HTML native controls" is displayed at the centre of the screen. The text <input>, <textarea>, and <select> appear around it, as they are mentioned]

Next, you should ensure that form fields and labels are correctly associated in the code.

[The Subscribe form from the TetraLogical website is on screen again. A border is displayed around the first input field and its label "Name (required)", to highlight them. To the right of the form, the piece of code <label> Name (required) </label> <input type="text"> is displayed]

A simple way to do so is using the id and for attributes.

[The for attribute with the value "name" appears within the <label> element and the id attribute with the same value "name" appears in the <input> element]

This ensures that the right label for each form field is announced by screen readers. It also allows people with limited dexterity to select a field by clicking on its label, and people using voice commands to select it by reading out the label.

In summary, by writing clear labels and error messages, choosing label placement with care, making good use of colour, and associating fields with their labels at code level, you can create forms that everyone can fill in with ease.

[The web page is replaced by a white slide with the title "Summary" and four list items: "Clear labels and error messages", "Well-planned label positioning", "Good use of colour", and "Properly associated HTML elements"]

To learn more, visit tetralogical.com.

[The screen fades to white and the TetraLogical logo appears again, followed by the text "Find out more about accessibility at tetralogical.com]