Nesting inside label tags is not a good idea?

[Samuël van Laere]

I've had my website's test page tested by two visually impared internet
users,
they both are blind and as such use a device that allows them to read the
content of a website in braille.
The test was succesfull, though one of them told me that i should change
this:

<label for="radio">
<input name="radio" type="radio" id="radio1" value="1">
Oneens</label>

to this:

<input name="radio" type="radio" id="radio1" value="1">
<label for="radio1">Oneens</label>

Apperently some software called Jaws seems to like the latter best.
So in short i should not nest form elements in the label tags.

What are your opinions on this?



With regards,
Samuël van Laere

 

[Jukka K. Korpela]

<label for="radio">
<input name="radio" type="radio" id="radio1" value="1">
Oneens</label>

to this:

<input name="radio" type="radio" id="radio1" value="1">
<label for="radio1">Oneens</label>

Apperently some software called Jaws seems to like the latter best.

Both constructs are correct, not just syntactically but also by WAI
guidelines.

In the former case, you could omit the for="..." and id="..." attributes, as
far as logic goes, but due to practical problems in browsers, it's probably
best to keep the redundant markup.

The choice between the two is not clearcut, since the former helps people
with motoric disabilities. The reason is that on IE, it creates a situation
where you can click on the label text to toggle the radio button setting,
instead of needing to hit the small button. (See
http://www.cs.tut.fi/~jkorpela/forms/kbd.html )

Anyway, if you stick to the simple rule of putting just one logical entry
(an input field and the associated label text) on one line, I think
accessibility will be much above the average and things should work
reasonably on speech browsers too. The extra features created by <label> can
be nice, but usually not vital.

 

[Samuël van Laere]

Both constructs are correct, not just syntactically but also by WAI
guidelines.

In the former case, you could omit the for="..." and id="..." attributes, as
far as logic goes, but due to practical problems in browsers, it's probably
best to keep the redundant markup.

The choice between the two is not clearcut, since the former helps people
with motoric disabilities. The reason is that on IE, it creates a situation
where you can click on the label text to toggle the radio button setting,
instead of needing to hit the small button. (See
http://www.cs.tut.fi/~jkorpela/forms/kbd.html )

Anyway, if you stick to the simple rule of putting just one logical entry
(an input field and the associated label text) on one line, I think
accessibility will be much above the average and things should work
reasonably on speech browsers too. The extra features created by <label> can
be nice, but usually not vital.

Well i've learned something new here Yucca, you've got all the information i
need right on your site.
Bookmarked it allready.

Thanks for the wise words.


Regards,
Samuël van Laere

 

[Chris Morris]

The choice between the two is not clearcut, since the former helps people
with motoric disabilities. The reason is that on IE, it creates a situation
where you can click on the label text to toggle the radio button setting,
instead of needing to hit the small button. (See
http://www.cs.tut.fi/~jkorpela/forms/kbd.html )

As far as I can tell from testing, IE 4-6 [1] (and Opera, Mozilla, for
that matter) will do that in either case, regardless of whether the
input is inside or outside the label.
http://www.dur.ac.uk/c.i.morris/formtest.html

 

[Samuël van Laere]

As far as I can tell from testing, IE 4-6 [1] (and Opera, Mozilla, for
that matter) will do that in either case, regardless of whether the
input is inside or outside the label.
http://www.dur.ac.uk/c.i.morris/formtest.html

I've tested it on IE5.5, IE6.0, Mozilla 1.5 and Opera 7.20 and it works.
Since it works i might as well change it, Jaws user's will sure be
gratefull.
Thanks for the effort Chris.


With regards,
Samuël van Laere