ASP.NET CheckListBox 508 Compliance - asp.net

Question

I have a CheckListBox and specify the ToolTip on the items. When rendered, it shows a span around the checkbox (and label) and it's the span that has he title attribute on it, not the checkbox (input type=checkbox).
Does anyone know how to set the title attribute on the input element instead of the surrounding span?
In order to be 508 compliant, I need to have the title attribute on the input element, not on the span.
Edit: Note that I would prefer to do all the necessary changes in C# on the server side. I would prefer not to have to do it in javascript/jquery.

Answer 1

I should have tested before I posted. The quickest way is to use old fashioned html controls with the attribute runat="server". You can then reference your individual checkboxes by their IDs. For example:
<asp:Panel ID="BrowserCheckBoxList" runat="server">
<ul>
<li><input id="CheckBoxList1_0" type="checkbox" name="" value="Chrome" title="Chrome" runat="server" /> <label for="CheckBoxList1_0">Chrome</label></li>
<li><input id="CheckBoxList1_1" type="checkbox" name="" value="FireFox" title="FireFox" runat="server" /> <label for="CheckBoxList1_1">FireFox</label></li>
<li><input id="CheckBoxList1_2" type="checkbox" name="" value="IE" title="IE" runat="server" /> <label for="CheckBoxList1_2">IE</label></li>
<li><input id="CheckBoxList1_3" type="checkbox" name="" value="Opera" title="Opera" runat="server" /><label for="CheckBoxList1_3">Opera</label></li>
<li><input id="CheckBoxList1_4" type="checkbox" name="" value="Safari" title="Safari" runat="server" /><label for="CheckBoxList1_4">Safari</label></li>
</ul>
</asp:Panel>

Answer 2

Been there. JavaScript wouldn't help you with 508 anyway since it doesn't change the source code.
This should fix it for you:
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
foreach(ListItem li in CheckBoxList1.Items){
li.Attributes["title"] = "my title";
}
}