Difference between aria-labelledby and aria-describedby?

Understanding aria-labelledby vs aria-describedby

aria-labelledby and aria-describedby are ARIA attributes that help give accessible names and descriptions to elements for screen reader users. They serve different purposes.

Key Differences

1
aria-labelledby – Provides the accessible name of an element. Screen readers will announce this text as the primary label. It usually points to an element’s ID, such as a heading or label.
2
aria-describedby – Provides additional description or context for an element. Screen readers announce this after the accessible name. It is often used for hints, instructions, or error messages.

Think of aria-labelledby as the 'title' of an element, and aria-describedby as the 'extra explanation'.

Examples

1
A text input with aria-labelledby pointing to a <label> element gives the input its name.
2
That same input can also have aria-describedby pointing to a <p> with instructions like 'Password must be at least 8 characters.'
3
A modal dialog may use aria-labelledby to reference its title heading, and aria-describedby to reference its body text.

Best Practices

1
Use aria-labelledby when you need to provide the main label for an element.
2
Use aria-describedby to add extra context without replacing the main label.
3
You can use both together — aria-labelledby for the name and aria-describedby for the instructions.
4
Prefer visible text over ARIA when possible, since it helps all users.