Foundations: labelling text fields with input and label

Posted on Wednesday, 21 August 2024 by Demelza Feltham in Design and development

In this post about forms, we explore how to effectively label text fields using <input> and <label> elements to create form inputs that are both accessible and user-friendly.

Forms play a key role in making the web interactive. They enable people to enter and submit data for various purposes such as logging into accounts, making purchases, filling out surveys and so on. So people know how to interact with forms, form fields must have a label.

This benefits everyone, but in particular:

• People browsing with screen a reader and braille displays who cannot see content and rely on the properly coded form labels to understand the input requirements
• People browsing with screen magnification or browser zoom who rely on visible labels adjacent to fields to understand the input requirements
• People browsing with speech recognition who rely on visible labels in order to interact with form inputs
• People with cognitive disabilities who rely on clearly visible labels, so they understand input requirements
• People with reduced focus or short attention spans who rely on persistent labels, and not placeholder text, so they understand input requirements

Form inputs with inaccessible labels result in increased errors and barriers to completing tasks. This wastes time and may discourage people from returning to the form all together. One way to prevent this issue is by providing form labels using the <input> and <label> elements.

The <input> element

The <input> element defines where people can input data and what type of data they should enter. It serves as a visual cue by clearly indicating the expected data and programmatic cue for assistive technology users.

The type attribute in HTML is used to specify the type of form input being used within an <input>. These are defined in the markup using the type attribute on each <input> element.

Common input types include:

• password
• date
• checkbox
• radio buttons

It is important to decide what type of data the form input is collecting, as this will inform the value of the type attribute for each input. For example, a login would need a field for the email, and a field for the password. The advantage of including the type attribute, is that when the form is submitted, it automatically validates the format, email or password.

<input type="email">
<input type="password">

Below is a list of some additional attributes that can be used:

• required communicates that the field must be populated prior to form submission
• maxlength determines the maximum number of characters that can populate the field
• minlength determines the minimum number of characters that can populate the field
• placeholder determines the contents of the field prior to it being populated. It will act as hint text

The <label> element

The <input> element describes the required data visually and programmatically, helping people to understand what is needed. A clear and descriptive <label> makes form inputs clear, especially when multiple form inputs of the same type are present in the same form.

For example, when purchasing a gift card for someone, one email field will collect the email address of whoever is purchasing the gift card.

And one email field will collect the recipient's email address.

Clear labelling is crucial here to explain the different purposes of the field, as the <input> type does not change.

A note on placeholder text

Although this article does not aim to be exhaustive, it’s important to note that using placeholder text as a substitute for a label is inadequate from both usability and accessibility standpoints.

Placeholder text disappears when people begin entering information or change the field selection. This can create challenges for people with cognitive impairments, who may not remember what the form input is for, and make it harder for them to complete the form confidently.

For people that can see, the placement of a <label> near an <input> field helps them understand the connection. For example, if a text field is placed next to "Name" they recognise they are linked. However, to make this relationship accessible to people with visual impairments, it must be explicitly defined in the HTML markup. Without this, individuals with visual impairments may struggle to understand which labels correspond to which form inputs, much like how a sighted person would if the labels and fields were not clearly connected.

Connecting a <label> and <input> with for and id

Just as people that can see would intuitively associate a <label> with an <input> field based on their visual proximity, correct use of the for and id attributes ensures that when the <input> field receives focus, the <label> becomes part of the form field’s accessible name. This improves the accessibility for people who rely on screen readers and other assistive technologies.

Add an id to the <input> element to uniquely identify the field:

<input id="email_login" type="email">

Set the for attribute on the <label> to match the id of the <input>:

<label for="email_login">Email:</label>

When screen reader focus is on the email <input> field, it will be announced as “Email edit blank”, blank due to their being no content within the field.

Tips

• Select the correct <input> field type using the type attribute
• Write clear and descriptive labels for each form field
• Don’t rely on placeholder text as the only <label> for <input> fields
• Ensure labels and inputs are properly linked, one way this can be achieved is using for and id attributes
• Use standard label positioning to make forms easier for everyone to navigate

Related standards

• 1.3.1 Info and Relationships (A)
• 4.1.2 Name, Role, Value (A)
• 3.3.2 Labels or instructions (A)
• 2.4.6 Headings and labels (AA)

Further reading

• Providing descriptive labels, W3C
• W3C Form instructions
• WCAG 2.2 Techniques: Positioning labels to maximize predictability of relationships
• The Label element, MDN web docs
• The Input element, MDN web docs

Next steps

Read more accessibility foundations posts, our WCAG primer or how assessments can help you identify issues in your websites, mobile applications, design systems, and other products and services.