labeledby

The "labeledby" attribute is a crucial component in web accessibility, particularly within HTML (HyperText Markup Language). It is used to establish a relationship between a form control and its associated label. This relationship is essential for screen readers and other assistive technologies to correctly interpret and convey the purpose of the form control to users with disabilities.

The "labeledby" attribute is typically used in conjunction with the "id" attribute. The "id" attribute is assigned to the label element, and the "labeledby" attribute is used in the form control to reference this "id". This creates a clear and explicit association between the label and the form control, ensuring that assistive technologies can accurately announce the label when the user interacts with the form control.

For example, consider a simple form with a text input field and its corresponding label. The HTML code might look like this:

<label id="username-label" for="username">Username:</label>

<input type="text" id="username" aria-labelledby="username-label">

In this example, the "id" attribute is used in the label element to create a unique identifier ("username-label"). The "aria-labelledby" attribute in the input element references this identifier, establishing a clear association between the label and the input field.

The "labeledby" attribute is part of the ARIA (Accessible Rich Internet Applications) specification, which provides a set of attributes to enhance the accessibility of web content. By using the "labeledby" attribute, web developers can create more inclusive and accessible web experiences for users with disabilities.