Skip to main content

Forms: Label, Aria-label, or Aria-labelledby?

In the world of forms, names are everything. If an input doesn’t have a name, a screen reader user won’t know what to type.

AttributeBest Use Case
<label>The Standard. Always use this when the label text is visible on the screen. It provides a large click target.
aria-labelledbyUse this to point to an existing element (like a heading) to act as the label.
aria-labelThe “Invisible Label.” Use this only when there is no visible text to use as a label (e.g., a search button with only a magnifying glass icon).

Write a reply or comment

Your email address will not be published. Required fields are marked *