RE: Considering order: labels for checkboxes and radio buttons

There are two situations to consider. If a screen reader user is navigating in "forms mode", the behaviour of your two examples will be the same because only the radio button receives focus. If they are navigating in "virtual cursor mode", both the radio button and label are read out and the behaviour may well vary between screen readers. You would need to do some tests to see if the user experience is acceptable.

In the past I have found that adding an aria-label attribute to the radio button has improved the user experience and made it more consistent even though it is redundant from a WCAG compliance perspective and arguably should not change the behaviour at all.

Also, bear in mind that you can use the aria-flowto attribute to adjust the reading order for assistive technologies. That might be a way to improve the user experience if you are not able to make the changes you want to the visual appearance.

Steve Green
Managing Director
Test Partners Ltd



-----Original Message-----
From: Taliesin Smith <talilief@gmail.com> 
Sent: 04 July 2019 12:00
To: w3c WAI List <w3c-wai-ig@w3.org>
Subject: Considering order: labels for checkboxes and radio buttons

Hi Folks,
For blind access and accessibility does it matter if the HTML label element comes before or after its associated input element?

This seems like a really basic question, and I am not sure why I don’t actually have a solid answer for myself. Obvious for some control elements the label should, indeed come first, but for checkboxes, does it matter? Is there a preferred order?

Code sample:
<label for=“my-checkbox”>My Accessible Checkbox</label> <input type=“checkbox” id=“my-checkbox” >

<input type=“checkbox” id=“my-checkbox” > <label for=“my-checkbox”>My Accessible Checkbox</label>

Taliesin

Received on Thursday, 4 July 2019 11:36:38 UTC