Revealing Hidden Checkboxes

The following work was brought about by one of our users having a problem with his online bank – read about how we fixed it for him on this, other page.

This online banking site replaces simple check-boxes with a trick to make them visually similar to a mobile “app”.   The way they are implemented, though, hides them from a screen-reader.

The checkbox is not correctly labeled either, but one of our other fixes (Automatic form labeling) corrects that.

If you have F123 Access installed, try visiting that page with and without F123 Access activated (remember to refresh the web-page after you switch “Active” on and off.)  For those of you who do not know Serbian, you can find an “ENG” link to render the page in English. After that, click on “Open New Account” and you will be presented with a form which includes an element “I agree …” which requires checking of a check-box.

For the technically inclined, what our automated fix looks for in the HTML are certain pre-defined patterns that can be used to match this type of visual, but inaccessible checkbox element. In this case, the pattern is a “div” with the class attribute containing the word “checkbox”, with a child input element of type checkbox. We test to see if any ARIA attributes have been set in the “div” to make the checkbox visible to screen-readers. If not, we change its display style and do some positioning so that our fix won’t make a difference visually.

What the website needs to do for all its screen-reader users is to change the style parameters of the checkbox. At present it is hidden by setting “display:none” but the accessible way to do this is to simply position it off the page.  Also, the form labels relationships need to be properly set up so that our Automatic Labeling fixes are not needed.