<|start_filename|>x-other-tests/button-with-aria-label-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Button with aria-label test</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1><code>&lt;button&gt;</code> with <code>aria-label</code> test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>To determine if <code>aria-label</code> should be applied to the <code>&lt;button&gt;</code> or icon inside the <code>&lt;button&gt;</code>.</p>
      <hr>

      <h2>Example 01: <code>aria-label</code> and <code>aria-hidden</code> applied to the icon</h2>
      <button class="button SingleDatePickerInput_calendarIcon SingleDatePickerInput_calendarIcon_1" type="button">
        <i class="c-icon i-calendar-alt" aria-label="Open calendar" aria-hidden="true"></i>Dummy
      </button>
      <h3>Code</h3>
<pre><code>&lt;button&gt;
  &lt;i <span>aria-label="Open calendar" aria-hidden="true"</span>&gt;&lt;/i&gt;Dummy
&lt;/button&gt;</code></pre>
      <p><a href="#">Dummy link between</a></p>
      <hr>

      <h2>Example 02: <code>aria-label</code> applied to the icon</h2>
      <button class="button SingleDatePickerInput_calendarIcon SingleDatePickerInput_calendarIcon_1" type="button">
        <i class="c-icon i-calendar-alt" aria-label="Open calendar"></i>Dummy
      </button>
      <h3>Code</h3>
<pre><code>&lt;button&gt;
  &lt;i <span>aria-label="Open calendar"</span>&gt;&lt;/i&gt;Dummy
&lt;/button&gt;</code></pre>
      <p><a href="#">Dummy link between</a></p>
      <hr>

      <h2>Example 03: <code>aria-label</code> applied to the <code>&lt;button&gt;</code></h2>
      <button class="button SingleDatePickerInput_calendarIcon SingleDatePickerInput_calendarIcon_1" type="button" aria-label="Open calendar">
        <i class="c-icon i-calendar-alt" aria-hidden="true"></i>Dummy
      </button>
      <h3>Code</h3>
<pre><code>&lt;button <span>aria-label="Open calendar"</span>&gt;
  &lt;i aria-hidden="true"&gt;&lt;/i&gt;Dummy
&lt;/button&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Results</h2>
      <p>The first method fails as the <code>aria-label</code> is not announced to assistive technologies. This is due to the icon also having <code>aria-hidden</code> applied.</p>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>


<|start_filename|>support-landmarks.html<|end_filename|>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Landmark support chart</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 class="body-wide">
  <h1>Landmark support chart</h1>
  <p>&larr; <a href="index.html">Return to main list</a></p>
  <table>
    <thead>
     <tr>
        <th>&nbsp;</th>
        <th>VoiceOver Chrome</th>
        <th>VoiceOver Firefox</th>
        <th>VoiceOver Safari</th>
        <th>NVDA Chrome</th>
        <th>NVDA Firefox</th>
        <th>NVDA Edge</th>
        <th>JAWS Edge</th>
        <th>JAWS Firefox</th>
        <th>JAWS Edge</th>
     </tr>
    </thead>
    <tbody>
      <tr class="section">
        <th><a href="landmarks-article01.html"><code>&lt;article&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-article02.html"><code>&lt;article&gt;</code> with <code>aria-labelledby</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-article03.html"><code>&lt;article&gt;</code> with <code>aria-label</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr class="section">
        <th><a href="landmarks-aside01.html"><code>&lt;aside&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-aside02.html"><code>role="complementary"</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-aside03.html"><code>&lt;aside&gt;</code> with <code>aria-labelledby</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-aside04.html"><code>&lt;aside&gt;</code> with <code>aria-label</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr class="section">
        <th><a href="landmarks-footer01.html"><code>&lt;footer&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-footer02.html"><code>role="contentinfo</code>"</a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-footer03.html"><code>&lt;footer&gt;</code> with <code>aria-labelledby</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-footer04.html"><code>&lt;footer&gt;</code> with <code>aria-label</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr class="section">
        <th><a href="landmarks-banner01.html"><code>&lt;header&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-banner02.html"><code>role="banner"</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-banner23.html"><code>&lt;header&gt;</code> with <code>aria-labelledby</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-banner24.html"><code>&lt;header&gt;</code> with <code>aria-label</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr class="section">
        <th><a href="landmarks-main01.html"><code>&lt;main&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-main02.html"><code>role="main"</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-main03.html"><code>&lt;main&gt;</code> with <code>aria-labelledby</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-main04.html"><code>&lt;main&gt;</code> with <code>aria-label</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr class="section">
        <th><a href="landmarks-nav01.html"><code>&lt;nav&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-nav02.html"><code>role="navigation"</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-nav03.html"><code>&lt;nav&gt;</code> with <code>aria-labelledby</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-nav04.html"><code>&lt;nav&gt;</code> with <code>aria-label</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr class="section">
        <th><a href="landmarks-section01.html"><code>&lt;section&gt;</code></a></th>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-section02.html"><code>role="region"</code></a></th>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-section03.html"><code>&lt;section&gt;</code> with <code>aria-labelledby</code></a></th>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="announced">Announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="partial-announced">Label not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr>
        <th><a href="landmarks-section04.html"><code>&lt;section&gt;</code> with <code>aria-label</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
    </tbody>
  </table>
</body>
</html>


<|start_filename|>support-form-attributes.html<|end_filename|>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Form attributes support chart</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 class="body-wide">
  <h1>Form attributes support chart</h1>
  <p>&larr; <a href="index.html">Return to main list</a></p>
  <table>
    <thead>
     <tr>
        <th>&nbsp;</th>
        <th>VoiceOver Chrome</th>
        <th>VoiceOver Firefox</th>
        <th>VoiceOver Safari</th>
        <th>NVDA Chrome</th>
        <th>NVDA Firefox</th>
        <th>NVDA Edge</th>
        <th>JAWS Edge</th>
        <th>JAWS Firefox</th>
        <th>JAWS Edge</th>
     </tr>
    </thead>
    <tbody>
      <tr>
        <th><a href="attributes01.html">&lt;input&gt; with <code>max</code></a></th>
        <td class="not-announced">max attribute not announced</td>
        <td class="not-announced">max attribute not announced</td>
        <td class="not-announced">max attribute not announced</td>
        <td class="not-announced">max attribute not announced</td>
        <td class="not-announced">max attribute not announced</td>
        <td class="not-announced">max attribute not announced</td>
        <td class="not-announced">max attribute not announced</td>
        <td class="not-announced">max attribute not announced</td>
        <td class="not-announced">max attribute not announced</td>
      </tr>
      <tr>
        <th><a href="attributes02.html">&lt;input&gt; with <code>aria-valuemax</code></a></th>
        <td class="not-announced">aria-valuemax attribute not announced</td>
        <td class="not-announced">aria-valuemax attribute not announced</td>
        <td class="not-announced">aria-valuemax attribute not announced</td>
        <td class="not-announced">aria-valuemax attribute not announced</td>
        <td class="not-announced">aria-valuemax attribute not announced</td>
        <td class="not-announced">aria-valuemax attribute not announced</td>
        <td class="not-announced">aria-valuemax attribute not announced</td>
        <td class="not-announced">aria-valuemax attribute not announced</td>
        <td class="not-announced">aria-valuemax attribute not announced</td>
      </tr>
      <tr>
        <th><a href="attributes03.html">&lt;input&gt; with <code>max</code> and <code>aria-valuemax</code></a></th>
        <td class="not-announced">max and aria-valuemax attributes not announced</td>
        <td class="not-announced">max and aria-valuemax attributes not announced</td>
        <td class="not-announced">max and aria-valuemax attributes not announced</td>
        <td class="not-announced">max and aria-valuemax attributes not announced</td>
        <td class="not-announced">max and aria-valuemax attributes not announced</td>
        <td class="not-announced">max and aria-valuemax attributes not announced</td>
        <td class="not-announced">max and aria-valuemax attributes not announced</td>
        <td class="not-announced">max and aria-valuemax attributes not announced</td>
        <td class="not-announced">max and aria-valuemax attributes not announced</td>
      </tr>
      <tr>
        <th><a href="attributes04.html">&lt;input&gt; with <code>min</code></a></th>
        <td class="not-announced">min attribute not announced</td>
        <td class="not-announced">min attribute not announced</td>
        <td class="not-announced">min attribute not announced</td>
        <td class="not-announced">min attribute not announced</td>
        <td class="not-announced">min attribute not announced</td>
        <td class="not-announced">min attribute not announced</td>
        <td class="not-announced">min attribute not announced</td>
        <td class="not-announced">min attribute not announced</td>
        <td class="not-announced">min attribute not announced</td>
      </tr>
      <tr>
        <th><a href="attributes05.html">&lt;input&gt; with <code>aria-valuemin</code></a></th>
        <td class="not-announced">aria-valuemin attribute not announced</td>
        <td class="not-announced">aria-valuemin attribute not announced</td>
        <td class="not-announced">aria-valuemin attribute not announced</td>
        <td class="not-announced">aria-valuemin attribute not announced</td>
        <td class="not-announced">aria-valuemin attribute not announced</td>
        <td class="not-announced">aria-valuemin attribute not announced</td>
        <td class="not-announced">aria-valuemin attribute not announced</td>
        <td class="not-announced">aria-valuemin attribute not announced</td>
        <td class="not-announced">aria-valuemin attribute not announced</td>
      </tr>
      <tr>
        <th><a href="attributes06.html">&lt;input&gt; with <code>min</code> and <code>aria-valuemin</code></a></th>
        <td class="not-announced">min and aria-valuemin attributes not announced</td>
        <td class="not-announced">min and aria-valuemin attributes not announced</td>
        <td class="not-announced">min and aria-valuemin attributes not announced</td>
        <td class="not-announced">min and aria-valuemin attributes not announced</td>
        <td class="not-announced">min and aria-valuemin attributes not announced</td>
        <td class="not-announced">min and aria-valuemin attributes not announced</td>
        <td class="not-announced">min and aria-valuemin attributes not announced</td>
        <td class="not-announced">min and aria-valuemin attributes not announced</td>
        <td class="not-announced">min and aria-valuemin attributes not announced</td>
      </tr>
      <tr>
        <th><a href="attributes07.html">&lt;input&gt; with <code>maxlength</code></a></th>
        <td class="not-announced">maxlength attribute not announced</td>
        <td class="not-announced">maxlength attribute not announced</td>
        <td class="not-announced">maxlength attribute not announced</td>
        <td class="not-announced">maxlength attribute not announced</td>
        <td class="not-announced">maxlength attribute not announced</td>
        <td class="not-announced">maxlength attribute not announced</td>
        <td class="not-announced">maxlength attribute not announced</td>
        <td class="not-announced">maxlength attribute not announced</td>
        <td class="not-announced">maxlength attribute not announced</td>
      </tr>
      <tr>
        <th><a href="attributes08.html">&lt;input&gt; with <code>minlength</code></a></th>
        <td class="not-announced">minlength attribute not announced</td>
        <td class="not-announced">minlength attribute not announced</td>
        <td class="not-announced">minlength attribute not announced</td>
        <td class="not-announced">minlength attribute not announced</td>
        <td class="not-announced">minlength attribute not announced</td>
        <td class="not-announced">minlength attribute not announced</td>
        <td class="not-announced">minlength attribute not announced</td>
        <td class="not-announced">minlength attribute not announced</td>
        <td class="not-announced">minlength attribute not announced</td>
      </tr>
      <tr>
        <th><a href="attributes09.html">&lt;input&gt; with <code>multiple</code></a></th>
        <td class="not-announced">multiple attribute not announced</td>
        <td class="not-announced">multiple attribute not announced</td>
        <td class="not-announced">multiple attribute not announced</td>
        <td class="not-announced">multiple attribute not announced</td>
        <td class="not-announced">multiple attribute not announced</td>
        <td class="not-announced">multiple attribute not announced</td>
        <td class="not-announced">multiple attribute not announced</td>
        <td class="not-announced">multiple attribute not announced</td>
        <td class="not-announced">multiple attribute not announced</td>
      </tr>
      <tr>
        <th><a href="attributes10.html">&lt;input&gt; with <code>pattern</code></a></th>
        <td class="not-announced">pattern attribute not announced</td>
        <td class="not-announced">pattern attribute not announced</td>
        <td class="not-announced">pattern attribute not announced</td>
        <td class="not-announced">pattern attribute not announced</td>
        <td class="not-announced">pattern attribute not announced</td>
        <td class="not-announced">pattern attribute not announced</td>
        <td class="not-announced">pattern attribute not announced</td>
        <td class="not-announced">pattern attribute not announced</td>
        <td class="not-announced">pattern attribute not announced</td>
      </tr>
    </tbody>
  </table>
</body>
</html>


<|start_filename|>x-other-tests/clickable-label-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Clickable label test</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>Clickable <code>&lt;label&gt;</code> test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>These tests are to determine whether the <code>&lt;label&gt;</code> contents are clickable as well as the form control itself when the <code>&lt;label&gt;</code> is wrapped or unwrapped.</p>
      <h2></h2>

      <h2>Example 01: Unwrapped <code>&lt;label&gt;</code></h2>
      <form action="#">
        <input id="one" type="checkbox">
        <label for="one">Subscribe</label>
      </form>
      <h3>Code</h3>
<pre><code>&lt;form action="#"&gt;
  <span>&lt;input id="one" type="checkbox"&gt;</span>
  &lt;label for="one"&gt;Subscribe&lt;/label&gt;
&lt;/form&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Example 02: Wrapped <code>&lt;label&gt;</code></h2>
      <form action="#">
        <label for="two">
          <input id="two" type="checkbox">
          Subscribe
        </label>
      </form>
      <h3>Code</h3>
<pre><code>&lt;form action="#"&gt;
  <span>&lt;label for="two"&gt;</span>
    &lt;input id="two" type="checkbox"&gt;
    Subscribe
  <span>&lt;/label&gt;</span>
&lt;/form&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Results</h2>
      <p>All modern browsers include the <code>&lt;label&gt;</code> and checkbox as triggers to change the state of the checkbox.</p>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>


<|start_filename|>accessible-name-table05.html<|end_filename|>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table with no accessible name</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><code>&lt;table&gt;</code> with no accessible name</h1>
  <p>&larr; <a href="index.html">Return to main list</a></p>
  <p>The purpose this test is to show the cascade order of how accessible names are applied in the accessibility tree for the <code>&lt;table&gt;</code> element. The priority order from highest to lowest is:</p>
  <ul>
    <li><a href="accessible-name-table01.html">If present, use <code>aria-labelledby</code></a></li>
    <li><a href="accessible-name-table02.html">Otherwise, if present, use <code>aria-label</code></a></li>
    <li><a href="accessible-name-table03.html">Otherwise, if present, use <code>&lt;caption&gt;</code></a></li>
    <li><a href="accessible-name-table04.html">Otherwise, if present, use <code>title</code></a></li>
    <li><b>Otherwise, there is no accessible name</b></li>
  </ul>
  <h2>Example</h2>
  <table>
    <thead>
      <tr>
        <th>Fishes</th>
        <th>Birds</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Snapper</td>
        <td>Starling</td>
      </tr>
      <tr>
        <td>Salmon</td>
        <td>Eagle</td>
      </tr>
    </tbody>
  </table>
  <h2>Code</h2>
