fieldset-checkbox-group.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox group with list</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="favicon.ico">
  <link href="assets/css/examples.css" rel="stylesheet">
</head>
<body>
  <h1>Checkbox group with list</h1>
  <p>&larr; <a href="index.html">Return to main list</a></p>
  <p>This is a test case designed to determine how the <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element" target="_blank"><code>&lt;fieldset&gt;</code></a> and <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element" target="_blank"><code>&lt;legend&gt;</code></a> elements are announced in relation to a checkbox group by various screen readers.</p>
  <h2>Example</h2>
  <form action="#">
    <fieldset>
      <legend>Favourite animal</legend>
      <ul class="form-list">
        <li>
          <input type="checkbox" id="dog">
          <label for="dog">Dog</label>
        </li>
        <li>
          <input type="checkbox" id="cat">
          <label for="cat">Cat</label>
        </li>
        <li>
          <input type="checkbox" id="rabbit">
          <label for="rabbit">Rabbit</label>
        </li>
      </ul>
    </fieldset>
  </form>
  <h2>Code</h2>
<!-- start code -->
<pre><code>&lt;fieldset&gt;
  &lt;legend&gt;Favourite animal&lt;/legend&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;input type="checkbox" id="dog"&gt;
      &lt;label for="dog"&gt;Dog&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;input type="checkbox" id="cat"&gt;
      &lt;label for="cat"&gt;Cat&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;input type="checkbox" id="rabbit"&gt;
      &lt;label for="rabbit"&gt;Rabbit&lt;/label&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/fieldset&gt;</code></pre>
<!-- end code -->
  <h2>Assistive technologies</h2>
  <div class="note">
    <h3>VoiceOver</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> Dog. Unticked. Tick box. List 3 items. <span class="red">[Role and legend not announced]</span></li>
      <li><b>Firefox:</b> Dog. Unticked. Checkbox. List 3 items. <span class="red">[Role and legend not announced]</span></li>
      <li><b>Safari:</b> Dog. Unticked. Tick box. <span class="red">Favourite animal</span>. <span class="green">Favourite animal</span>. <span class="green">Group</span>. <span class="red">[Legend announced twice]</span></li>
    </ul>
  </div>
  <div class="note">
    <h3>NVDA</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> <span class="green">Favourite animal</span>. <span class="green">Grouping</span>. List with 3 items. Dog. Checkbox. Not checked.</li>
      <li><b>Firefox:</b> <span class="green">Favourite animal</span>. <span class="green">Grouping</span>. List with 3 items. Dog. Checkbox. Not checked.</li>
      <li><b>Edge:</b> <span class="green">Favourite animal</span>. <span class="green">Grouping</span>. List with 3 items. Dog. Checkbox. Not checked.</li>
    </ul>
  </div>
  <div class="note">
    <h3>JAWS</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> <span class="green">Favourite animal</span>. <span class="green">Group</span>. List with 3 items. Dog. Checkbox. Not checked.</li>
      <li><b>Firefox:</b> <span class="green">Favourite animal</span>. Dog. Checkbox. Not checked.</li>
      <li><b>Edge:</b> <span class="green">Favourite animal</span>. <span class="green">Group</span>. List with 3 items. Dog. Checkbox. Not checked.</li>
    </ul>
  </div>
  <p>&larr; <a href="index.html">Return to main list</a></p>
</body>
</html>