Difference between aria-labelledby and aria-describedby?

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.

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.

A text input with aria-labelledby pointing to a <label> element gives the input its name.

That same input can also have aria-describedby pointing to a <p> with instructions like 'Password must be at least 8 characters.'

A modal dialog may use aria-labelledby to reference its title heading, and to reference its body text.

Use aria-labelledby when you need to provide the main label for an element.

Use aria-describedby to add extra context without replacing the main label.

You can use both together — aria-labelledby for the name and aria-describedby for the instructions.