Form label association

Text sitting next to an input is not a label. Association is the actual wiring: a label element whose for attribute (htmlFor in React) matches the input's id, or a label element wrapped around the input. Do it and the screen reader announces 'Email, edit text' instead of a nameless box, clicking the word focuses the field, and the tap target grows to include the text.

Every data-entry control (input, select, textarea, checkbox, radio) needs an accessible name from somewhere, and a real label is the best source. Two things sit outside the rule: a hidden input has no interface to label, and button-like inputs (submit, reset, button) take their name from the value attribute instead. Radio and checkbox groups need a second layer: wrap them in a fieldset with a legend so the group question ('Shipping speed') is announced along with each option. Helper text and error text attach separately via aria-describedby, not by being crammed into the label.

The everyday failure is the placeholder-as-label pattern. Placeholders vanish the moment someone types, usually fail contrast, and are ignored or read inconsistently by assistive tech, so the user who most needs the reminder loses it. If the design refuses a visible label, use a visually hidden label or aria-label, but keep the visible one whenever you can. Also: if the visible text says 'Email address', the accessible name should start with those same words, or voice control users cannot say the field's name to reach it.