A semantic, accessible form field

Html

The label is tied to the input by id, and the hint is announced with it via aria-describedby.

<div class="field">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email"
         autocomplete="email" required
         aria-describedby="email-hint" />
  <p id="email-hint">We only use this to send receipts.</p>
</div>

Download

Web & CSS forms accessibility html chris

More in Web & CSS

Visually hidden, still read aloud Web & CSS Hides a label from sight while leaving it in the accessibility tree. display:none would remove it from both. Centre a box, two ways Web & CSS Grid is one line. Flex is three and gives you control over the axes separately. Truncate text to a number of lines Web & CSS Ellipsis after two lines. The -webkit- prefixes are still required despite being supported everywhere. Respect a reduced-motion preference Web & CSS One rule that disables animation for people who asked their system for less of it. Responsive grid without media queries Web & CSS auto-fill with minmax reflows on its own, so the column count follows the container rather than a breakpoint list. Responsive images that do not blow the bandwidth budget Web & CSS srcset lets the browser pick; sizes tells it how wide the image will actually be rendered.

Random picks

Time every phase of an HTTP request Networking Splits DNS, connect, TLS and first byte apart, which tells you which one is actually slow. Remove every stopped container and dangling image Containers Reclaims disk after a week of building. The volume flag is separate because it is the one that loses data. Rotate links wordpress Rotate daily link order Recover a branch you deleted Git The reflog remembers where HEAD has been for about ninety days, so a deleted branch is almost never really gone. A starting Content-Security-Policy Security Blocks inline script and restricts everything to the origin. Tighten from here rather than loosening from nothing. Fetch with a timeout JavaScript fetch has no timeout of its own. AbortSignal.timeout is the short way to give it one. Debounce without pulling in a library JavaScript Twelve lines covering the case most projects add a dependency for, including cancelling a call that has not fired yet. Freeze time in a test Testing Node's mock timers make anything date-dependent deterministic without injecting a clock everywhere.