Method 3: aria-describedby attribute applied to the <legend> element

Back to index page

Example

Choose a fruit

Error: At least one option must be chosen

Code

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

Back to index page