Method 4: aria-describedby attribute applied to all <input> elements

Back to index page

Example

Choose a fruit

Error: At least one option must be chosen

Code

<fieldset>
  <legend>Choose a fruit</legend>
  <ul class="form-list">
    <li>
      <input type="radio" id="apple" name="fruit" aria-describedby="d4">
      <label class="form-label" for="apple">Apple</label>
    </li>
    <li>
      <input type="radio" id="pear" name="fruit" aria-describedby="d4">
      <label class="form-label" for="pear">Pear</label>
    </li>
    <li>
      <input type="radio" id="bannana" name="fruit" aria-describedby="d4">
      <label class="form-label" for="bannana">Banana</label>
    </li>
  </ul>
  <p class="error" id="d4">Error: At least one option must be chosen</p>
</fieldset>

Back to index page