Inline error method 1: Wrapped label

Home | Full results | Github page

This method wraps the label element around the label content, the form control and the inline error message.

Example

Markup

<div class="form-container">
  <label for="error1">
    <span class="label-content">Age</span>
    <input class="form-input form-input--error" id="error1" type="text">
    <span class="error">Error: Must be a valid age value</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