You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
While doing accessibility testing on a form that has used the code for the radio button in WET templates, I noticed that the radio button gets deselected if you navigate to another page and return. I know that this is not recommended but a link to the some of the guideline exists within this form so a user may click the link and return to the form.
I did a few tests and notice that if I put the <input> before the <label>, the radio doesn't get deselected when navigating to another page and return.
Mind you that the css is not customized for it but asking if there is another way to fix this issue.
I have also tested with a screen reader and this is read properly and also validates.
https://wet-boew.github.io/v4.0-ci/demos/formvalid/formvalid-en.html#status1
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
While doing accessibility testing on a form that has used the code for the radio button in WET templates, I noticed that the radio button gets deselected if you navigate to another page and return. I know that this is not recommended but a link to the some of the guideline exists within this form so a user may click the link and return to the form.
I did a few tests and notice that if I put the <input> before the <label>, the radio doesn't get deselected when navigating to another page and return.
Mind you that the css is not customized for it but asking if there is another way to fix this issue.
I have also tested with a screen reader and this is read properly and also validates.
https://wet-boew.github.io/v4.0-ci/demos/formvalid/formvalid-en.html#status1
Example of <input> and <label> reversed.:<fieldset class="chkbxrdio-grp">
<legend class="required"><span class="field-name">4Citizenship status</span> <strong class="required">(required)</strong></legend>
<div class="radio">
<input type="radio" name="bbstatus" value="1" id="bbstatus1" data-rule-required="true" /><label for="bbstatus1"> Canadian citizen</label>
</div>
<div class="radio">
<input type="radio" name="bbstatus" value="2" id="bbstatus2" /><label for="bbstatus2"> Permanent resident</label>
</div>
<div class="radio">
<input type="radio" name="bbstatus" value="3" id="bbstatus3" /><label for="bbstatus3"> Work permit</label>
</div>
<div class="radio">
<input type="radio" name="bbstatus" value="4" id="bbstatus4" /><label for="bbstatus4"> Other</label>
</div>
</fieldset>
Beta Was this translation helpful? Give feedback.
All reactions