RadFormDecorator –Skinned Radio Buttons, Checkboxes, Focus Dots and Accessibility

The sole purpose of this blog post is to answer to frequently asked questions concerning the support of the visual clues (focus dots) of the checkboxes and radio buttons styled with RadFormDecorator.

The focus dots that appear upon tabbing on a clickable HTML element (a, input, button, checkbox, radiobutton, etc) is a visual clue showing that the element is accessible via the keyboard or other device facilitating its manipulation. Unfortunately, browsers differ in the support of focus dots. According to the accessibility specifications, a checkbox or radio button has to be associated with a label tag, in order to make the clickable area of the control larger and thus easier to click:

<input type="checkbox" id="CheckBox1" /><label for="CheckBox1">Checkbox</label>

In Internet Explorer 6 and 7, the focus dot clues are applied to the label, rather than to the element itself, however in version 8, the visual clue of the focus dots has been implemented to the input itself, which is semantically correct and is supported by the rest of the modern browsers. The picture below shows the location of the focus dots in the most popular browsers:

On the first row are the default browser checkboxes, and on the second – checkboxes styled with the current implementation of RadFormDecorator. Although we have taken care to preserve the native tabbing and keyboard support, the focus dots (although actually working) are not visible in IE8, FireFox and Opera, because in the process of skinning we hide the “real” checkbox or radio button with position: absolute and text-indent: -9999px by actually moving these controls away from browser's viewport. Fortunately (as discussed earlier), with Google Chrome and Apple Safari, the focus dots are visible both when RadFormDecorator is enabled and disabled due to the support of the CSS -khtml-appearance property that allows to semantically apply checked / unchecked background images directly to the controls, rather than to their respective labels as we do with the other browsers.