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.
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.
Think of aria-labelledby as the 'title' of an element, and aria-describedby as the 'extra explanation'.
A text input with
aria-labelledbypointing to a<label>element gives the input its name.That same input can also have
aria-describedbypointing to a<p>with instructions like 'Password must be at least 8 characters.'A modal dialog may use
aria-labelledbyto reference its title heading, andaria-describedbyto reference its body text.
Use
aria-labelledbywhen you need to provide the main label for an element.Use
aria-describedbyto add extra context without replacing the main label.You can use both together —
aria-labelledbyfor the name andaria-describedbyfor the instructions.Prefer visible text over ARIA when possible, since it helps all users.