Don't Be Lazy, Use HTML Labels Correctly

http://blog.goodsense.io/2012/12/07/dont-be-lazy-use-html-labels-correctly/

by sherm8n • 14 years ago

173 55 14 years ago

blog.goodsense.io

cynwoody• 14 years ago

You don't have to link the label to the form element via ID. It's simpler to nest the element within the label.

You may argue that it's simpler (I'd argue it's not), but either way nesting elements inside labels usually breaks assistive technology: http://www.w3.org/TR/WCAG20-TECHS/F68.html

That's a good reason to use the format the author suggested instead of nesting.

crazygringo2• 14 years ago

Why can't assistive technology figure out what a label with a single nested control refers to? The browsers seem to do it just fine.

Once a website reaches a certain scale (especially with rich web apps), global DOM id's become an almost impossible headache to deal with (because of multiple views which duplicate id's, coordination of global names across hundreds of files, etc.).

Global id's are basically an antipattern, whereas labels with nested controls have always seemed pretty workable.

codeka• 14 years ago

The standard explicitly allows a <label> to contain a single input element, http://www.w3.org/TR/html-markup/label.html:

  The label element may contain at most one descendant input element,
  button element, select element, or textarea element.

So it seems odd that it's considered invalid here. Of course, it's not unusual that the W3C is contradicting itself...

joahua• 14 years ago

Usually? Which ATs are you describing? We care about this sort of thing and weren't aware of that constraint - a quick Google doesn't highlight any obvious issues with Jaws or NVDA, except for this [1] in 2003. But since then there have been huge changes in assistive tech - pretty sure the whole ARIA thing didn't exist back then, and there's probably more choice in ATs now than ever before.

1. http://www.velocityreviews.com/forums/t155840-nesting-inside...

mistercow2• 14 years ago

>You may argue that it's simpler (I'd argue it's not)

I would argue that when you're creating dynamic content, dealing with IDs is inelegant. If I already have a reference to a DOM node, I shouldn't have to assign it a unique ID just so I can tell another node about it.

lambda2• 14 years ago

This is why I hate the Web Content Accessibility Guidelines:

> In the following code examples, the names associated with the text input controls are not properly determined by assistive technology.

Which assistive technology? Why doesn't the assistive technology simply implement HTML properly? Associating a label with an element by nesting has been standardized since HTML 4.01 at least (I haven't bothered to check further back), and I'm pretty sure all of the browsers implement it properly.

Now, instead of simply writing a bunch of guidelines that say vaguely "not properly determined by assistive technology", they could show the results of testing, in a format similar to http://caniuse.com/. That would actually be useful; you could determine if the problem still exists or not, based on how many people are using some old buggy version of assistive technology.

But, rather, the WCAG are simply a bunch of prescriptive rules with vague justifications, and then various people on standards list try to argue that because there are laws that have been written that specify that certain things must comply with accessibility standards, these kinds of guidelines have the force of law and thus trump all other interests in standardization.

ZeroGravitas• 14 years ago

This was an issue in the past, but it appears to have been fixed. See here for comprehensive test results:

http://www.html5accessibility.com/tests/form-labels.html

Note that according to this document the use of ARIA, the new hotness in accessibility, actually confuses some combinations of accessibility tool and browser. Should we not use that?

I have to say, as someone with an interest in accessability, the tendency for the accesability "scene" to opt for changing the behaviour of millions of web devs by writing obscure documents that the vast majority of HTML coders will never be aware of, much less read, with fewer still understanding or following the complicated advice within, rather than working on fixing the handful of relevant software is baffling to me.

Maybe it's a holdover from when a stagnant IE6 ruled over the internet with no changes in sight. Now I'd rather see them apply market pressure by recommending anyone with accessability issues uses a browser/OS/accessability tool that actually works and put their effort into the various viable open source efforts.

sherm8n6• 14 years ago

Good point. You can do it that way too. I find it sometimes hard to use when you need to position the the radio button and the label text separately.

eurleif• 14 years ago

Whatever you do, don't make clicking the label do something other than check/uncheck the box, like how Xfinity's boneheaded login page brings up a 'help' screen when you click on 'Keep me signed in': https://login.comcast.net/login

AgentConundrum• 14 years ago

