I'm working on an admission application page and in one section of it there is a list of checkbox controls indicating the user has read/agreed to various policies or conditions and certifying the information is correct. Some of these labels can be rather long wrapping to 2, 3 or 4 lines depending on the screen size.
Each of the checkboxes are setup similar to:
<label>
<input type="checkbox">
I certify that all the above information is correct yada yada yada...
</label>
While developing the page, one thing that kept happening that I found annoying was I'd accidentally check or uncheck boxes by clicking the label when changing focus from my editor to the browser. When clicking to focus the browser I'd happen to hit one of these long labels.
That got me thinking about shorting the actual tag to only encompass the first few words, or first sentence if there are multiple. For instance
<input type="checkbox" id="certify">
<label for="certify">I certify that all the above information is correct</label> yada yada yada...
Is it worth considering shortening the label like that to avoid accidental changes, or should I just leave it as is?
In this particular case all the checkboxes are required, so accidentally un-checking one would be caught by validation. However I wonder if this could be an issue for an optional but important checkbox.
Alt
+Tab
/ click only in safe areas long time ago (after several frustrating mistakes). And this doesn't happen on Mac - when you click on a non-active window, it only activates, it does not trigger any events on individual elements...