Checkboxes / radio button sizes on mobiles

• From: Alistair Garrison <alistair.j.garrison@gmail.com>
• Date: Thu, 17 Dec 2015 12:35:13 +0000
• To: public-mobile-a11y-tf@w3.org
• Message-Id: <42BE458F-B389-4D4D-BDAF-F1FF3C09AEB1@gmail.com>

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 12:35:43 UTC