Start with the native element
Use a button for an action, a link for navigation, and a labelled input for data entry. Native elements bring keyboard behavior and platform semantics that a generic div does not provide.
Names should match visible intent
A screen reader may announce an accessible name without nearby visual context. Keep it concise and aligned with the visible label; extra instructions belong in help text connected through a description.
A familiar example
Labelling a search control
- A label is associated with the search input by id.
- The clear button has its own name because it is a separate action.
- The result status is announced without moving focus away from the input.
What to remember
- Role says what a control is; name says what it does.
- Native HTML is usually the shortest accessible implementation.
- One label should not accidentally label a different nested control.