Nested <fieldset> without list

← Return to main list

This is a test case designed to determine how nested <fieldset> and <legend> elements are announced by various screen readers. In this test, the checkbox groups are not presented inside a list.

Example

Code

<fieldset>
  <legend>What type of cars do you like?</legend>
  <fieldset>
    <legend>Size</legend>
    <div class="form-group">
      <input type="checkbox" id="large">
      <label for="large">Large</label>
    </div>
    <div class="form-group">
      <input type="checkbox" id="small">
      <label for="small">Small</label>
    </div>
  </fieldset>
  <fieldset>
    <legend>Type</legend>
    <div class="form-group">
      <input type="checkbox" id="sedan">
      <label for="sedan">Sedan</label>
    </div>
    <div class="form-group">
      <input type="checkbox" id="wagon">
      <label for="wagon">Wagon</label>
    </div>
  </fieldset>
</fieldset>

Assistive technologies

← Return to main list