Nested <fieldset>

Return to main list

This is a test case designed to determine how nested <fieldset> and <legend> elements are announced by various screen readers.

Example

What type of cars do you like?
Size
Type

Code

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

Assistive technologies

VoiceOver

NVDA

JAWS

Return to main list