Making A CheckBox In GridView 508 Compliant

June 1st, 2011  | Categories: .NET, 508 Compliance

Since all HHS government websites need to be 508 compliant by May 2013, my company has been running around trying to make them compliant now. We have quite a few old applications which are still being used. It’s my job to review them for compliancy and fix some of them.

The issue I had was with a .NET application. On a search page they’re using a asp:GridView control which gets the results. One of the results is put into a check box (an asp:CheckBox). 508 says there should be a label tag or a title attribute associated with any input form field (even disabled ones):

<asp:GridView ID=”GridView1″ OnSorting=”GridView_Sorting” AutoGenerateColumns=”False” runat=”server” CellPadding=”4″ GridLines=”None” AllowSorting=”True”>
<asp:TemplateField HeaderText=”Attending”>
<asp:CheckBox ID=”Attending” Checked='<%# GetCheckValue(Container.DataItem) %>’ Enabled='<%# GetCheckEnable(Container.DataItem) %>’ runat=”Server” />



The problem is we need to make sure the check box has either a label or a title associated with it.

In .NET you’re allowed to add a ToolTip (title attribute) to asp check boxes. However it added it to a <span> which it generates outside the actual <input type=”checkbox”> code.

After a little while googling around I wasn’t able to find anything that would let me either get the ID (which it generates) so I can put a label next to it or actually have the title IN the check box.

A shot in the dark made it work. I had to add an attribute Text to the asp:CheckBox . This generates a label next to the check box in the client side code.

Since the application I’m working on doesn’t need to display anything next to it, I put the text in a .hide class which hides it.

Text=”<span class=’hide’>Attending</span>”

Some cons are that its label is the same everywhere. I’m sure some mad .NET developer can whip up something that can change it.

  1. October 9th, 2013 at 15:27
    Reply | Quote | #1

    Anyone still looking for an easy answer to this can use something like aria-label=”Select this row” on the checkbox input tag.