<!-- start code -->
<pre><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Fishes&lt;/th&gt;
      &lt;th&gt;Birds&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Snapper&lt;/td&gt;
      &lt;td&gt;Starling&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Salmon&lt;/td&gt;
      &lt;td&gt;Eagle&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
<!-- end code -->
  <h2>Assistive technologies</h2>
  <div class="note">
    <h3>VoiceOver</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> Table. 2 Columns. 3 rows.</li>
      <li><b>Firefox:</b> Table. 2 Columns. 3 rows.</li>
      <li><b>Safari:</b> Table. 2 Columns. 3 rows.</li>
    </ul>
  </div>
  <div class="note">
    <h3>NVDA</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> Table with 3 rows and 2 columns. Row 1. Fishes. Column 1. Fishes.</li>
      <li><b>Firefox:</b> Table with 3 rows and 2 columns. Row 1. Column 1. Fishes.</li>
      <li><b>Safari:</b> Table with 3 rows and 2 columns. Row 1. Fishes. Column 1. Fishes.</li>
    </ul>
  </div>
  <div class="note">
    <h3>JAWS</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> Table with 2 columns and 3 rows.</li>
      <li><b>Firefox:</b> Table with 2 columns and 3 rows.</li>
      <li><b>Safari:</b> Table with 2 columns and 3 rows.</li>
    </ul>
  </div>
  <p>&larr; <a href="index.html">Return to main list</a></p>
</body>
</html>


<|start_filename|>x-other-tests/andrew02.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Andrew test 2</title>
    <link rel="stylesheet" href="assets/css/test.css">
    <style>
      .alert {
        padding: 1em;
        margin: 1em 0;
        background: rgba(255,0,0,.3);
        font-weight: bold;
      }
    </style>
  <script>
  "use strict";
  function jumpForMe()
  { //This function is called by the onload attribute in the body element
	document.getElementById("two").focus();
	//The previous line puts focus on the div with id of "two"
}
</script>
  </head>
  <body onload="jumpForMe()">
    <main>
      <h1>Andrew test 2</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>In this second example, the <code>&lt;div&gt;</code> with an <code>id</code> of <code>two</code> receives focus on initial page load.</p>
      <hr>

      <div id="two" class="alert" role="alert" tabindex="0">
        Alert message
      </div>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Nemo ducimus provident corporis vitae voluptatum exercitationem, officia accusantium et soluta iure dolore repellendus cupiditate quaerat dolorem qui ratione incidunt? Voluptatibus, recusandae.</p>

      <hr>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>



