Keep the label after typing
A placeholder can suggest an example, but it disappears as soon as someone starts entering a value. The field still needs a persistent label. On a contact form, Your name and Email address should remain visible while the person reviews the message, corrects a typo or returns to an unfinished draft.
Associate text with the control
Use a label whose for value matches the input’s unique id, or wrap the control in its label. Both approaches create a meaningful relationship. Clicking the label should focus the intended field. This larger activation area is useful for small checkboxes as well as ordinary text inputs on a touch screen.
Separate names from help text
A label identifies a field; a hint explains its expected format. For a project budget field, the label might be Estimated budget, with a separate note that the value is optional and should be entered in a particular currency. Associate that note using aria-describedby so the accessible name stays concise and the additional instruction remains available.
Use the right input purpose
Type and autocomplete attributes can support the task. An email field can use type="email" and autocomplete="email"; a name field can use autocomplete="name". These do not replace a visible label. They help the browser offer an appropriate keyboard or saved value while the label tells the person what the site is asking for.
Name groups as well as fields
Related radio buttons need a shared question, not just individual labels. A fieldset with a legend such as Preferred contact method connects choices like Email and Phone. Avoid placing unrelated fields into one enormous group. The relationship should explain the choice someone is making, especially when the options are read independently of their visual layout.
Inspect names in real states
Check the accessibility tree before typing, after autofill and when validation fails. Confirm that every field has a sensible name and duplicate ids are absent. Turn off placeholder styling temporarily to expose missing labels. Finally, check that long labels wrap without colliding with controls, hints, character counters or inline error messages.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.