WCAG (Level A) SC 2.5.3 Label in Name

WCAG (Level A) SC 2.5.3 Label in Name (W3.org)

Issue description

WCAG 2.5.3, “Label in Name” aims to improve the accessibility of user interface components, particularly for people who rely on assistive technologies like screen readers. It addresses the issue of labels that are visually presented but not programmatically associated with their corresponding controls.

Many websites have labels for user interface components (like buttons, checkboxes, and radio buttons) that are visually positioned near the control but not programmatically linked to it. This can happen when:

• Missing labels: The control has no label at all, making it difficult to understand its purpose.
• Visually positioned labels: The label is visually placed near the control but not programmatically connected using appropriate HTML.
• Incorrectly associated labels: The label is associated with the wrong control, leading to confusion.

Why label in name matters

• Assistive technology compatibility: Screen readers rely on programmatic associations between labels and controls to convey the purpose of the control to users. Without this association, users might not understand what the control does.
• Cognitive disabilities: Users with cognitive disabilities may have difficulty understanding the relationship between a label and its control if it’s not explicitly defined.
• Keyboard navigation: Keyboard-only users rely on labels to understand the purpose of controls as they navigate through the page.

WCAG requirements

This guideline requires that for user interface components with labels that include text or images of text, the name contains the text that is presented visually. This means:  

• Using the <label> element: Use the <label> element with the for attribute to explicitly associate the label with its corresponding control.
• Accessible name: Ensure that the accessible name of the control, which is what assistive technologies will announce, includes the visible label text.

Essentially, this guideline ensures that the visual label and the programmatic name of a control are synchronized. This helps assistive technologies convey the purpose of the control accurately to users, improving accessibility and usability for everyone.

Related requirements

The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.

• WCAG (Level A) SC 3.3.1 Error Identification
• WCAG (Level A) SC 3.3.2 Labels or Instructions
• WCAG (Level AA) SC 3.3.3 Error Suggestion
• WCAG (Level A) SC 4.1.2 Name, Role, Value
• WCAG (Level AA) SC 4.1.3 Status Messages

Who this issue impacts

Follow the links for additional information on user impairments:

• Vision impairment
• Cognitive impairment
• Motor impairment
• General user experience

Suggestions for remediation

Remediating WCAG 2.5.3, “Label in Name” involves ensuring that the visual label of a user interface component is included in its accessible name, which is what assistive technologies use to identify and describe the component to users. Here’s how:

Use the <label> element

• Associate labels with controls: Use the <label> element with the for attribute to explicitly associate labels with their corresponding form controls. The for attribute of the <label> should match the id attribute of the form control. Example: <label for="name">Name:</label> <input type="text" id="name" name="name">

Ensure accessible name includes visible label

• <label> element: When using the <label> element, the accessible name automatically includes the label text.
• aria-labelledby: If the label is not directly associated with the control using a <label>, use the aria-labelledby attribute to link the control to the label element. The aria-labelledby attribute should reference the id of the label element. Example: <span id="nameLabel">Name:</span> <input type="text" aria-labelledby="nameLabel">

Handle Complex Labels

• Multiple labels: If a control has multiple labels, use aria-labelledby to reference all the label elements.
• Labels with additional text: If a label contains additional text that is not part of the label itself, use a combination of <label> and aria-labelledby to include only the relevant label text in the accessible name.

Testing

• Screen reader testing: Test the page with a screen reader to ensure that the accessible name of each control includes the visible label text.
• Inspect the code: Use browser developer tools to inspect the code and verify that the labels are correctly associated with the controls and that the accessible name is accurate.

Example

If you have a checkbox with a label that’s not properly associated:

HTML
<input type="checkbox" id="agree"> Agree to terms

You should change it to:

HTML
<input type="checkbox" id="agree"> 
<label for="agree">Agree to terms</label> 

This ensures that the label “Agree to terms” is included in the accessible name of the checkbox, making it clear to assistive technology users what the checkbox represents.

By following WCAG (Level A) SC 2.5.3 Label in Name, you can ensure that the visual labels of user interface components are accurately conveyed to assistive technologies, improving accessibility and usability for everyone.

Links for more info

• How to implement WCAG 2.1 Success Criterion 2.5.3 Label in Name in code with examples (Youtube.com)
• Understanding Success Criterion 2.5.3: Label in Name (w3c.github.io)