Monday, April 23, 2012

How to make ASP.NET RadioButtons and CheckBoxes Section 508 Compliant?

I had a website fail a Section 508 Compliance test recently because of some radio buttons.The tool used to test was WAVE in FireFox.
The error was something like your selects have to have a label or a title attribute.
I thought cool, this will be a quick fix, I will just set the ToolTip property on the RadioButton control and be done.

I tested to verify that it worked. Then I remembered a strange behavior of these controls. When they render the output to the page, they insert a HTML input radio control inside of a HTML span control. The tooltip we provided is then used to create a title attribute on the span control and NOT on the input radio control. Therefore, the page will still fails the 508 test.

To solve the problem I just added a line of code on the page load:





This works for CheckBox controls too.
This is one of those HIDDEN properties that is there, but you may not have seen it before.
I have used it maybe 3 times in my career.

I suppose you could inherit from the base classes, and override the render events in these new classes. Then everywhere in you website, you could use these controls instead of the default RadioButtons and Checkboxes. But if you just want a quick one line fix, here it is.