How do I Associating a Label to RadioButtonList control so it is 508 compliant? - radiobuttonlist

Question

I have tried several methods to get this control to pass 508 compliance testing, but they all seem to fail. I do not get feedback from the tester’s, only pass/fail.
I suspect is has to do with the table that is automatically rendered around the Radio Buttons. I suspect that the labels must be inside the table, which is not an option with a RadioButtonList. Here are the methods that I have tried and failed.
Fieldset/legend Solution
ASP/NET Page:
<fieldset>
<legend>Review By:</legend>
<asp:RadioButtonList runat="server" ID="FilterType" AutoPostBack="true" Width="100%"
BorderWidth="1" OnSelectedIndexChanged="FilterType_OnSelectedIndexChanged" />
</fieldset>
Rendered HTML:
<fieldset>
<legend>Review By:</legend>
<table id="ctl00_contentBody_FilterType" border="0" style="border-width:1px;
border-style:solid;width:100%;">
<tr>
<td><input id="ctl00_contentBody_FilterType_0" type="radio"
name="ctl00$contentBody$FilterType" value="1"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$0
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_0">Attending MD</label>
</td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_1" type="radio"
name="ctl00$contentBody$FilterType" value="2"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$1
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_1">CERMe Review
Types</label></td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_2" type="radio"
name="ctl00$contentBody$FilterType" value="3"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$2
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_2">Treating
Specialty</label></td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_3" type="radio"
name="ctl00$contentBody$FilterType" value="4"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$3
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_3">Ward Location</label>
</td>
</tr>
</table>
</fieldset>
Using an AssociatedControlID to link the control to label
ASP.Net Page:
<asp:Label ID="lblHiddenReviewType" AssociatedControlID="FilterType" runat="server">
<div>Review Type:</div></asp:Label>
<asp:RadioButtonList runat="server" ID="FilterType" AutoPostBack="true" Width="100%"
BorderWidth="1" OnSelectedIndexChanged="FilterType_OnSelectedIndexChanged" />
Rendered HTML:
<td>
<label for="ctl00_contentBody_FilterType"
id="ctl00_contentBody_lblHiddenReviewType"><div>Review Type:</div></label>
<table id="ctl00_contentBody_FilterType" border="0" style="border-
width:1px;border-style:solid;width:100%;">
<tr>
<td><input id="ctl00_contentBody_FilterType_0"
type="radio" name="ctl00$contentBody$FilterType" value="1"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$0
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_0">Attending MD</label></td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_1"
type="radio" name="ctl00$contentBody$FilterType" value="2"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$1
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_1">CERMe Review Type</label>
</td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_2"
type="radio" name="ctl00$contentBody$FilterType" value="3"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$2
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_2">Treating
Specialty</label></td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_3"
type="radio" name="ctl00$contentBody$FilterType" value="4"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$3
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_3">Ward Location</label>
</td>
</tr>
</table>
</td>
Surround the Control with its own Panel
ASP.Net Page:
<asp:Panel id="pnlRadial" GroupingText="Review Type: " runat="server">
<asp:RadioButtonList runat="server" ID="FilterType" AutoPostBack="true" Width="100%"
BorderWidth="1" OnSelectedIndexChanged="FilterType_OnSelectedIndexChanged" />
</asp:Panel>
Rendered HTML:
<div id="ctl00_contentBody_pnlRadial">
<fieldset>
<legend>Review Type:</legend>
<table id="ctl00_contentBody_FilterType" border="0" style="border-width:1px;border-
style:solid;width:100%;">
<tr>
<td><input id="ctl00_contentBody_FilterType_0" type="radio"
name="ctl00$contentBody$FilterType" value="1"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$0
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_0">Attending MD</label></td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_1" type="radio"
name="ctl00$contentBody$FilterType" value="2"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$1
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_1">Reviewer</label></td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_2" type="radio"
name="ctl00$contentBody$FilterType" value="4"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$2
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_2">Treating
Specialty</label></td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_3" type="radio"
name="ctl00$contentBody$FilterType" value="5"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$3
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_3">Ward Location</label>
</td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_4" type="radio"
name="ctl00$contentBody$FilterType" value="3"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$4
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_4">Service Section</label>
</td>
</tr>
</table>
</fieldset>
</div>
Any help would be greatly appreciated !!

Answer 1

I would request that the tester to provide more information than pass/fail, at least what they are using to test. Maybe asking the Section 508 Coordinator to get involved may help some. Your first or second snippet should pass. A compliant solution would look like:
<fieldset>
<legend>Review type</legend>
<table role="presentation"> //bonus for the role, not required
<tr>
<td>
<input id="option1" name="myGroup" type="radio" />
</td>
<td>
<label for="option1">Option 1</label>
</td>
</tr>
<tr>
<td>
<input id="option2" name="myGroup" type="radio" />
</td>
<td>
<label for="option2">Option 2</label>
</td>
</tr>
....
</table>
</fieldset>