Making A CheckBox In GridView 508 Compliant

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

ISSUE
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”>
<Columns>
<asp:TemplateField HeaderText=”Attending”>
<ItemTemplate>
<asp:CheckBox ID=”Attending” Checked='<%# GetCheckValue(Container.DataItem) %>’ Enabled='<%# GetCheckEnable(Container.DataItem) %>’ runat=”Server” />
</ItemTemplate>

</asp:TemplateField>

</Columns>
</asp:GridView>

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.

FIX
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.

TOP