Re: Considering order: labels for checkboxes and radio buttons

Technique G162 suggests positioning checkbox and radio button labels to the right of the control
https://www.w3.org/TR/WCAG20-TECHS/G162.html


Positioning the label to the right for checkboxes and radio buttons is specified by most platform UX guidelines for left-to-right languages (i.e. most languages apart from Arabic and Hebrew) 
https://docs.microsoft.com/en-us/windows/win32/uxguide/controls

https://developer.apple.com/design/human-interface-guidelines/macos/buttons/checkboxes/

https://developer.apple.com/design/human-interface-guidelines/macos/buttons/radio-buttons/

https://material.io/design/components/selection-controls.html#checkboxes


Here's what gets read for text input fields with the label in various positions:
https://www.powermapper.com/tests/screen-readers/labelling/input-text-implicit-label-before/ 
https://www.powermapper.com/tests/screen-readers/labelling/input-text-implicit-label-after/ 
https://www.powermapper.com/tests/screen-readers/labelling/input-text-implicit-label-before-and-after/


Best Regards
Mark

-- 
Mark Rogers - mark.rogers@powermapper.com
PowerMapper Software Ltd - www.powermapper.com
Registered in Scotland No 362274 Quartermile 2 Edinburgh EH3 9GL
 



On 04/07/2019, 12:05, "Taliesin Smith" <talilief@gmail.com> wrote:

    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 13:00:56 UTC