<|start_filename|>x-other-tests/andrew01.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Andrew test 1</title>
    <link rel="stylesheet" href="assets/css/test.css">
    <style>
      .alert {
        padding: 1em;
        margin: 1em 0;
        background: rgba(255,0,0,.3);
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Andrew test 1</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>In this first example, the <code>&lt;div&gt;</code> with an <code>id</code> of <code>one</code> does not receive focus on initial page load.</p>
      <hr>

      <div id="one" class="alert" role="alert">
        Alert message
      </div>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Nemo ducimus provident corporis vitae voluptatum exercitationem, officia accusantium et soluta iure dolore repellendus cupiditate quaerat dolorem qui ratione incidunt? Voluptatibus, recusandae.</p>

      <hr>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>



<|start_filename|>x-other-tests/empty-id-name-attributes-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Empty id and name attributes tests</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>Empty <code>id</code> and <code>name</code> attributes tests</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>To determine if <code>id</code> and <code>name</code> attributes are considered invalid if written as boolean attributes, or attributes with blank values.</p>
      <hr>

      <h2>Example 01: <code>id</code> and <code>name</code> attributes without values</h2>
      <button class="button" id name aria-label="">Test one</button>
      <h3>Code</h3>
<pre><code>&lt;button <span>id name</span> aria-label=""&gt;Test one&lt;/button&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Example 02: empty <code>id</code> and <code>name</code> attributes</h2>
      <button class="button" id="" name="" aria-label="">Test two</button>
      <h3>Code</h3>
<pre><code>&lt;button <span>id="" name=""</span> aria-label=""&gt;Test two&lt;/button&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Results</h2>
      <p>Both methods are considered invalid.</p>
      <ul>
        <li>An <code>ID</code> must not be the empty string.</li>
        <li>The <code>name</code> value must not be empty.</li>
        <li><code>ID</code> attributes with empty strings are also not considered unique.</li>
      </ul>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>


<|start_filename|>x-other-tests/name.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Label in name test</title>
    <link rel="stylesheet" href="assets/css/test.css">
<style>
  .c-alert {
    padding: 1em;
    background: rgba(0,0,255,.1);
  }

  .c-alert h3 {
    margin: 0 0 .5em;
  }

  .c-alert p {
    margin: 0;
  }

</style>
  </head>
  <body>
    <main>
      <h1>Label in name test</h1>
      <p>This page has a series of tests related to <a href="https://www.w3.org/TR/WCAG21/#label-in-name">Success Criterion 2.5.3 Label in Name</a>.</p>
      <p>Keeping in mind that accessible names are generated in the following priority order:</p>
      <ol>
        <li>If present, use <code>aria-labelledby</code> value.</li>
        <li>Otherwise, if present, use <code>aria-label</code> value.</li>
        <li>Otherise, if present, use link content.</li>
        <li>Otherwise, if present, use <code>title</code> value.</li>
        <li>If none of the above are provided, there is no accessible name.</li>
      </ol>
      <p>In the examples below, the label (in this case the visible test associated with the link) may not match the accessible name - the name assigned in the accessibility tree.</p>
      <p>&larr; <a href="index.html">Index page</a></p>
      <hr>

      <h2>Example 01:</h2>
      <p>In the link below, the visible label is also the accessible name.</p>
      <p>
        <a href="#">More about fish</a>
      </p>
<pre><code>&lt;a href="#"&gt;More about fish&lt;/a&gt;</code></pre>
      <hr>

      <h2>Example 02:</h2>
      <p>In the link below, the visible label "More" does not match the accessible name, generated via the <code>aria-label</code> "More about fish".</p>
      <p>
        <a href="#" aria-label="More about fish">More</a>
      </p>
<pre><code>&lt;a href="#" aria-label="More about fish"&gt;More&lt;/a&gt;</code></pre>
      <hr>

      <h2>Example 03:</h2>
      <p>In the link below, the visible label "More" does not match the accessible name, generated via the <code>aria-label</code> "About fish".</p>
      <p>
        <a href="#" aria-label="About fish">More</a>
      </p>
<pre><code>&lt;a href="#" aria-label="About fish"&gt;More&lt;/a&gt;</code></pre>
      <hr>

      <h2>Example 04:</h2>
      <p>In the link below, the visible label "More" does not match the accessible name, which includes content that is hidden off-screen "about fish". So, the accessible name is "More about fish".</p>
      <p>
        <a href="#">
          More
          <span class="sr-only">about fish</span>
        </a>
      </p>
<pre><code>&lt;a href="#"&gt;
  More
  &lt;span class="sr-only"&gt;about fish&lt;/span&gt;
&lt;/a&gt;</code></pre>
      <hr>

      <h2>Example 04:</h2>
      <p>In the link below, the visible label "fish" does not match the accessible name, which includes content that is hidden off-screen "More about". So, the accessible name is "More about fish".</p>
      <p>
        <a href="#">
          <span class="sr-only">More about</span>
          fish
        </a>
      </p>
<pre><code>&lt;a href="#"&gt;
  &lt;span class="sr-only"&gt;More about&lt;/span&gt;
  fish
&lt;/a&gt;</code></pre>
      <hr>

      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>



<|start_filename|>x-other-tests/datalist-meter-progress-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Datalist, meter, progress and output tests</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1><code>&lt;datalist&gt;</code>, <code>&lt;meter&gt;</code> <code>&lt;progress&gt;</code> and <code>&lt;output&gt;</code> tests</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>These tests are to show the <code>&lt;datalist&gt;</code>, <code>&lt;meter&gt;</code>, <code>&lt;progress&gt;</code> and <code>&lt;output&gt;</code> in action.</p>
      <hr>

      <h2>The <code>&lt;datalist&gt;</code> element</h2>
      <p>This element contains a set of <code>&lt;option&gt;</code> elements that represent the permissible or recommended options available to choose from within other controls.</p>
      <form action="#">
        <label class="label" for="abc">Choose a flavor:</label>
        <input class="input" id="abc" list="xyz">
        <datalist id="xyz">
          <option value="Chocolate"></option>
          <option value="Coconut"></option>
          <option value="Mint"></option>
          <option value="Strawberry"></option>
          <option value="Vanilla"></option>
        </datalist>
      </form>
      <h3>Code</h3>
<pre><code>&lt;form action="#"&gt;
  &lt;label for="abc"&gt;Choose a flavor:&lt;/label&gt;
  &lt;input id="abc" <span>list="xyz"</span>&gt;
  <span>&lt;datalist id="xyz"&gt;</span>
    &lt;option value="Chocolate"&gt;&lt;/option&gt;
    &lt;option value="Coconut"&gt;&lt;/option&gt;
    &lt;option value="Mint"&gt;&lt;/option&gt;
    &lt;option value="Strawberry"&gt;&lt;/option&gt;
    &lt;option value="Vanilla"&gt;&lt;/option&gt;
  <span>&lt;/datalist&gt;</span>
&lt;/form&gt;
</code></pre>
      <p><a href="#">Dummy link before</a></p>
      <hr>

      <h2>The <code>&lt;meter&gt;</code> element</h2>
      <p>This element represents either a scalar value within a known range or a fractional value.</p>
      <form action="">
        <label class="label" for="fuel">Fuel level:</label>
        <meter id="fuel"
          min="0"
          max="100"
          low="33"
          high="66"
          optimum="80"
          value="50">
        at 50/100
        </meter>
      </form>
      <h3>Code</h3>
<pre><code>&lt;form action=""&gt;
  &lt;label for="fuel"&gt;Fuel level:&lt;/label&gt;
  <span>&lt;meter
    id="fuel"
    min="0"
    max="100"
    low="33"
    high="66"
    optimum="80"
    value="50"
  &gt;</span>
  at 50/100
  <span>&lt;/meter&gt;</span>
&lt;/form&gt;
</code></pre>
      <p><a href="#">Dummy link before</a></p>
      <hr>

      <h2>The <code>&lt;progress&gt;</code> element</h2>
      <p>This element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.</p>
      <form action="">
        <label class="label" for="file">File progress:</label>
        <progress id="file" max="100" value="70">70%</progress>
      </form>
      <h3>Code</h3>
<pre><code>&lt;form action=""&gt;
  &lt;label for="file"&gt;File progress:&lt;/label&gt;
  <span>&lt;progress id="file" max="100" value="70"&gt;</span>70%<span>&lt;/progress&gt;</span>
&lt;/form&gt;</code></pre>
        <p><a href="#">Dummy link before</a></p>
      <hr>

      <h2>The <code>&lt;output&gt;</code> element</h2>
      <p>This element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.</p>
      <form action="">
        <input type="range" id="b" name="b" value="50" /> +
        <input type="number" id="a" name="a" value="10" /> =
        <output name="result" for="a b">60</output>
      </form>
      <h3>Code</h3>
<pre><code>&lt;form action=""&gt;
  &lt;input type="range" id="b" name="b" value="50" /&gt; +
  &lt;input type="number" id="a" name="a" value="10" /&gt; =
  <span>&lt;output for="b a"&gt;</span>60<span>&lt;/output&gt;</span>
&lt;/form&gt;</code></pre>
      <p>&larr; <a href="index.html">Index page</a></p>

    </main>
  </body>
</html>


<|start_filename|>x-other-tests/line-break-in-legend-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Line break inside a Legend test</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>Line break inside a <code>&lt;legend&gt;</code> test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>This test is to determine if line breaks are allowed inside the <code>&lt;legend&gt;</code> element. This is based on the <a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-content-model" target="_blank">W3C content model</a>, which defines content that must be included as children and descendants of the element.</p>
      <hr>

      <h2>Example</h2>
      <form action="#">
        <fieldset>
          <legend>Something<br>Another thing</legend>
        </fieldset>
      </form>
<pre><code>&lt;form action="#"&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Something<span>&lt;br&gt;</span> Another thing&lt;/legend&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Results</h2>
      <p>The <code>&lt;legend&gt;</code> element can contain <a href="https://html.spec.whatwg.org/#phrasing-content-2" target="_blankhttps://html.spec.whatwg.org/#phrasing-content-2">phrasing content</a>, optionally intermixed with <a href="https://html.spec.whatwg.org/#heading-content-2" target="_blank">heading content</a>.</p>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>


<|start_filename|>index.html<|end_filename|>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML test cases</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>HTML test cases</h1>
  <p>A series of HTML test cases to determine how they are announced in different screen reader / browser combinations.</p>
  <p><a class="button-secondary small" href="https://github.com/russmaxdesign/accessible-forms" aria-label="Git repository for all tests" target="_blank">Git repository</a></p>

  <section>
    <h2>Page content sections</h2>
    <ul class="page-contents-list" aria-label="Page contents">
      <li>&darr; <a href="#basic">Basic form control and label tests</a></li>
      <li>&darr; <a href="#fieldset"><code>&lt;fieldset&gt;</code> tests</a></li>
      <li>&darr; <a href="#fieldset-error"><code>&lt;fieldset&gt;</code> with errors tests</a></li>
      <li>&darr; <a href="#nested">Nested <code>&lt;fieldset&gt;</code> tests</a></li>
      <li>&darr; <a href="#help">Help text and error messages associated with form control tests</a></li>
      <li>&darr; <a href="#required">Required field tests</a></li>
      <li>&darr; <a href="#accessible-button"><code>&lt;button&gt;</code> accessible name and description tests</a></li>
      <li>&darr; <a href="#accessible-link"><code>&lt;a&gt;</code> accessible name and description tests</a></li>
      <li>&darr; <a href="#accessible-input"><code>&lt;input&gt;</code> accessible name and description tests</a></li>
      <li>&darr; <a href="#accessible-table"><code>&lt;table&gt;</code> accessible name and description tests</a> <span class="badge">Added: 15/12/2021</span></li>
      <li>&darr; <a href="#invalid"><code>aria-invalid</code> tests</a></li>
      <li>&darr; <a href="#attributes">Form-based attribute tests</a></li>
      <li>&darr; <a href="#disabled"><code>disabled</code> attribute tests</a></li>
      <li>&darr; <a href="#landmark">ARIA landmark tests</a></li>
      <li>&darr; <a href="#header"><code>&lt;header&gt;</code> scope tests</a></li>
      <li>&darr; <a href="#rotor">VoiceOver Rotor tests</a></li>
      <li>&darr; <a href="#technology">Technology details</a></li>
    </ul>
  </section>
  <hr>

  <section id="basic">
    <h2>Basic form control and label tests</h2>
    <p>Tests to determine how form controls and their associated <code>&lt;label&gt;</code> and <code>&lt;legend&gt;</code> elements are announced. In some cases, the form element does not require or should not have a <code>&lt;label&gt;</code>.</p>
    <h3>Inputs</h3>
    <ul class="main-list">
      <li>&rarr; <a href="01-input-button.html"><code>&lt;input type="button"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-checkbox.html"><code>&lt;input type="checkbox"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-color.html"><code>&lt;input type="color"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-date.html"><code>&lt;input type="date"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-datetime-local.html"><code>&lt;input type="datetime-local"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-email.html"><code>&lt;input type="email"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-file.html"><code>&lt;input type="file"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-month.html"><code>&lt;input type="month"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-number.html"><code>&lt;input type="number"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-password.html"><code>&lt;input type="password"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-radio.html"><code>&lt;input type="radio"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-range.html"><code>&lt;input type="range"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-reset.html"><code>&lt;input type="reset"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-search.html"><code>&lt;input type="search"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-submit.html"><code>&lt;input type="submit"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-tel.html"><code>&lt;input type="tel"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-text.html"><code>&lt;input type="text"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-time.html"><code>&lt;input type="time"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-url.html"><code>&lt;input type="url"&gt;</code></a></li>
      <li>&rarr; <a href="01-input-week.html"><code>&lt;input type="week"&gt;</code></a></li>
    </ul>
    <h3>Other elements</h3>
    <ul class="main-list">
      <li>&rarr; <a href="04-button.html"><code>&lt;button&gt;</code></a></li>
      <li>&rarr; <a href="02-select.html"><code>&lt;select&gt;</code></a></li>
      <li>&rarr; <a href="02-select-multiple.html"><code>&lt;select&gt;</code> with <code>multiple</code></a></li>
      <li>&rarr; <a href="02-select-optgroup.html"><code>&lt;optgroup&gt;</code> within <code>&lt;select&gt;</code></a></li>
      <li>&rarr; <a href="03-textarea.html"><code>&lt;textarea&gt;</code></a></li>
    </ul>
    <p><a class="button-secondary small" href="support-basic-form-controls.html">Basic form controls support chart</a></p>
  </section>
  <hr>

  <section id="fieldset">
    <h2><code>&lt;fieldset&gt;</code> tests</h2>
    <p>Tests to determine how <code>&lt;fieldset&gt;</code> elements are announced.</p>
    <ul class="main-list">
      <li>&rarr; <a href="fieldset.html">Basic <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code></a></li>
      <li>&rarr; <a href="fieldset-buttons.html"><code>&lt;fieldset&gt;</code> and buttons</a></li>
    </ul>
    <h3>Checkboxes</h3>
    <ul class="main-list">
      <li>&rarr; <a href="fieldset-checkbox-group.html">Checkbox group</a></li>
      <li>&rarr; <a href="fieldset-checkbox-group-presentation.html">Checkbox group with <code>role="presentation"</code></a></li>
      <li>&rarr; <a href="fieldset-checkbox-group-without-list.html">Checkbox group without a list</a></li>
    </ul>
    <h3>Radio buttons</h3>
    <ul class="main-list">
      <li>&rarr; <a href="fieldset-radio-group.html">Radio group</a></li>
      <li>&rarr; <a href="fieldset-radio-group-presentation.html">Radio group with <code>role="presentation"</code></a></li>
      <li>&rarr; <a href="fieldset-radio-group-without-list.html">Radio group without a list</a></li>
    </ul>
    <p><a class="button-secondary small" href="support-fieldsets.html">Fieldset support chart</a></p>
  </section>
  <hr>

  <section id="fieldset-error">
    <h2><code>&lt;fieldset&gt;</code> with errors tests</h2>
    <p>Tests to determine how error messages associated with radio groups are announced.</p>
    <ul class="main-list">
      <li>&rarr; <a href="fieldset-error01.html">Radio group with error - no programmatic association</a></li>
      <li>&rarr; <a href="fieldset-error02.html">Radio group with error - <code>aria-describedby</code> applied to <code>&lt;fieldset&gt;</code></a></li>
      <li>&rarr; <a href="fieldset-error03.html">Radio group with error - <code>aria-describedby</code> applied to <code>&lt;legend&gt;</code></a></li>
      <li>&rarr; <a href="fieldset-error04.html">Radio group with error - <code>aria-describedby</code> applied to <code>&lt;input&gt;</code></a></li>
      <li>&rarr; <a href="fieldset-error05.html">Radio group with error - <code>aria-label</code> applied to <code>&lt;fieldset&gt;</code></a></li>
      <li>&rarr; <a href="fieldset-error06.html">Radio group with error - <code>aria-label</code> applied to <code>&lt;input&gt;</code></a></li>
    </ul>
    <p><a class="button-secondary small" href="support-fieldset-errors.html">Fieldsets with errors support chart</a></p>
  </section>
  <hr>

  <section id="nested">
    <h2>Nested <code>&lt;fieldset&gt;</code> tests</h2>
    <p>Tests to determine how nested <code>&lt;fieldset&gt;</code> elements are announced.</p>
    <ul class="main-list">
      <li>&rarr; <a href="nested-fieldset.html">Nested <code>&lt;fieldset&gt;</code></a></li>
      <li>&rarr; <a href="nested-fieldset-presentation.html">Nested <code>&lt;fieldset&gt;</code>, with <code>role="presentation</code>"</a></li>
      <li>&rarr; <a href="nested-fieldset-without-list.html">Nested <code>&lt;fieldset&gt;</code> without list</a></li>
    </ul>
    <p><a class="button-secondary small" href="support-nested-fieldsets.html">Nested fieldset support chart</a></p>
  </section>
  <hr>

  <section id="help">
    <h2>Help text and error messages associated with form control tests</h2>
    <p>Tests to determine how help text and error messages can be associated with form controls.</p>
    <h3>Help text</h3>
    <ul class="main-list">
      <li>&rarr; <a href="input-help-text-wrapped-label.html"><code>&lt;input&gt;</code> with help text wrapped inside <code>&lt;label&gt;</code></a></li>
      <li>&rarr; <a href="input-help-text-aria-describedby.html"><code>&lt;input&gt;</code> with help text using <code>aria-describedby</code></a></li>
      <li>&rarr; <a href="input-help-text-aria-label.html"><code>&lt;input&gt;</code> with help text as an <code>aria-label</code></a></li>
    </ul>
    <h3>Error messages</h3>
    <ul class="main-list">
      <li>&rarr; <a href="input-error-message-wrapped-label.html"><code>&lt;input&gt;</code> with error message wrapped inside <code>&lt;label&gt;</code></a></li>
      <li>&rarr; <a href="input-error-message-aria-describedby.html"><code>&lt;input&gt;</code> with error message using <code>aria-describedby</code></a></li>
      <li>&rarr; <a href="input-error-message-aria-errormessage.html"><code>&lt;input&gt;</code> with error message using <code>aria-errormessage</code></a></li>
      <li>&rarr; <a href="input-error-message-title.html"><code>&lt;input&gt;</code> with error message using <code>title</code></a></li>
      <li>&rarr; <a href="input-error-message-title-aria-describedby.html"><code>&lt;input&gt;</code> with error message using <code>aria-describedby</code> and <code>title</code></a></li>
      <li>&rarr; <a href="input-error-message-hidden-aria-describedby.html"><code>&lt;input&gt;</code> with error message using hidden <code>aria-describedby</code></a></li>
    </ul>
    <p><a class="button-secondary small" href="support-help-error-messages.html">Help text and error message support chart</a></p>
  </section>
  <hr>

  <section id="required">
    <h2>Required field tests</h2>
    <p>Tests to determine how <code>required</code>, <code>aria-required</code> and other related options are announced.</p>
    <ul class="main-list">
      <li>&rarr; <a href="required01.html"><code>&lt;input&gt;</code> with <code>required</code></a></li>
      <li>&rarr; <a href="required02.html"><code>&lt;input&gt;</code> with <code>aria-required</code></a></li>
      <li>&rarr; <a href="required03.html"><code>&lt;input&gt;</code> with <code>required</code> and <code>aria-required</code></a></li>
      <li>&rarr; <a href="required04.html"><code>&lt;input&gt;</code> with visual <code>required</code> indicator</a></li>
      <li>&rarr; <a href="required05.html"><code>&lt;input&gt;</code> with visual <code>required</code> indicator, and aria-hidden</a></li>
    </ul>
    <p><a class="button-secondary small" href="support-required-fields.html">Required field support chart</a></p>
  </section>
  <hr>

  <section id="accessible-button">
    <h2><code>&lt;button&gt;</code> accessible name and description tests</h2>
    <p>The purpose these tests is to show the cascade order of how accessible names are applied in the accessibility tree for the <code>&lt;button&gt;</code> element. <em>These examples should not be considered proper practice</em>.</p>
    <ul class="main-list">
      <li>&rarr; <a href="accessible-name-button01.html"><code>&lt;button&gt;</code> where <code>aria-labelledby</code> should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-button02.html"><code>&lt;button&gt;</code> where <code>aria-label</code> should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-button03.html"><code>&lt;button&gt;</code> where content should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-button04.html"><code>&lt;button&gt;</code> where <code>title</code> should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-button05.html"><code>&lt;button&gt;</code> with no accessible name</a></li>
    </ul>
    <p>The purpose these tests is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <code>&lt;button&gt;</code> element.</p>
    <ul class="main-list">
      <li>&rarr; <a href="accessible-description-button01.html"><code>&lt;button&gt;</code> where <code>aria-describedby</code> should be accessible description</a></li>
      <li>&rarr; <a href="accessible-description-button02.html"><code>&lt;button&gt;</code> where <code>title</code> should be accessible description</a></li>
      <li>&rarr; <a href="accessible-description-button03.html"><code>&lt;button&gt;</code> with no accessible description</a></li>
    </ul>
  </section>
  <hr>

  <section id="accessible-link">
    <h2><code>&lt;a&gt;</code> accessible name and description tests</h2>
    <p>The purpose these tests is to show the cascade order of how accessible names are applied in the accessibility tree for the <code>&lt;a&gt;</code> element. <em>These examples should not be considered proper practice</em>.</p>
    <ul class="main-list">
      <li>&rarr; <a href="accessible-name-link01.html"><code>&lt;a&gt;</code> where <code>aria-labelledby</code> should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-link02.html"><code>&lt;a&gt;</code> where <code>aria-label</code> should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-link03.html"><code>&lt;a&gt;</code> where content should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-link04.html"><code>&lt;a&gt;</code> where <code>title</code> should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-link05.html"><code>&lt;a&gt;</code> with no accessible name</a></li>
    </ul>
    <p>The purpose these tests is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <code>&lt;a&gt;</code> element.</p>
    <ul class="main-list">
      <li>&rarr; <a href="accessible-description-link01.html"><code>&lt;a&gt;</code> where <code>aria-describedby</code> should be accessible description</a></li>
      <li>&rarr; <a href="accessible-description-link02.html"><code>&lt;a&gt;</code> where <code>title</code> should be accessible description</a></li>
      <li>&rarr; <a href="accessible-description-link03.html"><code>&lt;a&gt;</code> with no accessible description</a></li>
    </ul>
  </section>
  <hr>

  <section id="accessible-input">
    <h2><code>&lt;input&gt;</code> accessible name and description tests</h2>
    <p>The purpose these tests is to show the cascade order of how accessible names are applied in the accessibility tree for <code>&lt;input&gt;</code> elements. <em>These examples should not be considered proper practice</em>.</p>
    <ul class="main-list">
      <li>&rarr; <a href="accessible-name-input01.html"><code>&lt;input&gt;</code> where <code>aria-labelledby</code> should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-input02.html"><code>&lt;input&gt;</code> where <code>aria-label</code> should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-input03.html"><code>&lt;input&gt;</code> where <code>&lt;label&gt;</code> should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-input04.html"><code>&lt;input&gt;</code> where <code>title</code> should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-input05.html"><code>&lt;input&gt;</code> where <code>placeholder</code> should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-input06.html"><code>&lt;input&gt;</code> with no accessible name</a></li>
    </ul>
    <p>The purpose these tests is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <code>&lt;input&gt;</code> element.</p>
    <ul class="main-list">
      <li>&rarr; <a href="accessible-description-input01.html"><code>&lt;input&gt;</code> where <code>aria-describedby</code> should be accessible description</a></li>
      <li>&rarr; <a href="accessible-description-input02.html"><code>&lt;input&gt;</code> where <code>title</code> should be accessible description</a></li>
      <li>&rarr; <a href="accessible-description-input03.html"><code>&lt;input&gt;</code> with no accessible description</a></li>
    </ul>
  </section>
  <hr>

  <section id="accessible-table">
    <h2><code>&lt;table&gt;</code> accessible name tests</h2>
    <p>The purpose these tests is to show the cascade order of how accessible names are applied in the accessibility tree for <code>&lt;table&gt;</code> elements. <em>These examples should not be considered proper practice</em>.</p>
    <ul class="main-list">
      <li>&rarr; <a href="accessible-name-table01.html"><code>&lt;table&gt;</code> where <code>aria-labelledby</code> should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-table02.html"><code>&lt;table&gt;</code> where <code>aria-label</code> should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-table03.html"><code>&lt;table&gt;</code> where <code>&lt;caption&gt;</code> content should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-table04.html"><code>&lt;table&gt;</code> where <code>title</code> should be accessible name</a></li>
      <li>&rarr; <a href="accessible-name-table05.html"><code>&lt;table&gt;</code> with no accessible name</a></li>
    </ul>
    <p>The purpose these tests is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <code>&lt;table&gt;</code> element.</p>
    <ul class="main-list">
      <li>&rarr; <a href="accessible-description-table01.html"><code>&lt;table&gt;</code> where <code>aria-describedby</code> should be accessible description</a></li>
      <li>&rarr; <a href="accessible-description-table02.html"><code>&lt;table&gt;</code> where <code>title</code> should be accessible description</a></li>
      <li>&rarr; <a href="accessible-description-table03.html"><code>&lt;table&gt;</code> with no accessible description</a></li>
    </ul>
  </section>
  <hr>

  <section id="invalid">
    <h2><code>aria-invalid</code> tests</h2>
    <p>Tests to determine how the <code>aria-invalid</code> attribute is announced.</p>
    <ul class="main-list">
      <li>&rarr; <a href="invalid01.html"><code>&lt;input&gt;</code> with <code>aria-invalid="true"</code></a></li>
      <li>&rarr; <a href="invalid02.html"><code>&lt;input&gt;</code> with <code>aria-invalid="false"</code></a></li>
      <li>&rarr; <a href="invalid03.html"><code>&lt;input&gt;</code> with <code>aria-invalid="grammar"</code></a></li>
      <li>&rarr; <a href="invalid04.html"><code>&lt;input&gt;</code> with <code>aria-invalid="spelling"</code></a></li>
    </ul>
    <p><a class="button-secondary small" href="support-aria-invalid.html">aria-invalid support chart</a></p>
  </section>
  <hr>

  <section id="attributes">
    <h2>Form-based attribute tests</h2>
    <p>Tests to determine how <code>max</code>, <code>aria-valuemax</code>, <code>min</code>, <code>aria-valuemin</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code> and <code>pattern</code> attributes are announced.</p>
    <ul class="main-list">
      <li>&rarr; <a href="attributes01.html"><code>&lt;input&gt;</code> with <code>max</code></a></li>
      <li>&rarr; <a href="attributes02.html"><code>&lt;input&gt;</code> with <code>aria-valuemax</code></a></li>
      <li>&rarr; <a href="attributes03.html"><code>&lt;input&gt;</code> with <code>max</code> and <code>aria-valuemax</code></a></li>
      <li>&rarr; <a href="attributes04.html"><code>&lt;input&gt;</code> with <code>min</code></a></li>
      <li>&rarr; <a href="attributes05.html"><code>&lt;input&gt;</code> with <code>aria-valuemin</code></a></li>
      <li>&rarr; <a href="attributes06.html"><code>&lt;input&gt;</code> with <code>min</code> and <code>aria-valuemin</code></a></li>
      <li>&rarr; <a href="attributes07.html"><code>&lt;input&gt;</code> with <code>maxlength</code></a></li>
      <li>&rarr; <a href="attributes08.html"><code>&lt;input&gt;</code> with <code>minlength</code></a></li>
      <li>&rarr; <a href="attributes09.html"><code>&lt;input&gt;</code> with <code>multiple</code></a></li>
      <li>&rarr; <a href="attributes10.html"><code>&lt;input&gt;</code> with <code>pattern</code></a></li>
    </ul>
    <p><a class="button-secondary small" href="support-form-attributes.html">Form attributes support chart</a></p>
  </section>
  <hr>

  <section id="disabled">
    <h2><code>disabled</code> attribute tests</h2>
    <p>Tests to determine how the boolean <code>disabled</code> attribute is announced.</p>
    <ul class="main-list">
      <li>&rarr; <a href="disabled01.html"><code>&lt;button&gt;</code> with <code>disabled</code></a></li>
      <li>&rarr; <a href="disabled02.html"><code>&lt;input</code> with <code>disabled</code></a></li>
      <li>&rarr; <a href="disabled03.html"><code>&lt;textarea&gt;</code> with <code>disabled</code></a></li>
      <li>&rarr; <a href="disabled04.html"><code>&lt;select&gt;</code> with <code>disabled</code></a></li>
      <li>&rarr; <a href="disabled05.html"><code>&lt;option&gt;</code> with <code>disabled</code></a></li>
      <li>&rarr; <a href="disabled06.html"><code>&lt;fieldset&gt;</code> with <code>disabled</code></a></li>
    </ul>
    <p><a class="button-secondary small" href="support-disabled-fields.html"><code>disabled</code> attribute support chart</a></p>
  </section>
  <hr>

  <section id="landmark">
    <h2>ARIA landmark tests</h2>
    <p>Tests to determine how various landmarks are announced.</p>
    <h3>Landmarks without labels</h3>
    <ul class="main-list">
      <li>&rarr; <a href="landmarks-article01.html"><code>&lt;article&gt;</code></a></li>
      <li>&rarr; <a href="landmarks-aside01.html"><code>&lt;aside&gt;</code></a></li>
      <li>&rarr; <a href="landmarks-aside02.html"><code>role="complementary"</code></a></li>
      <li>&rarr; <a href="landmarks-footer01.html"><code>&lt;footer&gt;</code></a></li>
      <li>&rarr; <a href="landmarks-footer02.html"><code>role="contentinfo"</code></a></li>
      <li>&rarr; <a href="landmarks-form.html"><code>role="form"</code></a></li>
      <li>&rarr; <a href="landmarks-banner01.html"><code>&lt;header&gt;</code></a></li>
      <li>&rarr; <a href="landmarks-banner02.html"><code>role="banner"</code></a></li>
      <li>&rarr; <a href="landmarks-main01.html"><code>&lt;main&gt;</code></a></li>
      <li>&rarr; <a href="landmarks-main02.html"><code>role="main"</code></a></li>
      <li>&rarr; <a href="landmarks-nav01.html"><code>&lt;nav&gt;</code></a></li>
      <li>&rarr; <a href="landmarks-nav02.html"><code>role="navigation"</code></a></li>
      <li>&rarr; <a href="landmarks-search.html"><code>role="search"</code></a></li>
      <li>&rarr; <a href="landmarks-section01.html"><code>&lt;section&gt;</code></a></li>
      <li>&rarr; <a href="landmarks-section02.html"><code>role="region"</code></a></li>
    </ul>
    <h3>Landmarks with <code>aria-labelledby</code></h3>
    <ul class="main-list">
      <li>&rarr; <a href="landmarks-article02.html"><code>&lt;article&gt;</code> with <code>aria-labelledby</code></a></li>
      <li>&rarr; <a href="landmarks-aside03.html"><code>&lt;aside&gt;</code> with <code>aria-labelledby</code></a></li>
      <li>&rarr; <a href="landmarks-footer03.html"><code>&lt;footer&gt;</code> with <code>aria-labelledby</code></a></li>
      <li>&rarr; <a href="landmarks-banner23.html"><code>&lt;header&gt;</code> with <code>aria-labelledby</code></a></li>
      <li>&rarr; <a href="landmarks-main03.html"><code>&lt;main&gt;</code> with <code>aria-labelledby</code></a></li>
      <li>&rarr; <a href="landmarks-nav03.html"><code>&lt;nav&gt;</code> with <code>aria-labelledby</code></a></li>
      <li>&rarr; <a href="landmarks-section03.html"><code>&lt;section&gt;</code> with <code>aria-labelledby</code></a></li>
    </ul>
    <h3>Landmarks with <code>aria-label</code></h3>
    <ul class="main-list">
      <li>&rarr; <a href="landmarks-article03.html"><code>&lt;article&gt;</code> with <code>aria-label</code></a></li>
      <li>&rarr; <a href="landmarks-aside04.html"><code>&lt;aside&gt;</code> with <code>aria-label</code></a></li>
      <li>&rarr; <a href="landmarks-footer04.html"><code>&lt;footer&gt;</code> with <code>aria-label</code></a></li>
      <li>&rarr; <a href="landmarks-banner24.html"><code>&lt;header&gt;</code> with <code>aria-label</code></a></li>
      <li>&rarr; <a href="landmarks-main04.html"><code>&lt;main&gt;</code> with <code>aria-label</code></a></li>
      <li>&rarr; <a href="landmarks-nav04.html"><code>&lt;nav&gt;</code> with <code>aria-label</code></a></li>
      <li>&rarr; <a href="landmarks-section04.html"><code>&lt;section&gt;</code> with <code>aria-label</code></a></li>
    </ul>
    <p><a class="button-secondary small" href="support-landmarks.html">Landmark support chart</a></p>
  </section>
  <hr>

  <section id="header">
    <h2><code>&lt;header&gt;</code> scope tests</h2>
    <p>When the <code>&lt;header&gt;</code> element is scoped to the <code>&lt;body&gt;</code> element, it will have an implicit ARIA role of <code>banner</code>. Similarly, when the <code>&lt;footer&gt;</code> element is scoped to the <code>&lt;body&gt;</code> element, it will have an implicit ARIA role of <code>contentinfo</code>.</p>
    <p>However, these two elements will not have implicit ARIA roles if they are descendants of the following elements:<code>&lt;article&gt;</code>, <code>&lt;aside&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;nav&gt;</code>, <code>&lt;section&gt;</code></p>
    <p>These cases are designed to test whether the <code>&lt;header&gt;</code> element's implicit ARIA role is announced.</p>
    <h3><code>&lt;header&gt;</code> scoped to the <code>&lt;body&gt;</code> element - implicit ARIA role should be present</h3>
    <ul class="main-list">
      <li>&rarr; <a href="landmarks-banner01.html"><code>&lt;header&gt;</code></a></li>
      <li>&rarr; <a href="landmarks-banner02.html"><code>role="banner"</code></a></li>
      <li>&rarr; <a href="landmarks-banner05.html"><code>&lt;header&gt;</code> descendant of <code>role="article"</code></a></li>
      <li>&rarr; <a href="landmarks-banner09.html"><code>&lt;header&gt;</code> descendant of <code>role="complementary"</code></a></li>
      <li>&rarr; <a href="landmarks-banner13.html"><code>&lt;header&gt;</code> descendant of <code>role="main"</code></a></li>
      <li>&rarr; <a href="landmarks-banner17.html"><code>&lt;header&gt;</code> descendant of <code>role="navigation"</code></a></li>
      <li>&rarr; <a href="landmarks-banner21.html"><code>&lt;header&gt;</code> descendant of <code>role="region"</code></a></li>
    </ul>
    <h3>&lt;header&gt; scoped to other elements - implicit ARIA role should be absent</h3>
    <ul class="main-list">
      <li>&rarr; <a href="landmarks-banner03.html"><code>&lt;header&gt;</code> descendant of <code>&lt;article&gt;</code></a> scoped to the <code>&lt;article&gt;</code> element</li>
      <li>&rarr; <a href="landmarks-banner07.html"><code>&lt;header&gt;</code> descendant of <code>&lt;aside&gt;</code></a> scoped to the <code>&lt;aside&gt;</code> element</li>
      <li>&rarr; <a href="landmarks-banner11.html"><code>&lt;header&gt;</code> descendant of <code>&lt;main&gt;</code></a> scoped to the <code>&lt;main&gt;</code> element</li>
      <li>&rarr; <a href="landmarks-banner15.html"><code>&lt;header&gt;</code> descendant of <code>&lt;nav&gt;</code></a> scoped to the <code>&lt;nav&gt;</code> element</li>
      <li>&rarr; <a href="landmarks-banner19.html"><code>&lt;header&gt;</code> descendant of <code>&lt;section&gt;</code></a>scoped to the <code>&lt;section&gt;</code> element</li>
    </ul>
    <p><a class="button-secondary small" href="support-header-scope.html">Header scope support chart</a></p>
  </section>
  <hr>

  <section id="rotor">
    <h2>VoiceOver Rotor tests</h2>
    <p>Tests to determine if the VoiceOver Rotor displays the landmark information as announced.</p>
    <ul class="main-list">
      <li>&rarr; <a href="voiceover01.html">VoiceOver test without ARIA roles</a></li>
      <li>&rarr; <a href="voiceover02.html">VoiceOver test with ARIA roles</a></li>
      <li>&rarr; <a href="voiceover03.html">VoiceOver test with <code>aria-labelledby</code></a></li>
      <li>&rarr; <a href="voiceover04.html">VoiceOver test with <code>aria-label</code></a></li>
    </ul>
    <p><a class="button-secondary small" href="support-voiceover-rotor.html">VoiceOver Rotor support chart</a></p>
  </section>
  <hr>

  <section aria-label="Other tests">
    <p><a href="x-other-tests/index.html">Other tests</a></p>
  </section>
  <hr>

  <section class="details">
    <h2 id="technology">Technology details</h2>
    <p>OSX Catalina - 10.15.7</p>
    <ul>
      <li>Chrome 88</li>
      <li>Firefox 86</li>
      <li>Safari 14</li>
    </ul>
    <p>Windows 10 Enterprise:</p>
    <ul>
      <li>Chrome 87</li>
      <li>Firefox 86</li>
      <li>Edge 88</li>
    </ul>
    <p>Assistive Technologies</p>
    <ul>
      <li>VoiceOver</li>
      <li>NVDA - 2020.4</li>
      <li>JAWS 2021.2102.34 - February 2021</li>
    </ul>
  </section>
</body>
</html>


<|start_filename|>support-disabled-fields.html<|end_filename|>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled field support chart</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 class="body-wide">
  <h1><code>disabled</code> field support chart</h1>
  <p>&larr; <a href="index.html">Return to main list</a></p>
  <table>
    <thead>
     <tr>
        <th>&nbsp;</th>
        <th>VoiceOver Chrome</th>
        <th>VoiceOver Firefox</th>
        <th>VoiceOver Safari</th>
        <th>NVDA Chrome</th>
        <th>NVDA Firefox</th>
        <th>NVDA Edge</th>
        <th>JAWS Edge</th>
        <th>JAWS Edge</th>
     </tr>
    </thead>
    <tbody>
      <tr>
        <th><a href="disabled01.html"><code>&lt;button&gt;</code> with <code>disabled</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="disabled02.html"><code>&lt;input&gt;</code> with <code>disabled</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="disabled03.html"><code>&lt;textarea&gt;</code> with <code>disabled</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="disabled04.html"><code>&lt;select&gt;</code> with <code>disabled</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="disabled05.html"><code>&lt;option&gt;</code> with <code>disabled</code></a></th>
        <td class="announced">Announced</td>
        <td class="not-announced">Option not announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Option not announced</td>
        <td class="not-announced">Option not announced</td>
        <td class="not-announced">Option not announced</td>
        <td class="not-announced">Option not announced</td>
        <td class="not-announced">Option not announced</td>
      </tr>
      <tr>
        <th><a href="disabled06.html"><code>&lt;fieldset&gt;</code> with <code>disabled</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Option not announced</td>
        <td class="not-announced">Option not announced</td>
      </tr>
    </tbody>
  </table>
</body>
</html>


<|start_filename|>x-other-tests/progress-stepper-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Progress stepper test 1</title>
    <link rel="stylesheet" href="assets/css/test.css">
<style>
  .row {
    margin: 2em 0;
    overflow: hidden;
    background: #ddd;
    font-size: .9em;
  }

  .col-xs-4 {
    float: left;
    width: 20%;
    margin: 0;
    text-align: center;
    color: #666;
    background: #eee;
    padding: .5em;
    margin: 0 .5em 0 0;
  }

  .active {
    color: #000;
    font-weight: bold;
  }
</style>
  </head>
  <body>
    <main>
      <h1>Progress stepper test 1</h1>
      <p>This stepper example is to help resolve the <a href="https://pay.ami.co.nz/search" target="_blank">AMI Make a payment stepper</a> and uses the <a href="https://www.telerik.com/kendo-angular-ui/components/layout/stepper/step-types/" type="radio">Kendo stepper</a> as a starting point.</p>
      <p>&larr; <a href="index.html">Index page</a></p>
      <hr>

      <h2>Example 01: Step 1 active</h2>
      <div class="col-sm-6 col-xs-12 nav-indicators" id="progressBar">
        <div class="row titles">
          <div class="col-sm-2 col-4 col-sm-2 active">
            <div tabindex="0">
              <div aria-hidden="true" class="font-xs">Search</div>
              <div aria-current="step" class="sr-only">You are currently on step 1 of 3. Search.</div>
            </div>
          </div>
          <div class="col-sm-2 col-4 col-sm-6">
            <div>
              <div aria-hidden="true" class="font-xs">Confirm</div>
              <div class="sr-only">Step 2 of 3. Confirm your details. Not completed.</div>
            </div>
          </div>
          <div class="col-sm-2 col-4 col-sm-2">
            <div>
              <div aria-hidden="true" class="font-xs">Pay</div>
              <div class="sr-only">Step 3 of 3. Make a payment. Not completed.</div>
            </div>
          </div>
        </div>
        <div class="row bars offset-2 offset-sm-1">
          <div class="col-4 u-pad-l--4 active"></div>
          <div class="col-4"></div>
        </div>
      </div>
      <h3>Code</h3>
<pre><code>&lt;div class="active" <span>tabindex="0"</span>&gt;
  &lt;span <span>aria-hidden="true"</span>&gt;Search&lt;/span&gt;
  &lt;span <span>aria-current="step" class="sr-only"</span>&gt;
    You are currently on step 1 of 3. Search.
  &lt;/span&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;span <span>aria-hidden="true"</span>&gt;Confirm&lt;/span&gt;
  &lt;span <span>class="sr-only"</span>&gt;
    Step 2 of 3. Confirm your details. Not completed.
  &lt;/span&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;span <span>aria-hidden="true"</span>&gt;Pay&lt;/span&gt;
  &lt;span <span>class="sr-only"</span>&gt;
    Step 3 of 3. Make a payment. Not completed.
  &lt;/span&gt;
&lt;/div&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Example 02: Step 2 active</h2>
      <div class="nav-indicators col-sm-12" id="progressBar">
        <div class="row">
          <div class="col-xs-4">
            <span aria-hidden="true">Search</span>
            <span class="sr-only">Step 1 of 3. Search. Completed.</span>
          </div>
          <div class="col-xs-4 active" tabindex="0">
            <span aria-hidden="true">Confirm</span>
            <span aria-current="step" class="sr-only">You are currently on step 2 of 3. Confirm your details.</span>
          </div>
          <div class="col-xs-4">
            <span aria-hidden="true">Pay</span>
            <span class="sr-only">Step 3 of 3. Make a payment. Not completed.</span>
          </div>
        </div>
      </div>
      <h3>Code</h3>
<pre><code>&lt;div&gt;
  &lt;span <span>aria-hidden="true"</span>&gt;Search&lt;/span&gt;
  &lt;span <span>class="sr-only"</span>&gt;
    Step 1 of 3. Search. Completed.
  &lt;/span&gt;
&lt;/div&gt;

&lt;div class="active" <span>tabindex="0"</span>&gt;
  &lt;span <span>aria-hidden="true"</span>&gt;Confirm&lt;/span&gt;
  &lt;span <span>aria-current="step" class="sr-only"</span>&gt;
    You are currently on step 2 of 3. Confirm your details.
  &lt;/span&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;span <span>aria-hidden="true"</span>&gt;Pay&lt;/span&gt;
  &lt;span <span>class="sr-only"</span>&gt;
    Step 3 of 3. Make a payment. Not completed.
  &lt;/span&gt;
&lt;/div&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Example 03: Step 3 active</h2>
      <div class="nav-indicators col-sm-12" id="progressBar">
        <div class="row">
          <div class="col-xs-4">
            <span aria-hidden="true">Search</span>
            <span class="sr-only">Step 1 of 3. Search. Completed.</span>
          </div>
          <div class="col-xs-4">
            <span aria-hidden="true">Confirm</span>
            <span class="sr-only">Step 2 of 3. Confirm your details. Completed.</span>
          </div>
          <div class="col-xs-4 active" tabindex="0">
            <span aria-hidden="true">Pay</span>
            <span aria-current="step" class="sr-only">You are currently on step 3 of 3. Make a payment.</span>
          </div>
        </div>
      </div>
      <h3>Code</h3>
<pre><code>&lt;div&gt;
  &lt;div&gt;
    &lt;span <span>aria-hidden="true"</span>&gt;Search&lt;/span&gt;
    &lt;span <span>class="sr-only"</span>&gt;
      Step 1 of 3. Search. Completed.
    &lt;/span&gt;
  &lt;/div&gt;

  &lt;div&gt;
    &lt;span <span>aria-hidden="true"</span>&gt;Confirm&lt;/span&gt;
    &lt;span <span>class="sr-only"</span>&gt;
      Step 2 of 3. Confirm your details. Completed.
    &lt;/span&gt;
  &lt;/div&gt;

  &lt;div class="active" <span>tabindex="0"</span>&gt;
    &lt;span <span>aria-hidden="true"</span>&gt;Pay&lt;/span&gt;
    &lt;span <span>aria-current="step" class="sr-only"</span>&gt;
      You are currently on step 3 of 3. Make a payment.
    &lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>



<|start_filename|>x-other-tests/error-message-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Error message test</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>Error message test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>The KANA system does not allow separate error messages as per the Chroma system. Errors are flagged with strong red text, but nothing programatic for screen readers. These two tests are to determine if and where an error message can be presented to screen readers</p>
      <hr>

      <h2>Example 01: <code>aria-label</code> applied to the<code>&lt;label&gt;</code> element</h2>
      <form action="#">
        <div class="form-container">
          <label class="label" for="two" aria-label="Error: What is the time">Address</label>
          <input class="input" type="text" id="two">
        </div>
      </form>
      <h3>Code</h3>
<pre><code>&lt;form action="#"&gt;
  &lt;div class="form-container"&gt;
    &lt;label for="two" <span>aria-label="Error: What is the time"</span>&gt;Address&lt;/label&gt;
    &lt;input class="input" type="text" id="two"&gt;
  &lt;/div&gt;
&lt;/form&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Example 02: Hidden information inside <code>&lt;label&gt;</code> element</h2>
      <form action="#">
        <div class="form-container">
          <label class="label" for="three">
            <span class="sr-only">Error:</span>
            Email
          </label>
          <input class="input" type="text" id="three">
        </div>
      </form>
      <h3>Code</h3>
<pre><code>&lt;form action="#"&gt;
  &lt;div class="form-container"&gt;
    &lt;label class="label" for="three"&gt;
      <span>&lt;span class="sr-only"&gt;Error:&lt;/span&gt;</span>
      Email
    &lt;/label&gt;
    &lt;input class="input" type="text" id="three"&gt;
  &lt;/div&gt;
&lt;/form&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Results</h2>
      <p>The first example works in all browser/screen reader combinations EXCEPT Chroma/VoiceOver. Adding an <code>aria-label</code> to the label means that the <code>&lt;label&gt;</code> is completely ignored in this browser/screen reader combination.</p>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>


<|start_filename|>x-other-tests/non-native-dropdown-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Non-native dropdown test</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>Non-native dropdown test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>These tests are to determine how different online examples mark up non-native dropdown lists.</p>
      <hr>

      <h2>Example 01: <code>&lt;li&gt;</code> items</h2>
      <button class="button" aria-haspopup="listbox" aria-labelledby="aaa bbb" id="aaa">Choose a fruit</button>
      <ul
        role="listbox"
        aria-activedescendant="bbb"
      >
        <li id="bbb" role="option" aria-selected="true">Apple</li>
        <li id="ccc" role="option">Banana</li>
      </ul>
      <h3>Code</h3>
<pre><code>&lt;button
  aria-haspopup="listbox"
  aria-labelledby="aaa bbb"
  id="aaa"
&gt;
  Choose a fruit
&lt;/button&gt;
&lt;ul role="listbox" aria-activedescendant="bbb"&gt;
  &lt;li id="bbb" role="option" aria-selected="true"&gt;Apple&lt;/li&gt;
  &lt;li id="ccc" role="option"&gt;Banana&lt;/li&gt;
&lt;/ul&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Example 02: <code>&lt;a&gt;</code> items</h2>
      <button class="button" role="combobox">Choose a fruit</button>
      <ul role="presentation">
        <li><a role="option" aria-selected="true" href="#">Apple</a></li>
        <li><a role="option" href="#">Banana</a></li>
      </ul>
      <h3>Code</h3>
<pre><code>&lt;button role="combobox"&gt;Choose a fruit&lt;/button&gt;
&lt;ul role="presentation"&gt;
  &lt;li&gt;&lt;a role="option" aria-selected="true" href="#"&gt;Apple&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a role="option" href="#"&gt;Banana&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
</body>
</html>


<|start_filename|>x-other-tests/select-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>select test</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>&lt;select&gt; test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>This test is to determine if the label is announced when associated with a &lt;select&gt; element.</p>
      <hr>

      <h2>Example</h2>
      <form action="#">
        <label class="label" for="one">Subscribe</label>
        <select class="select" id="one">
          <option>Choose an option</option>
          <option value="red">Red</option>
          <option value="green">Green</option>
          <option value="blue">Blue</option>
        </select>
      </form>
      <h3>Code</h3>
<pre><code>&lt;form action="#"&gt;
  &lt;label <span>for="one"</span>&gt;Subscribe&lt;/label&gt;
  &lt;select <span>id="one"</span>&gt;
    &lt;option&gt;Choose an option&lt;/option&gt;
    &lt;option value="red"&gt;Red&lt;/option&gt;
    &lt;option value="green"&gt;Green&lt;/option&gt;
    &lt;option value="blue"&gt;Blue&lt;/option&gt;
  &lt;/select&gt;
&lt;/form&gt;</code></pre>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>


<|start_filename|>support-help-error-messages.html<|end_filename|>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Help text and error message support chart</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 class="body-wide">
  <h1>Help text and error message support chart</h1>
  <p>&larr; <a href="index.html">Return to main list</a></p>
  <table>
    <thead>
     <tr>
        <th>&nbsp;</th>
        <th>VoiceOver Chrome</th>
        <th>VoiceOver Firefox</th>
        <th>VoiceOver Safari</th>
        <th>NVDA Chrome</th>
        <th>NVDA Firefox</th>
        <th>NVDA Edge</th>
        <th>JAWS Edge</th>
        <th>JAWS Firefox</th>
        <th>JAWS Edge</th>
     </tr>
    </thead>
    <tbody>
      <tr>
        <th><a href="input-help-text-wrapped-label.html"><code>&lt;input&gt;</code> with help text wrapped inside <code>&lt;label&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Additional content not announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="input-help-text-aria-describedby.html"><code>&lt;input&gt;</code> with help text using <code>aria-describedby</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="input-help-text-aria-label.html"><code>&lt;input&gt;</code> with help text as an <code>aria-label</code></a></th>
        <td class="announced">Announced</td>
        <td class="not-announced">aria-label not announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr class="section">
        <th><a href="input-error-message-wrapped-label.html"><code>&lt;input&gt;</code> with error message wrapped inside <code>&lt;label&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Error message not announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="input-error-message-aria-describedby.html"><code>&lt;input&gt;</code> with error message using <code>aria-describedby</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="input-error-message-aria-errormessage.html"><code>&lt;input&gt;</code> with error message using <code>aria-errormessage</code></a></th>
        <td class="not-announced">Error message not announced</td>
        <td class="not-announced">Error message not announced</td>
        <td class="not-announced">Error message not announced</td>
        <td class="not-announced">Error message not announced</td>
        <td class="not-announced">Error message not announced</td>
        <td class="not-announced">Error message not announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="input-error-message-title.html"><code>&lt;input&gt;</code> with error message using <code>title</code></a></th>
        <td class="announced">Announced - not recommended</td>
        <td class="announced">Announced - not recommended</td>
        <td class="announced">Announced - not recommended</td>
        <td class="announced">Announced - not recommended</td>
        <td class="announced">Announced - not recommended</td>
        <td class="announced">Announced - not recommended</td>
        <td class="announced">Announced - not recommended</td>
        <td class="announced">Announced - not recommended</td>
        <td class="announced">Announced - not recommended</td>
      </tr>
      <tr>
        <th><a href="input-error-message-title-aria-describedby.html"><code>&lt;input&gt;</code> with error message using <code>aria-describedby</code> and <code>title</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="input-error-message-hidden-aria-describedby.html"><code>&lt;input&gt;</code> with error message using hidden <code>aria-describedby</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
    </tbody>
  </table>
</body>
</html>


<|start_filename|>x-other-tests/fieldset-button-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Fieldset test</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>Fieldset test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>This test is to determine if Firefox and Safari will allow focus on links, form controls and buttons.</p>
      <hr>

      <h2>Example</h2>
      <form action="#">
        <fieldset>
          <legend>Choose a method</legend>
          <button class="button">Australia only</button>
          <button class="button">Overseas</button>
        </fieldset>
      </form>
      <h3>Code</h3>
<pre><code>&lt;form action="#"&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Choose a method&lt;/legend&gt;
    &lt;button class="button"&gt;Australia only&lt;/button&gt;
    &lt;button class="button"&gt;Overseas&lt;/button&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</code></pre>
       <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>


<|start_filename|>support-basic-form-controls.html<|end_filename|>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic form controls support chart</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 class="body-wide">
  <h1>Basic form controls support chart</h1>
  <p>&larr; <a href="index.html">Return to main list</a></p>
  <table>
    <thead>
     <tr>
        <th>&nbsp;</th>
        <th>VoiceOver Chrome</th>
        <th>VoiceOver Firefox</th>
        <th>VoiceOver Safari</th>
        <th>NVDA Chrome</th>
        <th>NVDA Firefox</th>
        <th>NVDA Edge</th>
        <th>JAWS Edge</th>
        <th>JAWS Firefox</th>
        <th>JAWS Edge</th>
     </tr>
    </thead>
    <tbody>
      <tr>
        <th><a href="01-input-button.html"><code>&lt;input type="button"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-checkbox.html"><code>&lt;input type="checkbox"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-color.html"><code>&lt;input type="color"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr>
        <th><a href="01-input-date.html"><code>&lt;input type="date"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-datetime-local.html"><code>&lt;input type="datetime-local"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-email.html"><code>&lt;input type="email"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-file.html"><code>&lt;input type="file"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-month.html"><code>&lt;input type="month"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-number.html"><code>&lt;input type="number"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-password.html"><code>&lt;input type="password"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-radio.html"><code>&lt;input type="radio"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-range.html"><code>&lt;input type="range"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-reset.html"><code>&lt;input type="reset"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-search.html"><code>&lt;input type="search"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-submit.html"><code>&lt;input type="submit"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-tel.html"><code>&lt;input type="tel"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-text.html"><code>&lt;input type="text"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-time.html"><code>&lt;input type="time"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-url.html"><code>&lt;input type="url"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="01-input-week.html"><code>&lt;input type="week"&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="04-button.html"><code>&lt;button&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="02-select.html"><code>&lt;select&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="02-select-multiple.html"><code>&lt;select&gt;</code> with <code>multiple</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="02-select-optgroup.html"><code>&lt;optgroup&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
        <td class="not-announced">Not announced</td>
        <td class="announced">Announced</td>
        <td class="not-announced">Not announced</td>
      </tr>
      <tr>
        <th><a href="03-textarea.html"><code>&lt;textarea&gt;</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
    </tbody>
  </table>
</body>
</html>


<|start_filename|>x-other-tests/chroma-formgroup-tests.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Chroma FormGroup error message tests</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>Chroma <code>FormGroup</code> error message tests</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>This test is to determine if the aria-label associated with the error-message component is over-riding the error message contents.</p>
      <hr>

      <h2>Example 01: <code>FormGroup</code> component with <code>aria-label</code> on message</h2>
      <div class="p-form-group" aria-live="polite">
        <label class="c-label" id="wgevm6nyd8_label" for="aaa"><NAME></label>
        <input id="aaa" class="c-input is-invalid" name="" required="" type="text" placeholder="" aria-invalid="true" aria-describedby="ErrorMessage1" value="">
        <div class="c-message u-mar-t--2" role="alert" id="ErrorMessage1" aria-label="error message">
          <i class="c-icon u-mar-r--1 u-font--16 i-times-circle u-text--red" aria-label="error Icon" aria-hidden="true"></i>
          <div class="c-message__content">
            <div>
              <p class="c-text  u-text--red">This is error message 1</p>
            </div>
          </div>
        </div>
      </div>
      <ul>
        <li>Accessible name: "<NAME>"</li>
        <li>Description: "error message"</li>
      </ul>
<pre><code>&lt;div class="p-form-group" aria-live="polite"&gt;
  &lt;label for="aaa"&gt;Full name&lt;/label&gt;
  &lt;input id="aaa" type="text" aria-invalid="true" <span>aria-describedby="e1"</span>&gt;
  &lt;div role="alert" <span>id="e1" aria-label="error message"</span>&gt;
    &lt;i aria-label="error Icon" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;div class="c-message__content"&gt;
      &lt;div&gt;
        &lt;p&gt;This is error message 1&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Example 02: <code>FormGroup</code> component without <code>aria-label</code> on message</h2>
      <div class="p-form-group" aria-live="polite">
        <label class="c-label" id="wgevm6nyd8_label" for="bbb">Full name</label>
        <input id="bbb" class="c-input is-invalid" name="" required="" type="text" placeholder="" aria-invalid="true" aria-describedby="ErrorMessage2" value="">
        <div class="c-message u-mar-t--2" role="alert" id="ErrorMessage2">
          <i class="c-icon u-mar-r--1 u-font--16 i-times-circle u-text--red" aria-label="error Icon" aria-hidden="true"></i>
          <div class="c-message__content">
            <div>
              <p class="c-text  u-text--red">This is error message 2</p>
            </div>
          </div>
        </div>
      </div>
      <ul>
        <li>Accessible name: "Full name"</li>
        <li>Description: "This is error message 2"</li>
      </ul>
<pre><code>&lt;div class="p-form-group" aria-live="polite"&gt;
  &lt;label for="bbb"&gt;Full name&lt;/label&gt;
  &lt;input id="bbb" type="text" aria-invalid="true" <span>aria-describedby="e2"</span>&gt;
  &lt;div role="alert" <span>id="e2"</span>&gt;
    &lt;i aria-label="error Icon" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;div class="c-message__content"&gt;
      &lt;div&gt;
        &lt;p&gt;This is error message 2&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Results</h2>
      <p>In the first case, the input references the message container via the <code>aria-describedby</code>, but the accessible name for the message container is being taken from the <code>aria-label</code> rather than the message container content.</p>
      <p>In the second case, the input references the message container via the <code>aria-describedby</code>, and the message container content is used as the accessible name.</p>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>


<|start_filename|>x-other-tests/space-inside-icon-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Space inside icon test</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>Space inside icon test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>This test is to determine if a non-breaking space inside an icon is announced to screen readers.</p>
      <hr>

      <h2>Example 01: icon with space</h2>
      <p>Some text before icon: <i class="button">&nbsp;</i></p>
      <h3>Code</h3>
<pre><code>Some text before icon: &lt;i&gt;&nbsp;&lt;/i&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Example 01: icon with space</h2>
      <p>Some text before icon: <i class="button" aria-hidden="true">&nbsp;</i></p>
      <h3>Code</h3>
<pre><code>Some text before icon: &lt;i <span>aria-hidden="true"</span>&gt;&nbsp;&lt;/i&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Results</h2>
      <ul>
        <li><b>Windows/NVDA</b>: Using read mode, the icon is <i>not announced</i>, so this does not present issues.</li>
        <li><b>Windows/JAWS</b>: Using read mode, the icon is <i>announced as a silent character</i>, which could be confusing.</li>
        <li><b>OSX/Voiceover</b>: Using read mode, the icon is <i>announced as "Group"</i>, which could be confusing </li>
      </ul>
      <p>Recommendation: Apply <code>aria-hidden="true"</code> to hide the element from the Accessibility Tree.</p>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
</body>
</html>


<|start_filename|>accessible-description-table03.html<|end_filename|>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>table with no accessible description</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><code>&lt;table&gt;</code> with no accessible description</h1>
  <p>&larr; <a href="index.html">Return to main list</a></p>
  <p>The purpose this test is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <code>&lt;table&gt;</code> element. The priority order from highest to lowest is:</p>
  <ol>
    <li><a href="accessible-description-table01.html">If present, use <code>aria-describedby</code> value.</a></li>
    <li><a href="accessible-description-table01.html">Otherwise, if present, use <code>title</code> value (as per the "Rabbit" example below)</a>.</li>
    <li><b>If none of the above are provided, there is no accessible description</b>.</li>
  </ol>
  <p>This example should not be considered proper practice, and is for testing purposes only.</p>
  <h2>Example</h2>
  <table>
    <caption>Animals</caption>
    <thead>
      <tr>
        <th>Fishes</th>
        <th>Birds</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Snapper</td>
        <td>Starling</td>
      </tr>
      <tr>
        <td>Salmon</td>
        <td>Eagle</td>
      </tr>
    </tbody>
  </table>
  <h2>Code</h2>
<!-- start code -->
<pre><code>&lt;table&gt;
  &lt;caption&gt;Animals&lt;/caption&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Fishes&lt;/th&gt;
      &lt;th&gt;Birds&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Snapper&lt;/td&gt;
      &lt;td&gt;Starling&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Salmon&lt;/td&gt;
      &lt;td&gt;Eagle&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
<!-- end code -->
  <h2>Assistive technologies</h2>
  <div class="note">
    <h3>VoiceOver</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> Animals. Table. 2 Columns. 3 rows.</li>
      <li><b>Firefox:</b> Animals. Table. 2 Columns. 3 rows.</li>
      <li><b>Safari:</b> Animals. Table. 2 Columns. 3 rows.</li>
    </ul>
  </div>
  <div class="note">
    <h3>NVDA</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> Table with 3 rows and 2 columns. Caption. Animals.</li>
      <li><b>Firefox:</b> Table with 3 rows and 2 columns. Caption. Animals.</li>
      <li><b>Safari:</b> Table with 3 rows and 2 columns. Caption. Animals.</li>
    </ul>
  </div>
  <div class="note">
    <h3>JAWS</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> Table with 2 columns and 3 rows.</li>
      <li><b>Firefox:</b> Table with 2 columns and 3 rows.</li>
      <li><b>Safari:</b> Table with 2 columns and 3 rows.</li>
    </ul>
  </div>
  <p>&larr; <a href="index.html">Return to main list</a></p>
</body>
</html>


<|start_filename|>x-other-tests/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Other tests</title>
    <link rel="stylesheet" href="assets/css/test.css">
    <style>
      ul li { margin: 0 0 .5em; }
    </style>
  </head>
  <body>
    <main>
      <h1>Other tests</h1>
      <ul>
        <li><a href="alert01.html">alert test 01</a></li>
        <li><a href="alert02.html">alert test 02</a></li>
        <li><a href="autocomplete-attribute-test.html"><code>autocomplete</code> attribute test</a></li>
        <li><a href="autocomplete-component-test.html">Autocomplete component test</a></li>
        <li><a href="badge01.html">badge test 02</a></li>
        <li><a href="button-with-aria-label-test.html"><code>&lt;button&gt;</code> with <code>aria-label</code> test</a></li>
        <li><a href="chroma-formgroup-tests.html">Chroma <code>FormGroup</code> error message tests</a></li>
        <li><a href="clickable-label-test.html">Clickable <code>&lt;label&gt;</code> test</a></li>
        <li><a href="datalist-meter-progress-test.html"><code>&lt;datalist&gt;</code>, <code>&lt;meter&gt;</code> <code>&lt;progress&gt;</code> and <code>&lt;output&gt;</code> tests</a></li>
        <li><a href="display-test.html"><code>aria-hidden="true"</code>, <code>hidden</code> and <code>display:none</code> tests</a></li>
        <li><a href="empty-aria-label-test.html">Empty <code>aria-label</code> test</a></li>
        <li><a href="empty-id-name-attributes-test.html">Empty <code>id</code> and <code>name</code> attributes tests</a></li>
        <li><a href="error-message-test.html">Error message test</a></li>
        <li><a href="fieldset-button-test.html">Fieldset button test</a></li>
        <li><a href="firefox-focus-test.html">Firefox and Safari focus test</a></li>
        <li><a href="information-associated-with-radio-test.html">Information associated with radio buttons test</a></li>
        <li><a href="labelling-method-inside-table-cell-test.html">Labelling method inside table cell test</a></li>
        <li><a href="line-break-in-legend-test.html">Line break inside a <code>&lt;legend&gt;</code> test</a></li>
        <li><a href="list-test.html">Paragraph inside list item test</a></li>
        <li><a href="metadata-test.html">Metadata validation test</a></li>
        <li><a href="non-native-dropdown-test.html">non-native-dropdown-test</a></li>
        <li><a href="nz-answers.html">NZ questions and answers</a></li>
        <li><a href="progress-stepper-test.html">Progress stepper tests</a></li>
        <li><a href="select-test.html">&lt;select&gt; test</a></li>
        <li><a href="space-inside-icon-test.html">Space inside icontest</a></li>
        <li><a href="uppercase-test.html">Uppercase conversion in form controls test</a></li>
      </ul>
    </main>
  </body>
</html>


<|start_filename|>landmarks-banner20.html<|end_filename|>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>role="banner" descendant of section</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><code>role="banner"</code> descendant of <code>&lt;section&gt;</code></h1>
  <p>&larr; <a href="index.html">Return to main list</a></p>
  <p>This test case is designed to determine how the <code>role="banner"</code> will be announced by various screen readers when it is a descendant of the <code>&lt;section&gt;</code> element.</p>
  <p>In this case, the element <b>should be announced</b> as a <code>banner</code> landmark.</p>
  <p>By default, the element being tested does not receive focus, so the only way to test how it is announced is via:</p>
  <ul>
    <li><b>VoiceOver</b>: Announce next item: <kbd>VO</kbd> + <kbd>Right Arrow</kbd></li>
    <li><b>NVDA and JAWS</b>: Announce next line: <kbd>DOWN ARROW</kbd></li>
  </ul>
  <h2>Example</h2>
  <div class="example">
    <section class="inner-example">
      <h4>Other content</h4>
      <div role="banner" class="inner-example">
        <h4>Test content</h4>
      </div>
    </section>
  </div>
  <h2>Code</h2>
<!-- start code -->
<pre><code>&lt;section&gt;
  &lt;h4&gt;Other content&lt;/h4&gt;
  &lt;div role="banner"&gt;
    &lt;h4&gt;Test content&lt;/h4&gt;
  &lt;/div&gt;
&lt;/section&gt;</code></pre>
<!-- end code -->
  <h2>Assistive technologies</h2>
  <div class="note">
    <h3>VoiceOver</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> <span class="green">Banner</span>. [Stop] Test content. [Stop]. <span class="green">End of banner</span>.</li>
      <li><b>Firefox:</b> <span class="green">Banner</span>. [Stop] Test content. [Stop]. <span class="green">End of banner</span>.</li>
      <li><b>Safari:</b> <span class="green">Banner</span>. [Stop] Test content. [Stop]. <span class="green">End of banner</span>.</li>
    </ul>
  </div>
  <div class="note">
    <h3>NVDA</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> <span class="green">Banner landmark</span>. Test content.</li>
      <li><b>Firefox:</b> <span class="green">Banner landmark</span>. Test content.</li>
      <li><b>Edge:</b> <span class="green">Banner landmark</span>. Test content.</li>
    </ul>
  </div>
  <div class="note">
    <h3>JAWS</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> Test content. <span class="red">[Banner not announced]</span></li>
      <li><b>Firefox:</b> Test content. <span class="red">[Banner not announced]</span></li>
      <li><b>Edge:</b> Test content. <span class="red">[Banner not announced]</span></li>
    </ul>
  </div>
  <p>&larr; <a href="index.html">Return to main list</a></p>
</body>
</html>


<|start_filename|>x-other-tests/display-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>aria-hidden="true", hidden and display:none tests</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1><code>aria-hidden="true"</code>, <code>hidden</code> and <code>display:none</code> tests</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>These tests are to determine how <code>aria-hidden="true"</code> and <code>hidden</code> attributes, as well as the <code>display: none</code> CSS property are applied visually as well as how they are announced to screen readers.</p>
      <hr>

      <h2>The <code>aria-hidden="true"</code> attribute</h2>
      <p>The following information should be visible on screen but not announced to screen readers.</p>
      <p class="u-text--red"><span aria-hidden="true">Green spider</span>.</p>
      <h3>Code</h3>
<pre><code>&lt;span <span>aria-hidden="true"</span>&gt;Green spider&lt;/span&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>The <code>hidden</code> attribute</h2>
      <p>The following information should not be visible on screen and not announced to screen readers.</p>
      <p class="u-text--red"><span hidden>Yellow frog</span>.</p>
      <h3>Code</h3>
<pre><code>&lt;span <span>hidden</span>&gt;Yellow frog&lt;/span&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>The <code>display:none</code> CSS property/value</h2>
      <p>The following information should not be visible on screen and not announced to screen readers.</p>
      <p class="u-text--red"><span style="display: none;">Red wolf</span>.</p>
      <h3>Code</h3>
<pre><code>&lt;span <span>style="display: none;</span>"&gt;Red wolf&lt;/span&gt;</code></pre>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>


<|start_filename|>accessible-description-link03.html<|end_filename|>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>a with no accessible description</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><code>&lt;a&gt;</code> with no accessible description</h1>
  <p>&larr; <a href="index.html">Return to main list</a></p>
  <p>The purpose this test is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <code>&lt;a&gt;</code> element. The priority order from highest to lowest is:</p>
  <ol>
    <li><a href="accessible-description-link01.html">If present, use <code>aria-describedby</code> value (as per the "Cat" example below)</a>.</li>
    <li><a href="accessible-description-link02.html">Otherwise, if present, use <code>title</code> value</a>.</li>
    <li><b>If none of the above are provided, there is no accessible description.</b></li>
  </ol>
  <p>This example should not be considered proper practice, and is for testing purposes only.</p>
  <h2>Example</h2>
  <form action="#">
    <div class="form-group">
      <a class="button" href="#">Fish</a>
    </div>
  </form>
  <h2>Code</h2>
<!-- start code -->
<pre><code>&lt;a href="#"&gt;Fish&lt;/a&gt;</code></pre>
<!-- end code -->
  <h2>Assistive technologies</h2>
  <div class="note">
    <h3>VoiceOver</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> Link. Fish.</li>
      <li><b>Firefox:</b> Link. Fish.</li>
    </ul>
  </div>
  <div class="note">
    <h3>NVDA</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> Fish. Link.</li>
      <li><b>Firefox:</b> Fish. Link.</li>
      <li><b>Edge:</b> Fish. Link.</li>
    </ul>
  </div>
  <div class="note">
    <h3>JAWS</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> Fish. Link.</li>
      <li><b>Firefox:</b> Fish. Link.</li>
      <li><b>Edge:</b> Fish. Link.</li>
    </ul>
  </div>
  <p>&larr; <a href="index.html">Return to main list</a></p>
</body>
</html>


<|start_filename|>support-aria-invalid.html<|end_filename|>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>aria-invalid support chart</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 class="body-wide">
  <h1><code>aria-invalid</code> support chart</h1>
  <p>&larr; <a href="index.html">Return to main list</a></p>
  <table>
    <thead>
     <tr>
        <th>&nbsp;</th>
        <th>VoiceOver Chrome</th>
        <th>VoiceOver Firefox</th>
        <th>VoiceOver Safari</th>
        <th>NVDA Chrome</th>
        <th>NVDA Firefox</th>
        <th>NVDA Edge</th>
        <th>JAWS Edge</th>
        <th>JAWS Firefox</th>
        <th>JAWS Edge</th>
     </tr>
    </thead>
    <tbody>
      <tr>
        <th><a href="invalid01.html"><code>&lt;input&gt;</code> with <code>aria-invalid="true"</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="invalid02.html"><code>&lt;input&gt;</code> with <code>aria-invalid="false"</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
      </tr>
      <tr>
        <th><a href="invalid03.html"><code>&lt;input&gt;</code> with <code>aria-invalid="grammar"</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="partial-announced">Grammar not announced</td>
        <td class="partial-announced">Grammar not announced</td>
        <td class="partial-announced">Grammar not announced</td>
      </tr>
      <tr>
        <th><a href="invalid04.html"><code>&lt;input&gt;</code> with <code>aria-invalid="spelling"</code></a></th>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="announced">Announced</td>
        <td class="partial-announced">Spelling not announced</td>
        <td class="partial-announced">Spelling not announced</td>
        <td class="partial-announced">Spelling not announced</td>
      </tr>
    </tbody>
  </table>
</body>
</html>


<|start_filename|>x-other-tests/labelling-method-inside-table-cell-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Labelling method inside table cell test</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>Labelling method inside table cell test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>These tests are to determine whether the <code>aria-label</code> or the <code>&lt;label&gt;</code> element would be the most accessible solution for form controls within table cells.</p>
      <hr>

      <h2>Example 01: using <code>aria-labelledby</code></h2>
      <form action="#">
        <table role="none">
          <thead>
            <tr>
              <th></th>
              <th id="sound">Sound</th>
              <th id="reaction">Reaction</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td id="news-notification">News Notification</td>
              <td>
                <select class="select" aria-labelledby="news-notification sound">
                  <option>Choose</option>
                  <option value="alert01-mp3">Alert01.mp3</option>
                  <option value="alert02-mp3">Alert02.mp3</option>
                  <option value="alert03-mp3">Alert03.mp3</option>
                </select>
              </td>
              <td>
                <select class="select" aria-labelledby="news-notification reaction">
                  <option>Choose</option>
                  <option value="on-next-change">On next change</option>
                  <option value="next-day">Next day</option>
                </select>
              </td>
            </tr>
          </tbody>
        </table>
      </form>
      <h3>Code</h3>
<pre><code>&lt;form action="#"&gt;
  &lt;table role="none"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th <span>id="sound"</span>&gt;Sound&lt;/th&gt;
        &lt;th <span>id="reaction"</span>&gt;Reaction&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td <span>id="news-notification"</span>&gt;News Notification&lt;/td&gt;
        &lt;td&gt;
          &lt;select <span>aria-labelledby="news-notification sound"</span>&gt;
            &lt;option&gt;Choose&lt;/option&gt;
            &lt;option value="alert01-mp3"&gt;Alert01.mp3&lt;/option&gt;
            &lt;option value="alert02-mp3"&gt;Alert02.mp3&lt;/option&gt;
            &lt;option value="alert03-mp3"&gt;Alert03.mp3&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;select <span>aria-labelledby="news-notification reaction"</span>&gt;
            &lt;option&gt;Choose&lt;/option&gt;
            &lt;option value="on-next-change"&gt;On next change&lt;/option&gt;
            &lt;option value="next-day"&gt;Next day&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/form&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Example 02: using a hidden <code>&lt;label&gt;</code></h2>
      <form action="#">
        <table role="none">
          <thead>
            <tr>
              <th></th>
              <th>Sound</th>
              <th>Reaction</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>News Notification</td>
              <td>
                <label for="one" class="hidden">News notication sound</label>
                <select class="select" id="one">
                  <option>Choose</option>
                  <option value="alert01-mp3">Alert01.mp3</option>
                  <option value="alert02-mp3">Alert02.mp3</option>
                  <option value="alert03-mp3">Alert03.mp3</option>
                </select>
              </td>
              <td>
                <label for="two" class="hidden">News notication reaction</label>
                <select class="select" id="two">
                  <option>Choose</option>
                  <option value="on-next-change">On next change</option>
                  <option value="next-day">Next day</option>
                </select>
              </td>
            </tr>
          </tbody>
        </table>
      </form>
      <h3>Code</h3>
<pre><code>&lt;form action="#"&gt;
  &lt;table role="none"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;Sound&lt;/th&gt;
        &lt;th&gt;Reaction&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;News Notification&lt;/td&gt;
        &lt;td&gt;
          <span>&lt;label for="one" class="hidden"&gt;News notication sound&lt;/label&gt;</span>
          &lt;select <span>id="one"</span>&gt;
            &lt;option&gt;Choose&lt;/option&gt;
            &lt;option value="alert01-mp3"&gt;Alert01.mp3&lt;/option&gt;
            &lt;option value="alert02-mp3"&gt;Alert02.mp3&lt;/option&gt;
            &lt;option value="alert03-mp3"&gt;Alert03.mp3&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
          <span>&lt;label for="two" class="hidden"&gt;News notication reaction&lt;/label&gt;</span>
          &lt;select <span>id="two"</span>&gt;
            &lt;option&gt;Choose&lt;/option&gt;
            &lt;option value="on-next-change"&gt;On next change&lt;/option&gt;
            &lt;option value="next-day"&gt;Next day&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/form&gt;</code></pre>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>


<|start_filename|>x-other-tests/empty-aria-label-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Empty aria-label test</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>Empty <code>aria-label</code> test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>To determine if an empty <code>aria-label</code> attribute is announced to assistive technologies, or affects the accessible name.</p>
      <hr>

      <h2>Example 01: empty <code>aria-label</code> attribute</h2>
      <button class="button" aria-label="">Test one</button>
      <h3>Code</h3>
<pre><code>&lt;button <span>aria-label=""</span>&gt;Test one&lt;/button&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Results</h2>
      <ul>
        <li>All browser / screen reader combinations currently ignore empty <code>aria-label</code> attributes.</li>
        <li>An empty <code>aria-label</code> is not defined in the Chrome Accessibility Tree.</li>
      </ul>
      <p></p>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>


<|start_filename|>x-other-tests/content-injected.html<|end_filename|>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Using role="alert"</title>
  <link rel="shortcut icon" href="../../favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="assets/css/examples.css" rel="stylesheet">
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      max-width: 40em;
      margin: 0;
      padding: 20px;
      font-size: 1em;
      line-height: 1;
      font-family: helvetica, arial, sans-serif;
    }

    h1 {
      margin-top: 0;
    }

    p {
      margin: 0 0 1em;
      line-height: 1.4;
    }

    #message > p {
      background: yellow;
      padding: 1em;
      margin: 1em 0;
    }
  </style>
