title: Aria happiness- two forms with a checkbox of the same name
body: <p>On my page I have two login forms- on in the nav (that is present on any page), and one in the page content. For simplicity of implementing, they are nearly identical, and all inputs have the same <code>name</code>.</p>
  <p>This works just dandy, but when I have the page scanned with <a href="https://github.com/dequelabs/axe-selenium-java" rel="nofollow noreferrer">AXE</a>, I get the following message:</p>
  <pre><code>1) Checkbox inputs with the same name attribute value must be part of a group: https://dequeuniversity.com/rules/axe/3.1/checkboxgroup?application=axeAPI
    a) [&quot;#homeLoginStayLoggedIn&quot;]
      Fix any of the following:
        All elements with the name &quot;stayLoggedIn&quot; do not reference the same element with aria-labelledby
        ARIA group does not have aria-label or aria-labelledby
  
  </code></pre>
  <p>It only seems to have a problem with the checkbox elements. I have tried several ways of fixing, including the <code>group</code> role to the surrounding divs, using <code>aria-label</code> and <code>aria-labeledby</code>, with no fix.</p>
  <p>Page form:</p>
  <pre><code>&lt;form id=&quot;homeLogin&quot; class=&quot;loginForm card-text&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;homeLoginEmailUsername&quot;&gt;Email or Username:&lt;/label&gt;
          &lt;input type=&quot;text&quot; class=&quot;form-control loginEmailUsername&quot; id=&quot;homeLoginEmailUsername&quot; placeholder=&quot;email or username&quot; name=&quot;usernameEmail&quot; required&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;homeLoginPassword&quot;&gt;Password:&lt;/label&gt;
          &lt;input type=&quot;password&quot; class=&quot;form-control loginPassword&quot; id=&quot;homeLoginPassword&quot; placeholder=&quot;password&quot; name=&quot;password&quot; required&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;div class=&quot;form-check&quot; role=&quot;group&quot;&gt;
              &lt;input type=&quot;checkbox&quot; class=&quot;form-check-input loginStayLoggedIn&quot; id=&quot;homeLoginStayLoggedIn&quot; name=&quot;stayLoggedIn&quot;&gt;
              &lt;label class=&quot;form-check-label&quot; for=&quot;homeLoginStayLoggedIn&quot; id=&quot;homeLoginStayLoggedInLabel&quot; aria-label=&quot;homeLoginStayLoggedIn&quot;&gt;
                  Remember me
              &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary submitButton&quot;&gt;
          Sign in
          &lt;i class=&quot;fas fa-sign-in-alt&quot;&gt;&lt;/i&gt;
      &lt;/button&gt;
      &lt;button type=&quot;reset&quot; class=&quot;btn btn-link resetButton&quot;&gt;Reset&lt;/button&gt;
      &lt;div class=&quot;form-response&quot;&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Nav form:</p>
  <pre><code>&lt;form id=&quot;navbarLogin&quot; class=&quot;px-4 py-3 loginForm&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;navbarLoginEmailUsername&quot;&gt;Email or Username:&lt;/label&gt;
          &lt;input type=&quot;text&quot; class=&quot;form-control loginEmailUsername&quot; id=&quot;navbarLoginEmailUsername&quot; placeholder=&quot;email or username&quot; name=&quot;usernameEmail&quot; required&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;navbarLoginPassword&quot;&gt;Password:&lt;/label&gt;
          &lt;input type=&quot;password&quot; class=&quot;form-control loginPassword&quot; id=&quot;navbarLoginPassword&quot; placeholder=&quot;password&quot; name=&quot;password&quot; required&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot; role=&quot;group&quot;&gt;
          &lt;div class=&quot;form-check&quot;&gt;
              &lt;input type=&quot;checkbox&quot; class=&quot;form-check-input loginStayLoggedIn&quot; id=&quot;navbarLoginStayLoggedIn&quot; name=&quot;stayLoggedIn&quot; aria-labelledby=&quot;navbarLoginStayLoggedInLabel&quot;&gt;
              &lt;label class=&quot;form-check-label&quot; for=&quot;navbarLoginStayLoggedIn&quot; id=&quot;navbarLoginStayLoggedInLabel&quot; aria-label=&quot;navbarLoginStayLoggedIn&quot;&gt;
                  Remember me
              &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button id=&quot;navbarLoginSubmitButton&quot; type=&quot;submit&quot; class=&quot;btn btn-primary submitButton&quot;&gt;
          Sign in &lt;i class=&quot;fas fa-sign-in-alt&quot;&gt;&lt;/i&gt;
      &lt;/button&gt;
      &lt;button type=&quot;reset&quot; class=&quot;btn btn-link resetButton&quot;&gt;Reset&lt;/button&gt;
      &lt;div class=&quot;form-response&quot;&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <h2>Update</h2>
  <p>With Graham's answer, I now get the following error, which is what led me down the path of using all the extra aria attributes:</p>
  <p>Code:</p>
  <pre><code>&lt;div class=&quot;form-group&quot;&gt;
      &lt;div class=&quot;form-check&quot;&gt;
          &lt;input type=&quot;checkbox&quot; class=&quot;form-check-input loginStayLoggedIn&quot; id=&quot;homeLoginStayLoggedIn&quot; name=&quot;stayLoggedIn&quot;&gt;
          &lt;label class=&quot;form-check-label&quot; for=&quot;homeLoginStayLoggedIn&quot;&gt;
              Remember me
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Error:</p>
  <pre><code>1) Checkbox inputs with the same name attribute value must be part of a group: https://dequeuniversity.com/rules/axe/3.1/checkboxgroup?application=axeAPI
    a) [&quot;#homeLoginStayLoggedIn&quot;]
      Fix any of the following:
        All elements with the name &quot;stayLoggedIn&quot; do not reference the same element with aria-labelledby
        Element does not have a containing fieldset or ARIA group
  </code></pre>