Form Field Label

A form field label is the text that indicates the data expected by an input field ('Name', 'Email', 'Password'). To be accessible, this text must be linked to the field in HTML code via the label element or ARIA attributes. Without this link, screen readers announce a silent field with no indication of what to enter.

A screen reader lands on a form field. It announces… nothing. The user doesn't know what they're being asked. This silence has a precise technical cause: the field has no label linked in the code.

The RGAA glossary recognizes four methods to give a field an accessible name. They are not all equivalent.

The <label> element (preferred method)

<label for="email">Email</label>
<input id="email" type="email">

The W3C H44 technique specifies that this association satisfies four WCAG criteria, including 3.3.2 Labels or Instructions (level A). The <label> offers a bonus that ARIA does not provide: clicking on the text activates the field. On mobile, this enlarged clickable zone changes everything.

Variant: the implicit label, where the field is nested inside the <label> element. The result is identical for screen readers, but the explicit label (for and id) remains the convention in React or Vue projects, where label and input rarely live in the same component.

aria-label (invisible text)

<input type="search" aria-label="Search the site">

Reserved for fields whose visual context makes the label unnecessary: search bars, filter fields with an explicit icon.

aria-labelledby (reference existing text)

<h2 id="contact-title">Contact</h2>
<span id="name-label">Name</span>
<input type="text" aria-labelledby="contact-title name-label">

Allows you to compose an accessible name from multiple text fragments already present on the page.

The title attribute (last resort)

The title is announced by screen readers but invisible to ordinary navigation. Access42 advises against it except in very specific situations.

The rule: <label> first. ARIA next. title never (or almost never).

#Text placed beside is not enough

Text "Email" visible next to the field, without linking in the code? The screen reader ignores it.

<!-- ❌ Visible text but not linked -->
<span>Email</span>
<input type="email">
 
<!-- ✅ Label correctly linked -->
<label for="email">Email</label>
<input id="email" type="email">

The WebAIM Million 2025 notes that 48.2% of home pages have at least one field without a label. Third most common accessibility error on the web.

The label must also be relevant. "Field 1" or "Input" tells no one anything. Describe the expected data: "Email address", "Phone number".

#In summary

Use <label> by default. Reserve aria-label and aria-labelledby for cases where native HTML doesn't cover the need. Every field needs an accessible name linked in the code, not text placed beside it.

Back to glossary
Share this article

Learn more

Form Input Field

A form input field is the HTML element in which a user enters or selects data: free text, date, checkbox, dropdown, file upload. To be accessible, each field must be linked in the code to a label that identifies the expected data. Without this connection, screen readers announce a silent field.

Accessible Name

The accessible name is the text that assistive technologies use to identify an interface element. The browser calculates it according to a W3C algorithm by consulting multiple sources in a strict priority order: aria-labelledby, aria-label, HTML <label>, text content, and finally the title attribute as a last resort.

Form

A form is a set of fields and buttons that allow a user to transmit data on a website. To be accessible, each field must have a label linked in the code, related controls must be grouped in a fieldset, and errors must be reported as text. WCAG dedicates 13 criteria to it, its most comprehensive topic.