Jquery Mobile - Checkbox and radio button accessibility
Hi,
I am not a developer but an accessibility tester. I was evaluating a form coded with Jquery Mobile . The check box is coded using the following code:
<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Agree to the terms:</legend> <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" /> <label for="checkbox-2">I agree</label> </fieldset> </div>
But in the generated output legend tag is converted into
<div class="ui-controlgroup-label" role="heading">I agree </div>
Because of this Rational Policy Tester ( Accessibility validation tool) complains that Fieldset should contain Legend. Also,when tabbed to the checkbox, Jaws screenreader v 13 is not announcing the Legend/heading "I agree"
Similar problem exists for radio button.
Is it possible to retain Legend tag in the generated code and have both Fieldset and Legend tags next to each other without any divs in between Fieldset and Legend tags.