</head>
<body>
  <h1>Using role="alert"</h1>
  <p><a href="index.html">List of all exercises</a></p>
  <h2>Example</h2>

  <!-- EXAMPLE STARTS HERE -->
  <div id="message" class="error"></div>
  <!-- EXAMPLE ENDS HERE -->

  <p>It was the best of times, it was the worst of times, it was the age 
  of wisdom, it was the age of foolishness, it was the epoch of belief, 
  it was the epoch of incredulity, it was the season of Light, it was 
  the season of Darkness, it was the spring of hope, it was the winter 
  of despair, we had everything before us, we had nothing before us, 
  we were all going direct to Heaven, we were all going direct the 
  other way.</p>
  <p><a href="index.html">List of all exercises</a></p>

<script type="text/javascript">
  (function()
  {
    window.setTimeout(function()
    {
      document.getElementById('message').innerHTML = '<p><strong>Error:</strong> This is an error notification.</p>';
    }, 10000);

  })();
</script>
</body>
</html>


<|start_filename|>voiceover03.html<|end_filename|>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>VoiceOver test with aria-labelledby</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>VoiceOver test with <code>aria-labelledby</code></h1>
  <p>&larr; <a href="index.html">Return to main list</a></p>
  <p>This test case is designed to determine how landmark elements are displayed in VoiceOver's Rotor Landmark list.</p>
  <h2>Example</h2>
  <div class="example">
    <header class="inner-example" aria-labelledby="red">
      <h4 id="red">Red</h4>
    </header>
    <main class="inner-example" aria-labelledby="orange">
      <h4 id="orange">Orange</h4>
    </main>
    <aside class="inner-example" aria-labelledby="yellow">
      <h4 id="yellow">Yellow</h4>
    </aside>
    <nav class="inner-example" aria-labelledby="green">
      <h4 id="green">Green</h4>
    </nav>
    <article class="inner-example" aria-labelledby="blue">
      <h4 id="blue">Blue</h4>
    </article>
    <footer class="inner-example" aria-labelledby="violet">
      <h4 id="violet">Violet</h4>
    </footer>
  </div>
  <h2>Code</h2>
