RE: Checkboxes / radio button sizes on mobiles

> I'm not a big fan of including <input.> elements inside <label.> elements, however, in preliminary testing this pattern seems to be reasonably accessible.

I've seen this too - in this situations the input really has two labels, one implicit and one explicit.  One doesn't have an accessible name and one does.    In the other examples I've seen there are some factors that may cause Talkback on Android to not announce the label but I don't recall what the issue was.  So my concern would be is this techniques support well across AT on different devices and does having two labels cause any formal issues/violation.

Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group 
jon.avila@ssbbartgroup.com
703.637.8957 (o) 
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter


-----Original Message-----
From: Alistair Garrison [mailto:alistair.j.garrison@gmail.com] 
Sent: Thursday, December 17, 2015 7:35 AM
To: public-mobile-a11y-tf@w3.org
Subject: Checkboxes / radio button sizes on mobiles

Hi, 

I've noticed that the size of checkboxes / radio buttons rendered on mobiles is often very small.  This, amongst other things, seems to be leading developers to using more and more customised checkboxes / radio buttons that are larger (finger size).

I was wondering if a technique was needed, relating to creating custom checkboxes / radio buttons - that have a larger touch area.

One pattern I'm increasingly seeing is:

<label>
<input id="customCheckbox" tabindex="0"> <span class="customDesign"></span> </label> <label for="customCheckbox">Label for checkbox</label>

The span that creates the visual custom checkbox is overlaid on the real checkbox using css. 

I'm not a big fan of including <input.> elements inside <label.> elements, however, in preliminary testing this pattern seems to be reasonably accessible.

I was wondering if anyone else had seen a better way of achieving the above.

All the best 

Alistair

Received on Thursday, 17 December 2015 13:10:42 UTC