Marking up help text in forms

<div class="first error example">
<label for="firstemail">Email
<em class="message">must include the @ symbol</em>
</label>
<input type="email" id="firstemail" placeholder="e.g. you@example.com">
</div>
<div class="second error example">
<label for="secondemail">Email</label>
<input type="email" id="secondemail" placeholder="e.g. you@example.com" aria-describedby="seconderror">
<em class="message" id="seconderror">must include the @ symbol</em>
</div>
  1. Label text,
  2. Validation message,
  3. Form field.
  1. Label text,
  2. Form field,
  3. Validation message.

--

--

--

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeremy Keith

Jeremy Keith

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

More from Medium

Aria Grande: a light introduction to ARIA for designers

Illustration of Ariana Grande

UI Renovations Part 5: Closet Core Patterns

Web Accessibility Intro

elegant teapot with cinnamon on the side

Accessibility — Don’t convey information by color alone.