title: How to create 508 compliant radio buttons
body: <p>I'm in the process of transitioning my companies website to being 508 compliant and need help. Currently I'm trying to figure out the correct way to build out forms, specifically items that use radio buttons/checkboxes. Based on the research I have done thus far I've built out a form but I'm wondering if its correct. </p>
  
  <p>Below is the form that I have built:</p>
  
  <pre><code>&lt;form onsubmit="" method="post" name="subscribeForm" action="https://cl.exct.net/subscribe.aspx" class="bordered"&gt;
  &lt;div role="group" aria-labelledby="contact_info_head"&gt;
      &lt;input type="hidden" name="thx" value="http://www.bcbsm.com/content/microsites/mpsers/en/members/newsletters/sign-up/thank-you.html" /&gt;
      &lt;input type="hidden" name="err" value="http://www.bcbsm.com/index/common/error-pages/mspsers-error.html" /&gt;
      &lt;input type="hidden" name="usub" value="http://www.bcbsm.com/content/microsites/mpsers/en/members/newsletters/sign-up/unsubscribe.html" /&gt;
      &lt;input type="hidden" name="MID" value="62449" /&gt;
      &lt;input type="hidden" name="lid" value="2540764" /&gt;
      &lt;input type="hidden" name="EnrolleeID2" value="0"&gt;
      &lt;h2 id="contact_info_head"&gt;Your Contact Information&lt;/h2&gt;
      &lt;input type="hidden" name="MID" value="62449" aria-hidden="true" /&gt;
      &lt;div class="caption"&gt;&lt;strong&gt;* Denotes a required field&lt;/strong&gt;&lt;/div&gt;
      &lt;br&gt;
      &lt;div class="control-group "&gt;
          &lt;!-- Text input--&gt;
          &lt;label class="control-label" for="FirstName"&gt;*First Name&lt;/label&gt;
          &lt;div class="controls"&gt;
              &lt;input type="text" placeholder="" class="input" name="first name" id="FirstName" data-required="true" aria-required="true"&gt;
              &lt;p class="help-block"&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="LastName"&gt;*Last Name&lt;/label&gt;
          &lt;div class="controls"&gt;
              &lt;input type="text" placeholder="" class="input" name="last name" id="LastName" data-required="true" aria-required="true"&gt;
              &lt;p class="help-block"&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="control-group "&gt;
          &lt;label class="control-label" for="EmailAddress"&gt;*Email Address&lt;/label&gt;
          &lt;div class="controls"&gt;
              &lt;input type="text" placeholder="" class="input EmailAddress" name="Email Address" id="EmailAddress" aria-required="true"&gt;
              &lt;p class="help-block"&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="control-group "&gt;
          &lt;label class="control-label" for="ConfirmEmailAddress"&gt;*Confirm Email Address&lt;/label&gt;
          &lt;div class="controls"&gt;
              &lt;input type="text" name="Confirm Email Address" class="input ConfirmEmailAddress" id="ConfirmEmailAddress" aria-required="true"&gt;
              &lt;p class="help-block"&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="control-group "&gt;
          &lt;label class="control-label" for="EnrolleeID" id="enrollee-id-explained"&gt;*Enrollee ID&lt;/label&gt;
          &lt;span aria-labelledby="enrollee-id-explained"&gt;(located on the front of your Blues ID card)&lt;/span&gt;
          &lt;div class="controls"&gt;
              &lt;input type="text" placeholder="" class="input" name="EnrolleeID" id="EnrolleeID" data-required="true" aria-required="true"&gt;
              &lt;p class="help-block"&gt;&lt;/p&gt;
              &lt;br&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- begin radio button section =============================== --&gt;
      &lt;div id="check-group"&gt;
          &lt;fieldset&gt;
              &lt;legend class="h3"&gt;Retiree Status&lt;/legend&gt;
              &lt;!-- Multiple Checkboxes --&gt;
              &lt;input id="medicare" class="checkbox-btn-control" type="radio" checked="checked" value="Medicare" name="MPSERS Status"&gt;
              &lt;label for="medicare"&gt;Medicare&lt;/label&gt;
              &lt;input id="non-medicare" class="checkbox-btn-control" type="radio" value="NonMedicare" name="MPSERS Status"&gt;
              &lt;label for="non-medicare"&gt;Non-Medicare&lt;/label&gt;
              &lt;input id="medicare-and-non-medicare" class="checkbox-btn-control" type="radio" value="MedicareAndNonMedicare" name="MPSERS Status"&gt;
              &lt;label for="medicare-and-non-medicare"&gt;Medicare &amp;amp; Non-Medicare&lt;/label&gt;
          &lt;/fieldset&gt;
          &lt;p class="help-block"&gt;&lt;/p&gt;
          &lt;br&gt;
          &lt;fieldset&gt;
              &lt;legend class="h3"&gt;Email Preference&lt;/legend&gt;
              &lt;!-- Multiple Checkboxes --&gt;
              &lt;input type="radio" class="checkbox-btn-control" name="email type" value="HTML" checked="checked" id="EmailPrefHTML"&gt;
              &lt;label for="EmailPrefHTML"&gt;HTML&lt;/label&gt;
              &lt;input type="radio" class="checkbox-btn-control" name="email type" value="TEXT" id="EmailPrefText"&gt;
              &lt;label for="EmailPrefText"&gt;Text&lt;/label&gt;
          &lt;/fieldset&gt;
          &lt;p class="help-block"&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Any help regarding this issue is greatly appreciated. Thanks!!! </p>