This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 24278 - should links be allowed inside labels?
Summary: should links be allowed inside labels?
Status: RESOLVED FIXED
Alias: None
Product: HTML WG
Classification: Unclassified
Component: HTML5 spec (show other bugs)
Version: unspecified
Hardware: PC Windows NT
: P2 normal
Target Milestone: ---
Assignee: steve faulkner
QA Contact: HTML WG Bugzilla archive list
URL:
Whiteboard:
Keywords: a11y
Depends on:
Blocks: 24279
  Show dependency treegraph
 
Reported: 2014-01-13 10:29 UTC by steve faulkner
Modified: 2014-01-16 10:27 UTC (History)
6 users (show)

See Also:


Attachments

Description steve faulkner 2014-01-13 10:29:46 UTC
"Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements."
http://www.w3.org/html/wg/drafts/html/master/forms.html#the-label-element
example:
<label for="test"><a href="http://google.com">google</a></label><input id="test" type="checkbox">  

or if you prefer a real world example:

<input id="boston_region" type="checkbox" name="locations" value="boston_region">

<label for="boston_region">
	<a id="x:219752177.6:mkr:dtnContent" 
	class="igdt_Node igdt_NodeParent"  href="#" 
	title="BOR - Boston Region" 
	mkr="dtnContent">BOR - Boston Region</a>
</label>


this breaks the expected behaviour of a label activating the control in IE/chrome/firefox. 

suggest changing to "no descendant interactive elements"
Comment 1 steve faulkner 2014-01-13 12:19:03 UTC
email to list on proposed change: http://lists.w3.org/Archives/Public/public-html/2014Jan/
Comment 2 Mallory 2014-01-14 08:14:35 UTC
I, and many others apparently, use this construct quite regularly:

<input type="checkbox" name="voorwaarden" id="voorwaarden">
<label for="voorwaarden">I have read and agreed to the <a href="/voorwaarden">General Terms and Conditions</a>.</label>

Removing this would probably mean relying on aria-describedby on a separate element, or hope the user's attention can remember that somewhere at the top of the form was a link to the terms even by the time they've worked their way to the bottom.

As a hack, I've also used anchors within labels for help text/extended label info where a natively-focusable element was preferred for simple CSS hiding and showing. However, as a hack, and now that everyone does everything with Javascript nowadays anyway, I wouldn't let this reason hold against this bug. But the first example would still hold for me.
Comment 3 steve faulkner 2014-01-14 11:01:37 UTC
I agree that restricting the use of links inside labels is not a good idea.
What I have done is add a note in the spec about the positive effect for usability/accessibility of labels as it increases hit area of the labeled control, and that linking label text negates this.
https://github.com/w3c/html/commit/11c025f70bf7364e37cec508592c99916f92c3c8
Comment 4 github bugzilla bot 2014-01-15 15:08:46 UTC
Commit pushed to master at https://github.com/w3c/html

https://github.com/w3c/html/commit/672b711b44f9d23a285b4d092b9927470667b14c
modified label usage note

thanks Jukka, see bug 24278
Comment 5 github bugzilla bot 2014-01-15 15:39:37 UTC
Commit pushed to master at https://github.com/w3c/html

https://github.com/w3c/html/commit/23ca78557ef3b45b9ab2ca4968796273494a17ba
final tweak to label usage note

see bug 24278
Comment 6 steve faulkner 2014-01-15 16:01:10 UTC
EDITOR'S RESPONSE: This is an Editor's Response to your comment. If you are
satisfied with this response, please change the state of this bug to CLOSED. If
you have additional information and would like the Editor to reconsider, please
reopen this bug. If you would like to escalate the issue to the full HTML
Working Group, please add the TrackerRequest keyword to this bug, and suggest
title and text for the Tracker Issue; or you may create a Tracker Issue
yourself, if you are able to do so. For more details, see this document:

   http://dev.w3.org/html5/decision-policy/decision-policy.html

Status: partially Accepted
Change Description: added usage note see commits Comment 4 and Comment 5
Rationale: after discussion agree that links in labels should be allowed, but useful to make devs aware that labels have acc/usability benefits that are effected by inclusion of links.
Comment 7 github bugzilla bot 2014-01-15 16:10:26 UTC
Commit pushed to master at https://github.com/w3c/html

https://github.com/w3c/html/commit/5e3787000ce7d50ed8264e7fb84ed3493bdd8709
added markers for Bug 24278 fix
Comment 8 github bugzilla bot 2014-01-16 10:27:29 UTC
Commit pushed to master at https://github.com/w3c/html

https://github.com/w3c/html/commit/c0616af1947d68ffa2c8546cab193326be3d4883
fiddle once more with label example

see bug 24278