Inline hints method 3: The aria-describedby attribute

Home | Full results | Github page

In some cases, it is not possible to wrap the label around the form control or hint. The aria-describedby can be used to explicitly associate the hint with the form control using matching aria-describedby and id values.

Example

Use your full street address

Markup

<div class="form-container">
  <label class="form-label" for="hint3">Address</label>
  <input class="form-input" id="hint3" type="text" aria-describedby="described2">
  <span class="hint" id="described2">Use your full street address</span>
</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 FAIL

Home | Full results | Github page