Inline hints method 2: Wrapped label

Home | Full results | Github page

This method wraps the label element around the label content, the form control and the hint.

Example

Markup

<div class="form-container">
  <label for="hint2">
    <span class="label-content">Password</span>
    <input class="form-input" id="hint2" type="text">
    <span class="hint">Must be at least 8 characters</span>
  </label>
</div>

Results

OSX Voiceover Windows NVDA Windows JAWS
Chrome Safari Opera Chrome Firefox Edge Chrome Firefox Edge
PASS PASS PASS PASS PASS PASS PASS PASS PASS

Home | Full results | Github page