"label for"-- but why?

"label for"-- but why?
0

#1

Maybe this has been discussed before, but I’m having trouble understanding the purpose of “label for.”

What I understand so far about “label” is that it creates a grouping/ association between the enclosed elements (I’m sorry if I’m butchering the jargon here… just started coding. Literally.). But why add on the “for”?

I know the (https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons)

says that

Blockquote
It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element.

But what does that actually MEAN? What kind of assistive tech are we talking about here?

Also, as a person new to the coding world-- is this a stupid question? (trying to get my sea legs… or is it my C legs!!!.. Oh, God.)


#2

Really it’s not hard to guess the Solution Look into lesson then solve the Problem. Keep read it first.


#3

No-- I got the solution.

My question is WHY– why is it considered best practice to use a “label for”?

And what assistive technologies are being discussed in that lesson?


#4

Clicking a label associated with an input will activate that input. It’s more obvious when used with a checkbox or radio button.


#5

It’s not a stupid question. In the context of web development, “assistive technologies” often refer to software designed for the blind or those with visual impairment or visual processing disabilities. There exist other assistive technologies that give people with disabilities a way to interface with computers. Many people may not be able to use a mouse, a keyboard, or both. Things like label for establish a standardized interface so that the code you write (your website) can be understood by code that someone else writes.


#6

Thanks!!

So then any insight on what “assistive technologies” would be?

–nevermind. @ArielLeslie answered it.


#7

This was a beautiful answer. THANK YOU.


#8

It’s not just for disabled users. It’s standard behaviour that if you click on a label then the associated input should become focused. for is the thing that provides this functionality. So if you don’t use the attribute when writing an HTML form, that form will not behave as expected.

What it does is increases the target area for selecting an input. Say there was no for attribute on the label, and you needed to select the input directly to interact with it. Using a mouse, selecting the actual input element is easy - mice are very precise. Most people don’t use mice though. And without a mouse it can be extremely difficult to select inputs directly, (particularly check boxes/radio buttons)


#9

Depends. If you have Parkinson’s disease, selecting a tiny radio button with a mouse isn’t easy at all. And even if you have no motor or visual impairments, it’s still better UX to have more surface area to click — you waste less time on aiming the cursor, and the misclick rate is lower.


#10

Yes, definitely, I should’ve qualified that . Bad eyesight kills precision as well

Edit: here is an example that makes pretty heavy use of standard accessibility features built into HTML, for included, 'tis awesome:

https://heydon.github.io/beadz-drum-machine/

(the guy who built it is an accessibility consultant, he was using it as an example of properly marked up HTML at a talk I saw him give)