<!-- start code -->
<pre><code>&lt;header aria-labelledby="red"&gt;
  &lt;h4 id="red"&gt;Red&lt;/h4&gt;
&lt;/header&gt;
&lt;main aria-labelledby="orange"&gt;
  &lt;h4 id="orange"&gt;Orange&lt;/h4&gt;
&lt;/main&gt;
&lt;aside aria-labelledby="yellow"&gt;
  &lt;h4 id="yellow"&gt;Yellow&lt;/h4&gt;
&lt;/aside&gt;
&lt;nav aria-labelledby="green"&gt;
  &lt;h4 id="green"&gt;Green&lt;/h4&gt;
&lt;/nav&gt;
&lt;article aria-labelledby="blue"&gt;
  &lt;h4 id="blue"&gt;Blue&lt;/h4&gt;
&lt;/article&gt;
&lt;footer aria-labelledby="violet"&gt;
  &lt;h4 id="violet"&gt;Violet&lt;/h4&gt;
&lt;/footer&gt;</code></pre>
<!-- end code -->
  <h2>Results</h2>
  <figure>
    <img src="assets/img/rotor-chrome03.png" alt="Chome Rotor Landmarks View">
    <figcaption>Chome Rotor Landmarks View</figcaption>
  </figure>
  <figure>
    <img src="assets/img/rotor-firefox03.png" alt="Firefox Rotor Landmarks View">
    <figcaption>Firefox Rotor Landmarks View</figcaption>
  </figure>
  <figure>
    <img src="assets/img/rotor-safari03.png" alt="Safari Rotor Landmarks View">
    <figcaption>Safari Rotor Landmarks View</figcaption>
  </figure>
  <p><a class="button-secondary small" href="support-voiceover-rotor.html">VoiceOver Rotor support chart</a></p>
  <p>&larr; <a href="index.html">Return to main list</a></p>