Also, when that help screen appears, everything else on the page darkens out except the CAPTCHA (presumably because it's done in flash). It probably leaves some users confused about what the dancing text has to do with the help page, and what they are supposed to do with it in that context.

38253• 14 years ago

also why does the tooltip say the same thing as the link itself?

http://i.imgur.com/fdkpt.png

jakebellacera• 14 years ago

Beat me to it. I always click on that label expecting it to tick the box. Why must people avoid convention?

obilgic• 14 years ago

They have an ad banner almost as big as the login box, why would they be bothered with usability of that checkbox?

barking• 14 years ago

I just went over there and clicked it and all that happened was the box checked/unchecked :(

Maybe it's because I didn't fill in any other boxes?

The thing I hate is the warning that tells me that I'm about to view pages over a secure connection

38253• 14 years ago

That is coming from the browser and is a good thing.

sherm8n6• 14 years ago

Agreed. If you're going to give an unexpected user experience, it better be a damn good one.

munger• 14 years ago

Especially important when you have mobile users filling out forms.

elchief• 14 years ago

<label><input type="checkbox"/>Stuff</label>

is easier.

mintplant• 14 years ago

See nowarninglabel's comment below [1]; this doesn't carry the same benefits to accessibility as the ID-linking method.

[1] https://news.ycombinator.com/item?id=4890833

geetee• 14 years ago

Why isn't the burden placed on assistive technology to operate properly? There is this habit in web development of being enablers for users with dated clients that's holding back progress. I know it sounds cold in this context, but it's the truth.

tomjen3• 14 years ago

Then these users should upgrade their software.

thomas-st• 14 years ago

Not only is it easier and doesn't require the use of an ID, it also allows you to click in the space between the checkbox and the label text.

Too2• 14 years ago

Came here to post this. This is very important and as a bonus, if you add some padding to the label the click area around the actual radio button becomes a bit larger.

You can combine nesting with for="id" to make sure you get complete compatibility.

ebzlo• 14 years ago

I always remembered this as being "invalid" HTML, but a quick Google search turns up nothing. Can anybody shed some light?

hayksaakian• 14 years ago

Let me try with embedded ruby:

<%= label_tag :is_premium, 'Toll free? (e.g. 1-888--*)' %> <%= check_box_tag :is_premium, true, params[:is_premium] %>

Am I doing it right?

zalew• 14 years ago

I am lazy. Django forms do it for me.

shakeel_mohamed• 14 years ago

I've always used nested elements within a label tag, I've been advised to do so by people specifically concerned with HTML accessibility issues.

bflesch• 14 years ago

Perhaps LinkedIn is doing this on purpose? It seems like this is a feature they would not like to see used very much, and by A/B-testing they discovered that people use anonymous posting way less when confronted with such a non-standard checkbox label behavior.

I think "normal" checkbox label behavior is very much ingrained in the web development community, thats why I suppose the developers at LinkedIn know about it as well.

sherm8n6• 14 years ago

Perhaps, but the other options to make it not anonymous don't allow label clicking either.

diggan• 14 years ago

My guess is that this isn't because of lazyness but because of getting users NOT to check something. I often find that opt-outs of social sharing, sending statistics or something else that the application will benefit from isn't linked to the label. Maybe because they want to make it harder to check/uncheck?

nicholaides• 14 years ago

I'd love to see a browser plugin that corrects this. There are so many sites that just don't bother.

chib• 14 years ago

This really bugs me. My bank's website doesn't use them correctly!

davedx• 14 years ago

> I’m surprised that LinkedIn doesn’t use labels correctly.

I'm really not. My experience with LinkedIn in terms of production quality code has been quite bad - not being able to unsubscribe from emails because of bugs that crash the website among the most annoying one.

jplur• 14 years ago

This is the first time I've heard of labels. A lot of us learned html from googling and ending up on w3schools, which is not the best reference. http://w3fools.com/ has a good list of the erroneous info.

sherm8n6• 14 years ago

Unless you're a frontend developer, most people don't use labels. That and fieldsets. I still don't use those.

muan• 14 years ago

They use labels (correctly) in almost all the forms on the site except this one. They might have gone through the trouble to take it out on purpose.

psadri• 14 years ago

At Polyvore, we wrote our own centralized form generation library which always emits <label> with the correct behavior.

Another neat thing it does is optionally render dropdowns with fewer than 3 choices as radios -- 1 click to select vs 2.

sherm8n6• 14 years ago

That's impressive. Dealing with forms is harder than most people think. Ever try positioning or styling input fields? It's not trivial like other html elements. That's why wufoo is popular and bootstrap puts so much effort on forms.

Don't Be Lazy, Use HTML Labels Correctly

Related Stories