15

For checkboxes in forms, you often need an accompanying link for individual options. This regularly comes up in checkboxes to accept terms of use. Designers love to put this link inside the checkbox label like this:

A checkbox form element with the text Please agree to the terms of use, where the terms of use are underlined to indicate a link

I disagree with this, as clicking on the label should toggle the checkbox. Having the link inside the label reduces the click target size, and creates two click targets right next to each other.

I prefer a separate link below the checkbox label:

The same checkbox, but with the link to the terms of use as a separate link below the label

Am I correct that this is better for usability and accessibility? If so, is there an authoritative source for this?

This related question only talks about the entire label being a link, which is obviously bad. My colleague argues that it's OK if only part of the label is a link, since there's still a large enough click target for the label itself. Technique H44 only talks about clickable labels, but doesn't mention anything about links inside those labels.

Improve this question
12
  • 1
    Are you primarily concerned about accessibility (with assistive technology) or general usability? I would prefer the first approach for its conciseness and clarity.
    – Bergi
    Commented Jan 18 at 18:48
  • 7
    If separated, I would recommend to place the instruction ("Please read the terms of use") first, above the checkbox that lets me confirm "I agree to the terms of use". Also I'd still put the link only on the words "terms of use", not on the entire sentence.
    – Bergi
    Commented Jan 18 at 18:50
  • 1
    An answer already mentioned the issue with this with screen readers, so I won’t create a new one talking about that, but I feel compelled to point out that this is a great excuse to learn the basics of using a screen reader (and possibly keyboard-only navigation). It’s a remarkably useful skill to have as a UI designer because it lets you test how people who need one will actually interact with your website/app, which makes it much easier to make a site/app that’s properly accessible.
    – Austin Hemmelgarn
    Commented Jan 18 at 21:32
  • 2
    Your proposed "improvement" made the linked text a smaller font. That's a problem all on its own.
    – Ben Voigt
    Commented Jan 18 at 21:49
  • 1
    This is a "feature" of the Close Vote dialog on many SE sites. I've stopped counting how many times I've accidentally followed a link when trying to select one of the options (using a mouse).
    – Toby Speight
    Commented Jan 19 at 8:26

4 Answers 4

Reset to default
20

Screen readers will read the first example something like this:

Please agree to the [pause]
link, terms of use.

As you can imagine, the broken up sentence can be confusing.

So the second example is preferred. To make the relation between the label and the link clear for screen reader users, you can add the aria-describedby attribute to the label that points to the link.
See here for more info about aria-describedby.

Improve this answer
7
  • Thanks! Demonstrating how screenreaders will read the sentence is a good argument! In combination with the click-target issue, this should be convincing enough :)
    – MoritzLost
    Commented Jan 18 at 11:38
  • 12
    It is extremely common to have hyperlinked words in the middle of sentences. (I see four such links on this very webpage!) Why would it be any more confusing in this particular case? Or are you saying the practice should be avoided in general?
    – Carmeister
    Commented Jan 18 at 18:42
  • 5
    @Carmeister It’s partly about user expectations. It’s unusual to have mixed controls (links are controls from a UX perspective) nested within other controls, so users will generally not expect this. However, it’s also about effective navigation. Consider how this structure interacts with tab indexing.
    – Austin Hemmelgarn
    Commented Jan 18 at 21:27
  • 1
    Accessible UI is going to have the text toggle the checkbox on or off when clicked or tapped, e.g using: <input type="checkbox" name="checkbox" value="value"> <label for="checkbox_id">Text</label> So clicking on a link inside a label would create a conflict.
    – Stonetip
    Commented Jan 18 at 23:48
  • 1
    @Barmar Having the link in the label would be a nested control, because the label is part of the checkbox control as almost every web browser and UI toolkit implements checkboxes.
    – Austin Hemmelgarn
    Commented Jan 19 at 17:21
6

For touchscreen users, the click targets are better separated for link inside the label:

Drawing of user finger clicking on labels

The practice of putting a link inside label seems widespread enough that in my opinion it won't confuse users. That may depend on audience.

In any case, don't place two click targets that close vertically, it is very difficult to click accurately on one of them.

Improve this answer
1
  • Would it be an improvement if the link is aligned to the right? This would create more distance and satisfy @jazZRo's answer.
    – Parrotmaster
    Commented Jan 29 at 12:26
0

The solution 2 is the recommandation on MDN

Don't place interactive elements such as anchors or buttons inside a label. Doing so makes it difficult for people to activate the form input associated with the label.

---> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#accessibility_concerns

Improve this answer
0

The terms links should be above the checkbox, so that the user can read the terms first before going to check the checkbox.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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