</body>
</html>


<|start_filename|>x-other-tests/nz-answers.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>NZ questions and answers</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>NZ questions and answers</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <hr>

      <h2>Question 1:</h2>
      <p>1. Does duplicate ids confuse the screen readers? does all elements need ids?</p>
      <h3>Answer</h3>
      <p>All HTML markup should be well formed and valid as defined by the <a href="https://validator.w3.org/">W3C Markup Validation Service</a>.</p>
      <p>In an HTML page, all ID values must be unique in order for the document to pass validation.</p>
      <p>In specific instances, duplicate ID values could cause issues for screen readers. A short list of examples where this could present issues include:</p>
      <ul>
        <li>for/id</li>
        <li>aria-describedby/id</li>
        <li>aria-labelledby/id</li>
        <li>aria-owns/id</li>
        <li>aria-controls/id</li>
      </ul>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Question 2:</h2>
      <p>Inputs like DOB (3 fields) have only one label. is the best accessibility practice to still have one label per input on those scenario, assuming they are off-screen?</p>
      <h3>Answer</h3>
      <fieldset>
        <legend>Date of birth</legend>
        <div>
          <label for="dobd">Day (DD format)</label>
          <input id="dobd" type="text">
        </div>
        <div>
          <label for="dobm">Month (MM format)</label>
          <input id="dobm" type="text">
        </div>
        <div>
          <label for="doby">Year (YYYY format)</label>
          <input id="doby" type="text">
        </div>
      </fieldset>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Question 3:</h2>
      <p>Links with JavaScript onclick to open dialogs/popup that are not navigating to a different page are acceptable? </p>
      <h3>Answer</h3>
      <p>As was mentioned by one of your team:</p>
      <ul>
        <li>BUTTON should be used for actions</li>
        <li>LINKS should be used to send users to locations</li>
      </ul>
      <p>For this reason, the trigger for modals should be the BUTTON element.</p>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Question 4:</h2>
      <p>Is there any application/site/script we can use to identify how many accessibility issues we have in our portal just to make sure we are not accidentally increasing the number of problems as we progress with the changes?</p>
      <h3>Answer</h3>
      <p><a href="https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh">WAVE</a></p>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Question 5:</h2>
      <p>Testing accessibility changes. How do we do that?</p>
      <h3>Answer</h3>
      <p>Tag me in all Jira tickets.</p>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Question 6:</h2>
      <p>We should make sure that every input field has a label (visible or hidden) that accurately describes the field (FOR). About hidden labels it was suggested in the last meeting we can set the fields outside the visible area including "absolute" position. Setting "absolute" position will remove the label from the DOM position where is placed, will the screen reader be able to "link" the input with the label even though its not in the DOM as a normal label? </p>
      <h3>Answer</h3>
      <p>In very specific circumstances, it is allowable to hide the LABEL element off-screen, but only when the purpose of the form control is clear and obvious to sighted users.</p>
      <p>Hiding the LABEL off-screen is acceptable as long as it is absolutely positioned, and does not use display: none, as this will remove the element from the accessibility tree.</p>
