A form with no labels

Tab into each field. The broken version announces "edit text" three times with no way to tell them apart.

Example

Markup

Edit the HTML. The example above is live in this page, so Tab and a screen reader read it the same way they would on any other site.

HTML for the example

<form class="lab-form" data-demo-form novalidate>
  <div class="lab-fakelabel">Full name</div>
  <input type="text" placeholder="Full name">
  <div class="lab-fakelabel">Email</div>
  <input type="text" placeholder="[email protected]">
  <p class="lab-hint lab-hint--coloronly">* Required</p>
  <button type="submit" class="lab-btn">Sign up</button>
  <p class="lab-status" data-form-status></p>
</form>

<form class="lab-form" data-demo-form novalidate>
  <div class="lab-fakelabel">Full name</div>
  <input type="text" placeholder="Full name">
  <div class="lab-fakelabel">Email</div>
  <input type="text" placeholder="you@example.com">
  <p class="lab-hint lab-hint--coloronly">* Required</p>
  <button type="submit" class="lab-btn">Sign up</button>
  <p class="lab-status" data-form-status></p>
</form>