UI/UX patterns

Situations we've settled internally, written down so we can point at them instead of re-arguing them. Each entry states the problem, what to do, what not to do, and why.

• Checkboxes need a real label, not text sitting next to them

  An unassociated beside a checkbox looks identical and behaves nothing like a label. Associate it and the hit area grows from 16px to the whole line.

• Don't put links inside a label — the terms and conditions trap

  An "I agree to the Terms" checkbox with the link nested inside the label breaks the click target and hides the link behind the control. Move the link out and above. A fieldset is not needed for a single checkbox.

• One field, three messages — help, error, and success, all associated

  A field can carry persistent help text plus a conditional error or success message. Associate them with aria-describedby, toggle aria-invalid, and remember aria-describedby announces on focus — not on change.

• Focus outlines — the colour just has to be contrasty enough

  A focus ring's only job is to be seen, which requires 3:1 contrast against the colours next to it (WCAG 1.4.11). Light, dark, or on-brand is beside the point — the ring sits between two colours and has to beat both.