Label

A form field row — label, input, and help text. The for attribute has been the accessibility API this whole time.

plain CSS — works everywhere

PreviewCode

<div class="grid w-full max-w-xs gap-1.5">
  <label for="lbl-email" class="text-sm leading-none font-medium">Email</label>
  <input
    id="lbl-email"
    type="email"
    placeholder="you@example.com"
    class="h-9 w-full rounded-lg border border-input bg-background px-3 text-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring"
  />
  <p class="text-xs text-muted-foreground">We'll never share it with anyone.</p>
</div>

How it works

for + id links label to input: clicking focuses, and screen readers announce the label with the field.
grid gap-1.5 handles the vertical rhythm; the help text is just a muted <p>.
Add aria-describedby pointing at the help text if it carries information the user must hear.