Should fields labels also be clickable?

Question

I know it's a good UX practice to make radios/checkboxes labels clickable (because radios/checkboxes are usually a bit small) but I have serious doubts over the practice of also making fields labels clickable.

I can't find reliable references about it (with the exception on one single minor website).

Personally I can't see any practical benefit since it's the fields that are supposed to be clicked (and they are usually a lot bigger in size than the label themselves). For instance, clicking a label in order to fill a textarea below seems very counter-intuitive to me.

Answer 1

You have a point that when the clickable area is large enough for text fields, expanding the click area by including the label is no longer relevant. But you should consider the following:

1. This is for consistency. All form fields behave the same keeping interaction predictable.

2. This is an accessibilty concern. You need to associate the label with the input somehow and what is a better way than the default:

<label for="inputx">Label for X</label>
<input id="inputx" name="X">

or

<label>Label for X <input id="inputx" name="X"></label>

This will make the label clickable, that is what browsers do by default. Otherwise you will have to use aria attributes (and hide the label for screen readers otherwise it will be redundant):

<label aria-hidden="true">Label for X</label>
<input id="inputx" name="X" aria-label="Label for X">

or

<label id="labelx" aria-hidden="true">Label for X</label>
<input id="inputx" name="X" aria-labelledby="labelx">

I'm not even sure how well this works for all screen readers while the default behavior works in any case. So keeping the label clickable for all fields, including text fields and textarea's is the easiest to implement and keeps things consistent and predictable for the sake of usability.

Answer 2

For web, per WCAG accessibility guidelines, interactive field elements require accessible names. The native way of doing this is to provide an associated label; when properly wired, the behavior of clicking the label to focus the field is the default/native behavior and requires no additional work on the part of the developer. This is all covered in more detail in jazZRo's answer.

In particular I wanted to provide some challenges to this assertion from your question:

Personally I can't see any practical benefit since it's the fields that are supposed to be clicked (and they are usually a lot bigger in size than the label themselves). For instance, clicking a label in order to fill a textarea below seems very counter-intuitive to me.

I would urge you to consider that not every user of your application might have two fully-functioning hands that they are using to control a mouse. There are several different things that could affect a persons ability to easily target a click target with a mouse-- tremor disorders, missing digits or limbs require prosthetics, or more temporary conditions such as wearing a cast or having another injury. Furthermore, some users might, by choice or by necessity, be interacting with your site using a touchscreen rather than with a mouse. The increased click target afforded by wiring the label to focus the field can be extremely beneficial to users in all of these scenarios. And, remember, if you are using web best practices, you shouldn't need to do any extra work to make this happen-- it would actually be more work to prevent it.

Answer 3

Your example of Radio / Checkbox labels being clickable could in theory apply to text field labels as you're simply increasing the bounding box of the clickable area - however unless your form fields were unusually short in terms of height there would not be much added benefit.

Is there a specific requirement or set of data that you have that is making you consider this functionality?

Answer 4

Actually, are a lot of references that support this practice and none that raise concerns about it.

Mozilla explains pretty well the need for clickable labels, a practice that was adopted in development a long time ago:

When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.

Also, you can check W3C recommendations and the examples on their website:

A label and a form control should be associated with each other either implicitly or explicitly. Web browsers provide the label as a larger clickable area, for example, to select or activate the control. It also ensures that assistive technology can refer to the correct label when presenting a form control.