<pre><code>.sr-only {
  position: absolute !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  width: 1px !important;
  height: 1px !important;
  border: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  white-space: nowrap !important;

  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
}</code></pre>

<pre><code>&lt;form action="#"&gt;
  &lt;div class="form-container"&gt;
    &lt;label for="name" class="sr-only"&gt;Name&lt;/label&gt;
    &lt;input id="name" type="text"&gt;
  &lt;/div&gt;
&lt;/form&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Question 7:</h2>
      <p>Should a input label and the input placeholder have ALWAYS the same value? </p>
      <h3>Answer</h3>
      <p>The placeholder attribute should be AVOIDED COMPLETELY as it presents a range of accessibility issues.</p>
      <ol>
        <li>Colour contrast - especially for users who set their controls to high.</li>
        <li>Congnitive impaired and users who are not tech savy  - the placeholder information is wiped as soon as the user begins typing.</li>
        <li>Screen reader users - the placeholder is often announced AS WELL AS any label, which means duplicate information is presented to users.</li>
      </ol>
      <p>You can see this in this <a href="https://russmaxdesign.github.io/accessible-forms/accessible-name-input03.html">test case:</a></p>
      <p>The word "Fox" should not be announced to users at all, unless there is no label or title present. Instead, the placeholder is announced as well as the label and title if present.</p>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Question 8:</h2>
      <p>What would be the best approach to "link" a label with FOR attribute to the radio buttons for the example in the image in the notes.  have 1 invisible label for each of the radio options? and add the "Adjust your policy excess" for attribute relating to the fieldset id?</p>
      <h3>Answer</h3>
      <p>This should be standard fieldset/legend markup. Note that the paragraph can be associated with the first input so that it is announced when the radio recieves focus.</p>
      <fieldset>
        <legend>Adjust your policy excess</legend>
        <p id="explanation">The excess is the amount you will need to pay if you make a claim.</p>
        <ul class="form-list">
          <li>
            <input id="option1" type="radio" aria-describedby="explanation">
            <label for="option1">$250</label>
          </li>
          <li>
            <input id="option2" type="radio">
            <label for="option2">$500</label>
          </li>
          <li>
            <input id="option3" type="radio">
            <label for="option3">$1000</label>
          </li>
        </ul>
      </fieldset>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
