5

I'm wondering if there are any guidelines regarding the size of the 'clickable' area of a checkbox on desktop. I was having a discussion with our developer and when he is testing the product he sometimes missclicks the checkboxes. So it got me wondering if there were any known guidelines for this.

enter image description here

In the above picture the darker area is the current click area. The height of the marked area is 24px. I myself never missclick, neither did the users we tested it on.

For tablet / mobile we do not use the above checkboxes, on mobile / tablet they are larger and somewhat different, the mobile/tablet checkboxes adhere to guidelines like the minimum touch target size.

If you have done any tests regarding this i would love to know.

Update: Thank you for the answers, through the answer of Christophe I found that Microsoft suggests a size of 17px. However they do not offer any details regarding why, perhaps someone has found research for an AA criteria.

10

A new WCAG 2.1 success criteria is "2.5.5 Target Size", but it's a AAA conformance.

The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:
Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;
Inline: The target is in a sentence or block of text;
User Agent Control: The size of the target is determined by the user agent and is not modified by the author;
Essential: A particular presentation of the target is essential to the information being conveyed.

6
+100

slugolicious's answer is correct in the sense that success criterion 2.5.5, which was introduced in WCAG 2.1, defines a minimum target size of 44 by 44 pixels. However, one should really take a look at Understanding Success Criterion 2.5.5: Target Size, which explains the purpose of this success criterion (emphasis mine):

The intent of this success criteria is to ensure that target sizes are large enough for users to easily activate them, even if the user is accessing content on a small handheld touch screen device, has limited dexterity, or has trouble activating small targets for other reasons. For instance, mice and similar pointing devices can be hard to use for these users, and a larger target will help them activate the target.

Touch is particularly problematic as it is an input mechanism with coarse precision. Users lack the same level of fine control when using inputs such as a mouse or stylus. A finger is larger than a mouse pointer, and generally obstructs the user's view of the precise location on the screen that is being touched/activated. (...)

A height of 44 pixels is quite big for checkboxes and radio buttons on the Web or on the desktop, which is one of the reasons why SC 2.5.5 is at level AAA: this is a level that is not recommended for all websites:

It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.

However, you question was about target sizes for checkboxes on the desktop, not the web or on mobile devices. Several operating systems and widget library developers have created guidelines for desktop interfaces, but I have not been able to find recommendations for target size in any of these guidelines. Below are a few examples.

  • 1
    Thank you for the great answer. Indeed there was an AAA level criteria, but I could not find anything or research pointing to an AA equivalent. – Kevin M. Feb 27 at 21:31
  • 3
    While reading the links, I found something on it: docs.microsoft.com/en-gb/windows/desktop/uxguide/… it suggests 17px in total but does not offer any background regarding why. I also personally a bit small. – Kevin M. Feb 27 at 21:44
  • 3
    There's a Chrome extension called Funkify. The free version has a simulator which simulates poor fine motor skills when using a point-and-click device. It would be worth checking your design using a tool like that to see whether you're giving users a big enough space. – Karl Brown Feb 28 at 8:10
  • 1
    @KarlBrown chrome.google.com/webstore/detail/… this one? It seems thery just went into premium only :( – Kevin M. Feb 28 at 8:19
  • 1
    @KarlBrown I found the way to use the free version, had to sign in with chrome... my bad. It is a nice addon to have, thank you. – Kevin M. Feb 28 at 9:19
-3

One thing I would suggest is wrapping your checkbox input inside the label.

<label><input type="checkbox">Click me</label>

This makes the checkbox toggle by clicking the label, not just the checkbox.

You can then add some padding to the label to increase the clickable area, and maybe give some feedback to the user on hover by adding a subtle change in colour to the background - so the user knows that something will happen now if they click.

I guess it kind of depends on what the demographic of the user of your site/app is and what their capabilities are.

  • 3
    Hey Neil, Thank you for your contribution. Your answer is not specifically what I'm looking for, the item in question is already wrapped in a label. What I'm asking if there are any guidelines regarding the size of the click area. – Kevin M. Feb 19 at 14:17
  • 2
    Always try to answer the question for better grading, like in this case, the user was asking for some guidelines, if available, rather than solutions. Don’t worry the main goal here is to keep learning and become a master. – Gilberto De la Garza Mar 1 at 3:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.