<p>These form fields look the same, and the markup is <em>almost</em> the same.</p>
<p>Is one of them better for screen reader users?</p> 

<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>
label {
  display: block;
}
.example {
  font-family: sans-serif;
  margin: 2em 0;
}
.error {
  color: red;
}
.message {
  display: block;
  font-style: normal;
  font-size: smaller;
}
.first {
  position: relative;
}
.first.error {
  padding-bottom: 1em;
}
.first .message {
  position: absolute;
  bottom: 0;
  left: 0;
}
Rerun