Search code examples
asp.netcheckboxsection508

ASP.NET CheckListBox 508 Compliance

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.

Solution

  • 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>