<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>
  <input type="email" id="firstemail" placeholder="e.g. [email protected]">

<div class="second error example">
  <label for="secondemail">Email</label>
  <input type="email" id="secondemail" placeholder="e.g. [email protected]" aria-describedby="seconderror">
  <em class="message" id="seconderror">must include the @ symbol</em>
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;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.