How to create 508 compliant radio buttons

Question

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.

Below is the form that I have built:

<form onsubmit="" method="post" name="subscribeForm" action="https://cl.exct.net/subscribe.aspx" class="bordered">
<div role="group" aria-labelledby="contact_info_head">
    <input type="hidden" name="thx" value="http://www.bcbsm.com/content/microsites/mpsers/en/members/newsletters/sign-up/thank-you.html" />
    <input type="hidden" name="err" value="http://www.bcbsm.com/index/common/error-pages/mspsers-error.html" />
    <input type="hidden" name="usub" value="http://www.bcbsm.com/content/microsites/mpsers/en/members/newsletters/sign-up/unsubscribe.html" />
    <input type="hidden" name="MID" value="62449" />
    <input type="hidden" name="lid" value="2540764" />
    <input type="hidden" name="EnrolleeID2" value="0">
    <h2 id="contact_info_head">Your Contact Information</h2>
    <input type="hidden" name="MID" value="62449" aria-hidden="true" />
    <div class="caption"><strong>* Denotes a required field</strong></div>
    <br>
    <div class="control-group ">
        <!-- Text input-->
        <label class="control-label" for="FirstName">*First Name</label>
        <div class="controls">
            <input type="text" placeholder="" class="input" name="first name" id="FirstName" data-required="true" aria-required="true">
            <p class="help-block"></p>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="LastName">*Last Name</label>
        <div class="controls">
            <input type="text" placeholder="" class="input" name="last name" id="LastName" data-required="true" aria-required="true">
            <p class="help-block"></p>
        </div>
    </div>

    <div class="control-group ">
        <label class="control-label" for="EmailAddress">*Email Address</label>
        <div class="controls">
            <input type="text" placeholder="" class="input EmailAddress" name="Email Address" id="EmailAddress" aria-required="true">
            <p class="help-block"></p>
        </div>
    </div>
    <div class="control-group ">
        <label class="control-label" for="ConfirmEmailAddress">*Confirm Email Address</label>
        <div class="controls">
            <input type="text" name="Confirm Email Address" class="input ConfirmEmailAddress" id="ConfirmEmailAddress" aria-required="true">
            <p class="help-block"></p>
        </div>
    </div>
    <div class="control-group ">
        <label class="control-label" for="EnrolleeID" id="enrollee-id-explained">*Enrollee ID</label>
        <span aria-labelledby="enrollee-id-explained">(located on the front of your Blues ID card)</span>
        <div class="controls">
            <input type="text" placeholder="" class="input" name="EnrolleeID" id="EnrolleeID" data-required="true" aria-required="true">
            <p class="help-block"></p>
            <br>
        </div>
    </div>
    <!-- begin radio button section =============================== -->
    <div id="check-group">
        <fieldset>
            <legend class="h3">Retiree Status</legend>
            <!-- Multiple Checkboxes -->
            <input id="medicare" class="checkbox-btn-control" type="radio" checked="checked" value="Medicare" name="MPSERS Status">
            <label for="medicare">Medicare</label>
            <input id="non-medicare" class="checkbox-btn-control" type="radio" value="NonMedicare" name="MPSERS Status">
            <label for="non-medicare">Non-Medicare</label>
            <input id="medicare-and-non-medicare" class="checkbox-btn-control" type="radio" value="MedicareAndNonMedicare" name="MPSERS Status">
            <label for="medicare-and-non-medicare">Medicare &amp; Non-Medicare</label>
        </fieldset>
        <p class="help-block"></p>
        <br>
        <fieldset>
            <legend class="h3">Email Preference</legend>
            <!-- Multiple Checkboxes -->
            <input type="radio" class="checkbox-btn-control" name="email type" value="HTML" checked="checked" id="EmailPrefHTML">
            <label for="EmailPrefHTML">HTML</label>
            <input type="radio" class="checkbox-btn-control" name="email type" value="TEXT" id="EmailPrefText">
            <label for="EmailPrefText">Text</label>
        </fieldset>
        <p class="help-block"></p>
    </div>
</div>

Any help regarding this issue is greatly appreciated. Thanks!!!

Answer 1

As far as I can tell you've done a good job. All your inputs are labeled, you even went as far as using aria-labelledby.

If you're simply trying to pass a 508 scanner test, you're likely good, those things are very superficial. On the other hand if you're expecting many visually impaired visitors, running a screen-reader and testing the website with eyes closed is a good test.

Answer 2

Unfortunately, this code will not work with any combination of browser and screen reader that I know of. Screen readers will skip past the legend and only read the radio button answers.

The following tips should help:

-Add a space between the star and the field name in all labels. Most readers will handle it fine, but it could trip up some.

-Get rid of role="group" on the parent div and replace with role="form"

-Not sure whether you're doing this, but never set autofocus on the first form field either with JavaScript or the autofocus property. Doing so usually prevents screen readers from switching into forms mode until you tab past that first form field and into the second. Place focus somewhere above the form so that tabbing takes the screen reader past the form tag and the div with role="form", triggering the screen reader's forms mode

-Replace your radio button code with the following. Note the placement of aria-required="true" and, very importantly, the relationship between the arialabelledby attribute on the fieldset element and the id on the legend element:

<div id="check-group">
    <fieldset role="radiogroup" aria-required="true" aria-labelledby="retireeStatus">
        <legend class="h3" id="retireeStatus">* Retiree Status</legend>
        <!-- Multiple Checkboxes -->
        <input id="medicare" class="checkbox-btn-control" type="radio" checked="checked" value="Medicare" name="MPSERS Status">
        <label for="medicare">Medicare</label>
        <input id="non-medicare" class="checkbox-btn-control" type="radio" value="NonMedicare" name="MPSERS Status">
        <label for="non-medicare">Non-Medicare</label>
        <input id="medicare-and-non-medicare" class="checkbox-btn-control" type="radio" value="MedicareAndNonMedicare" name="MPSERS Status">
        <label for="medicare-and-non-medicare">Medicare &amp; Non-Medicare</label>
    </fieldset>
    <p class="help-block"></p>
</div>

I've tested radio button fields with these tips and code incorporated and they work well in the following browser/reader combinations: Chrome/JAWS, Firefox/JAWS, Chrome/ChromeVox, Edge/NVDA, Mac/Chrome/ChromeVox, Mac/Safari/VoiceOver and will probably also work with Opera/NVDA, Mac/Opera/Voiceover. (In the process currently of expanding testing to include Opera, which seems to be quite strong in accessibility.)