</body>
</html>


<|start_filename|>x-other-tests/greg-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Greg test</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>Greg test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <hr>

      <h2>Example 1: Static</h2>
      <div aria-live="polite">
        <input class="input" id="xxx1" type="text" inputmode="numeric" maxlength="24" autocomplete="cc-number" placeholder="1234 5678 9012 3456" aria-label="Card number field" aria-invalid="true" aria-required="true" aria-describedby="ariaErrorField1">
        <span class="aria-error" id="ariaErrorField1"></span>
      </div>
      <h3>Announced:</h3>
      <ul>
        <li>Accessible name: <i>"Card number field"</i></li>
        <li>Placeholder: <i>"1234 5678 9012 3456"</i></li>
        <li>Required true/false: <i>"Required"</i></li>
        <li><span class="red">Invalid true/false: <i>"Invalid data"</i></span></li>
        <li>Simple instructions: <i>"Edit text"</i></li>
      </ul>
      <hr>

      <h2>Example 2: Error</h2>
      <div aria-live="polite">
        <input class="input" id="xxx2" type="text" inputmode="numeric" maxlength="24" autocomplete="cc-number" placeholder="1234 5678 9012 3456" aria-label="Card number field" aria-invalid="true" aria-required="true" aria-describedby="ariaErrorField2">
        <span class="aria-error" id="ariaErrorField2">Incomplete field</span>
      </div>
      <h3>Announced:</h3>
      <ul>
        <li>Accessible name: <i>"Card number field"</i></li>
        <li>Placeholder: <i>"1234 5678 9012 3456"</i></li>
        <li>Required true/false: <i>"Required"</i></li>
        <li>Invalid true/false: <i>"Invalid data"</i></li>
        <li>Simple instructions: <i>"Edit text"</i></li>
        <li><span class="green">Description: <i>"Incomplete field"</i></span></li>
      </ul>

      <h3>Suggestions:</h3>
      <ul>
        <li>Accessible name: "Card number" - remove "field" as this is annouced via role</li>
        <li>Either remove <code>aria-invalid</code> or set to <code>false</code> initially as it is being announced as an invalid field as soon as it receives focus</li>
      </ul>

      <hr>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>



<|start_filename|>nested-fieldset-presentation.html<|end_filename|>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested fieldset, with role="presentation"</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>Nested <code>&lt;fieldset&gt;</code>, with role="presentation"</h1>
  <p>&larr; <a href="index.html">Return to main list</a></p>
  <p>This is a test case designed to determine how nested <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 by various screen readers. In this test, the <code>ul</code> has been set with <a href="https://www.w3.org/TR/wai-aria/#presentation"><code>role="presentation"</code></a>.</p>
  <h2>Example</h2>
  <form action="#">
    <fieldset>
      <legend>What type of cars do you like?</legend>
      <fieldset>
        <legend>Size</legend>
        <ul role="presentation">
          <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 role="presentation">
          <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>
  </form>
  <h2>Code</h2>
<!-- start code -->
<pre><code>&lt;fieldset&gt;
  &lt;legend&gt;What type of cars do you like?&lt;/legend&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Size&lt;/legend&gt;
    &lt;ul role="presentation"&gt;
      &lt;li&gt;
        &lt;input type="checkbox" id="large"&gt;
        &lt;label for="large"&gt;Large&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;input type="checkbox" id="small"&gt;
        &lt;label for="small"&gt;Small&lt;/label&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/fieldset&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Type&lt;/legend&gt;
    &lt;ul role="presentation"&gt;
      &lt;li&gt;
        &lt;input type="checkbox" id="sedan"&gt;
        &lt;label for="sedan"&gt;Sedan&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;input type="checkbox" id="wagon"&gt;
        &lt;label for="wagon"&gt;Wagon&lt;/label&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/fieldset&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> Large. Unticked. Tick box. Size. Group <span class="red">[Outer legend not announced]</span></li>
      <li><b>Firefox:</b> Large. Unticked. Checkbox. Size. Group <span class="red">[Outer legend not announced]</span></li>
      <li><b>Safari:</b> Large. Unticked. Tick box. Size. Size. Group. <span class="red">[Outer legend not announced]</span></li>
    </ul>
  </div>
  <div class="note">
    <h3>NVDA</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> <span class="green">What type of cars do you like?</span> <span class="green">Grouping</span>. Size. Grouping. Large. Checkbox. Not checked.</li>
      <li><b>Firefox:</b> <span class="green">What type of cars do you like?</span> <span class="green">Grouping</span>. Size. Grouping. Large. Checkbox. Not checked.</li>
      <li><b>Edge:</b> <span class="green">What type of cars do you like?</span> <span class="green">Grouping</span>. Size. Grouping. Large. Checkbox. Not checked.</li>
    </ul>
  </div>
  <div class="note">
    <h3>JAWS</h3>
    <ul class="browser-list">
      <li><b>Chrome:</b> <span class="green">What type of cars do you like?</span> <span class="green">Group</span>. Size. Group. Large. Checkbox. Not checked. To check press space bar.</li>
      <li><b>Firefox:</b> <span class="green">What type of cars do you like?</span> Size. Large. Checkbox. Not checked. To check press space bar.</li>
      <li><b>Edge:</b> <span class="green">What type of cars do you like?</span> <span class="green">Group</span>. Size. Group. Large. Checkbox. Not checked. To check press space bar.</li>
    </ul>
  </div>
  <p>&larr; <a href="index.html">Return to main list</a></p>
</body>
</html>


<|start_filename|>x-other-tests/list-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Paragraph inside list item test</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>Paragraph inside list item test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>This test is to determine if the <code>&lt;p&gt;</code> element is considered valid when placed inside an <code>&lt;li&gt;</code> element. This is based on the <a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-content-model" target="_blank">W3C content model</a>, which defines content that must be included as children and descendants of the element.</p>
      <hr>

      <h2>Example</h2>
      <ul>
        <li>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum deserunt itaque, amet ipsam placeat ad rerum consequuntur quaerat iste error et reprehenderit ex exercitationem tempore molestiae porro rem eveniet incidunt.</p>
        </li>
        <li>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id doloribus voluptatum, perspiciatis dolores neque cum molestias officiis voluptates debitis optio provident dolorum possimus ipsam vero alias, quaerat nemo, soluta officia?</p>
        </li>
      </ul>
      <h3>Code</h3>
<pre><code>&lt;ul&gt;
  &lt;li&gt;
    <span>&lt;p&gt;Lorem ipsum dolor...&lt;/p&gt;</span>
  &lt;/li&gt;
  &lt;li&gt;
    <span>&lt;p&gt;Lorem ipsum dolor...&lt;/p&gt;</span>
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Results</h2>
      <p>The <code>&lt;li&gt;</code> element can contain any <a href="https://html.spec.whatwg.org/multipage/dom.html#flow-content-2" target="_blank">flow content</a>.</p>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>


<|start_filename|>x-other-tests/autocomplete-attribute-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>autocomplete attribute test</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1><code>autocomplete</code> attribute test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>The autocomplete attribute specifies whether a form or an input field should have autocomplete on or off. Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.</p>
      <p>This test is to determine whether the autocomplete values are announced with each field.</p>
      <hr>

      <h2>Example 01: <code>autocomplete="name"</code></h2>
      <form action="#">
        <div class="form-container">
          <label class="label" for="form-name">Name</label>
          <input class="input" id="form-name" type="text" autocomplete="name">
        </div>
      </form>
      <h3>Code</h3>
<pre><code>&lt;form action="#"&gt;
  &lt;div class="form-container"&gt;
    &lt;label for="form-name"&gt;Name&lt;/label&gt;
    &lt;input id="form-name" type="text" <span>autocomplete="name"</span>&gt;
  &lt;/div&gt;
&lt;/form&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Example 02: <code>autocomplete="email"</code></h2>
      <form action="#">
        <div class="form-container">
          <label class="label" for="form-email">Email</label>
          <input class="input" id="form-email" type="text" autocomplete="email">
        </div>
      </form>
      <h3>Code</h3>
<pre><code>&lt;form action="#"&gt;
  &lt;div class="form-container"&gt;
    &lt;label for="form-email"&gt;Email&lt;/label&gt;
    &lt;input id="form-email" type="text" <span>autocomplete="email"</span>&gt;
  &lt;/div&gt;
&lt;/form&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Example 03 - <code>autocomplete="country"</code></h2>
      <form action="#">
        <div class="form-container">
          <label class="label" for="form-country">Country</label>
          <input class="input" id="form-country" type="text" autocomplete="country">
        </div>
      </form>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Resources</h2>
      <ul>
        <li>
          <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete" target="_blank">4.10.18.7.1 Autofilling form controls: the autocomplete attribute</a>
        </li>
        <li>
          <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete" target="_blank">The HTML autocomplete attribute</a>
        </li>
      </ul>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>


<|start_filename|>x-other-tests/metadata-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Metadata validation test</title>
    <link rel="stylesheet" href="assets/css/test.css">

    <meta name="description" content="IAG CTP Insurance">
    <meta name="keywords" content="CTP, Insurance">
    <meta name="author" content="IAG">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
  </head>
  <body>
    <main>
      <h1>Metadata validation test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>This test is to determine which IAG metadata elements are valid.</p>
      <hr>

      <h2>Example</h2>
<pre><code>&lt;meta name="description" content="IAG CTP Insurance"&gt;
&lt;meta name="keywords" content="CTP, Insurance"&gt;
&lt;meta name="author" content="IAG"&gt;
&lt;meta name="viewport" content="width=device-width"&gt;
&lt;meta http-equiv="expires" content="0"&gt;
&lt;meta http-equiv="Pragma" content="no-cache"&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Results</h2>
      <p>These two should be removed:</p>
<pre><code>&lt;meta <span>http-equiv="expires"</span> content="0"&gt;
&lt;meta <span>http-equiv="Pragma"</span> content="no-cache"&gt;</code></pre>
      <p>The <code>http-equiv</code> only <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-http-equiv" target="_blank">allows thw following values</a>:</p>
      <ul>
        <li><code>content-security-policy</code></li>
        <li><code>content-type</code></li>
        <li><code>default-style</code></li>
        <li><code>x-ua-compatible</code></li>
        <li><code>refresh</code></li>
      </ul>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>


<|start_filename|>x-other-tests/information-associated-with-radio-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Information associated with radio buttons test</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>Information associated with radio buttons test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>This test to to determine the best way to present both yearly and monthly information on screen, and to screen readers.</p>
      <hr>

      <h2>Example 1: radio group inside table</h2>
      <form action="#">
        <fieldset>
          <legend>Choose your preferred basic excess</legend>
          <table>
            <thead>
              <tr>
                <td></td>
                <th>Excess</th>
                <th>Yearly Premium</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><input type="radio" aria-describedby="one1 one2" name="excess-options"></td>
                <td><span id="one1"><span class="red">Option 1</span> $350 <span class="red">Excess</span></span></td>
                <td><span id="one2"><span class="red">and</span> $1400 <span class="red">Yearly Premium</span></span></td>
              </tr>
              <tr>
                <td><input type="radio" aria-describedby="two1 two2" name="excess-options"></td>
                <td><span id="two1"><span class="red">Option 2</span> $650 <span class="red">Excess</span></span></td>
                <td><span id="two2"><span class="red">and</span> $1800 <span class="red">Yearly Premium</span></span></td>
              </tr>
              <tr>
                <td><input type="radio" aria-describedby="three1 three2" name="excess-options"></td>
                <td><span id="three1"><span class="red">Option 3</span> $850 <span class="red">Excess</span></span></td>
                <td><span id="three2"><span class="red">and</span> $2100 <span class="red">Yearly Premium</span></span></td>
              </tr>
            </tbody>
          </table>
        </fieldset>
      </form>
      <p><a href="#">Dummy link between</a></p>
      <hr>

      <h2>Example 2: simple radio group</h2>
      <form action="#">
        <fieldset>
          <legend>Choose your preferred basic excess</legend>
          <ul>
            <li><input type="radio" id="four1" name="excess-options2"><label class="bold" for="four1">$350 <span class="small">Excess /</span> $1400 <span class="small">Yearly Premium</span></label></li>
            <li><input type="radio" id="four2" name="excess-options2"><label class="bold" for="four2">$650 <span class="small">Excess /</span> $1800 <span class="small">Yearly Premium</span></label></li>
            <li><input type="radio" id="four3" name="excess-options2"><label class="bold" for="four3">$850 <span class="small">Excess /</span> $2100 <span class="small">Yearly Premium</span></label></li>
          </ul>
        </fieldset>
      </form>
      <p><a href="#">Dummy link between</a></p>
      <hr>

      <h2>Example 3: simple radio group</h2>
      <form action="#">
        <fieldset>
          <legend>Choose your preferred basic excess</legend>
          <ul>
            <li><input type="radio" id="five1" name="excess-options2"><label for="five1"><span class="bold">$350</span> <span class="small">($1400 Yearly Premium)</span></label></li>
            <li><input type="radio" id="five2" name="excess-options2"><label for="five2"><span class="bold">$650</span> <span class="small">($1800 Yearly Premium)</span></label></li>
            <li><input type="radio" id="five3" name="excess-options2"><label for="five3"><span class="bold">$850</span> <span class="small">($2100 Yearly Premium)</span></label></li>
          </ul>
        </fieldset>
      </form>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>


<|start_filename|>x-other-tests/firefox-focus-test.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="../favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Firefox and Safari focus test</title>
    <link rel="stylesheet" href="assets/css/test.css">
  </head>
  <body>
    <main>
      <h1>Firefox and Safari focus test</h1>
      <p>&larr; <a href="index.html">Index page</a></p>
      <p>This test is to determine if Firefox and Safari will allow focus on links, form controls and buttons.</p>
      <hr>

      <h2>Example</h2>
      <form action="#">
        <div class="form-container">
          <label class="label" for="form-name">Name</label>
          <input class="input" id="form-name" type="text" autocomplete="name">
        </div>
        <button class="button">Submit</button>
      </form>
      <h3>Code</h3>
<pre><code>&lt;form action="#"&gt;
  &lt;div&gt;
    &lt;label for="form-name"&gt;Name&lt;/label&gt;
    &lt;input id="form-name" type="text" autocomplete="name"&gt;
  &lt;/div&gt;
  &lt;button&gt;Submit&lt;/button&gt;
&lt;/form&gt;</code></pre>
      <p><a href="#">Dummy link after</a></p>
      <hr>

      <h2>Resources</h2>
      <ul>
        <li><a href="https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox">Focus in Firefox</a></li>
        <li><a href="https://www.seanmcp.com/articles/tab-focus-not-working-in-safari/">Tab focus not working in Safari?</a></li>
      </ul>
      <p>&larr; <a href="index.html">Index page</a></p>
    </main>
  </body>
</html>
