the implicit explicit label

Home / Site Building & Testing / the implicit explicit label

10 Nov 2006 03:38 pm

Edge (F.K.A. philsmears)

P: 370
L: Liverpool, UK

Code:

<label for="email">Email:
<input type="text" name="email" id="email"></label>

I've been using code above as i have found it easy in terms of styling and positioning. However it's been brought to my attention that maybe, just maybe, having the form element inside the label (even though the label and control have been explicitly associated using the 'for' and 'id' attributes) might be an issue as some screen readers skip prompts when label encloses the form element.
Can anyone comment on this?

Design, development and marketing for the web.
Edge Three Sixty Ltd: Web Design Liverpool

10 Nov 2006 03:42 pm

Ben Millard

P: 3683
L: London, UK

Specifically in relation to Jim Thatcher's comments on labelling, which I originally read about on Bruce Lawson's blog. We aren't sure if explicit association would override the bugs caused by implicit association.

I don't have a copy of Web Accessibility: Web Standards and Regulatory Compliance. Does it include what happens when both methods are applied?

Personally, I always put each <label>+<input> pair into a block-level container (usually <div>) so they will render sensibly when CSS is not applied. This is especially important if choosing [to block] CSS from old browsers, but also for handheld devices and text browsers.

Last edited by Ben Millard on 10 Nov 2006 04:32 pm; edited 2 times in total

10 Nov 2006 03:47 pm

Bill Posters

P: 991

I also use both implicit and explicit combined, largely because I find it facilitates the way I prefer to structure forms.
I don't think I'll be changing my approach because maybe, just maybe a UA doesn't do its job properly.

This is one of those things which I'd consider falls below a cut-off point.

My code ain't broke. Their UA's broke. Let them fix that.

Cerbera wrote:

Personally, I always put each <label>+<input> pair into a block-level container (usually <div>) so they will render sensibly when CSS is not applied. This is especially important when hiding CSS from old browsers, imho, but also for handheld devices and text browsers.

You mean you use an element purely for its presentational effect?

Shame on you! Shame on you!

10 Nov 2006 03:56 pm

JackP
Moderator

P: 1832
L: Gateshead, UK

I've got to admit I've fairly recently stopped using implicit labelling. And I'm working on the same theory as Bill: my code is fine - but your user agent might be bust.

[Edit]just to be clear: I was using implicit & explicit labelling; now I'm only using the explicit one[/Edit]

However, I'd be prepared to reconsider if someone could show me that by not adding in implicit labelling as well, I'm causing problems for some UAs which are still fairly common. By which I woud mean versions of assistive tech, or still well used non-assistive tech (is that just "tech"?) as frankly anyone still on IE4.0 who chooses not to upgrade when there are newer and free versions available deserves what they're getting.

Jack Pickard The Pickards Information Services| Blog | Twit

Last edited by JackP on 10 Nov 2006 04:17 pm; edited 1 time in total

10 Nov 2006 04:03 pm

eatyourgreens

P: 1194
L: Greenwich, London

philsmears wrote:

Code:

<label for="email">Email:
<input type="text" name="email" id="email"></label>

Just looking at it from a pedantic, semantic point of view, the form control isn't part of the label for said control, so I'd personally put it outside the label tag.

From a pragmatic point of view, wrapping controls in label tags makes it harder to use multiple labels for a control, which can sometimes be useful.

I'm being very picky, though.

Jim O'Donnell
work: Royal Observatory Greenwich
play: eatyourgreens

10 Nov 2006 04:03 pm

danchamp

P: 705
L: Alloa, Scotland

Cerbera wrote:

Personally, I always put each <label>+<input> pair into a block-level container (usually <div>) so they will render sensibly when CSS is not applied. This is especially important if choosing CSS from old browsers, but also for handheld devices and text browsers.

Me too. I've always had a problem with the semantics of a form control being part of its own label, could never get my head around it.

Dan Champion, Champion IS, Mooch Marketing, Revish

10 Nov 2006 05:01 pm

Edge (F.K.A. philsmears)

P: 370
L: Liverpool, UK

So in summary:

If there does happen to be a significant amount of user agents that fall over it, even though they shouldn't, maybe a rethink is required.

Semantically it's a bit dodgy, but not a showstopper.

Without divs to separate form elements then agents without css or with their own style sheets might have problems with layout.

So I'd say it's curtains for that technique, which is a shame as it was sooo easy to do the layout that way.

Thanks for feeedback folks.

Design, development and marketing for the web.
Edge Three Sixty Ltd: Web Design Liverpool

11 Nov 2006 06:37 pm

nat

P: 60

philsmears wrote:

Code:

<label for="email">Email:
<input type="text" name="email" id="email"></label>

The label tag should be inside the form tag.

Nathalie A
Raspberry Frog

11 Nov 2006 07:36 pm

Ben Millard

P: 3683
L: London, UK

It's a code fragment to demonstrate a specific technique. It's not intended to be a complete form.

Do you have any insights into using implict or explicit associations between <label> and <input> elements? The more, the merrier.

13 Nov 2006 04:44 am

jw_developer

P: 146
L: Peoria, IL USA

I know many are going to have a field day with this. Never the less, I often use a dl when marking up forms. And before any asks, I personally consider the dl to be an associative list rather than specifically for definitions. Given that, this makes perfect sense to me:

Code:

<dl>
<dt><label for="email">Email:</label><dt>
<dd><input type="text" name="email" id="email"></dd>
</dl>

As a bonus is gives me ample hooks for css.

And since I'm talking semantics here, I do think its more semantically correct not have the control inside the label. (is that implicit or explicit, I've always been confused

)

Jonathan Worent

The early bird gets the worm, but the second mouse gets the cheese.

13 Nov 2006 09:54 am

Edge (F.K.A. philsmears)

P: 370
L: Liverpool, UK

jw_developer wrote:

I quite like that approach - and I too tend to take the view that definition lists are associative.

However I sometimes pessimistically wonder how much all our attention to semantics is going to be leveraged by user agents.

Design, development and marketing for the web.
Edge Three Sixty Ltd: Web Design Liverpool

14 Nov 2006 11:11 pm

tierce24

P: 57
L: UK

I also like the idea of using dl. However, how would it sound in a screen reader? Don't they remark that it is a list, or something, and if so, would that be confusing?

15 Nov 2006 12:16 pm

Ben Millard

P: 3683
L: London, UK

Implict: <input> inside <label>.
Explicit: <label for=""> relates exactly to <input id="">.

Since the label text and the input control are already in HTML elements, wrapping each of those in yet more elements seems unnecessary. Also, when CSS is disabled they will typically be rendered most strangely.

Wrapping each pairing within a block-level element should provide plenty of hooks, especially since each control has an id from the explicit for relationships? And you could add a class="checkbox" or class="multiple-select" to the <div> to apply different styling to different types of field.

Also, I don't think it makes sense from a semantics point of view. Even if you view <dl> as being a completely generic name/value grouping (doesn't have to be pairs), the relationship is the wrong way around. The <label> describes the purpose of the <input>, therefore the <label> would need to be in the <dd> while the <input> was in the <dt>. This order would work for radio buttons and checkboxes, but for other controls you'd have an illogical source code order.

I find the main use of semantic correctness in HTML is to make the markup easier to understand and maintain. This has the knock-on effect of making the CSS more logical and easier to maintain, too.

15 Nov 2006 01:08 pm

hypnoticvibe

P: 89

My approach is identical to Cerbera's. I use explicit labeling and put components in DIVs (unless <fieldset> or other tags are appropriate).

15 Nov 2006 11:01 pm

jw_developer

P: 146
L: Peoria, IL USA

Cerbera wrote:

Implict: <input> inside <label>.
Explicit: <label for=""> relates exactly to <input id="">.

Thanks for clearing that up. Thats what I had suspected but wasn't positive.

Cerbera wrote:

Also, when CSS is disabled they will typically be rendered most strangely.

I rather like the default styling you get from using a dl. But I suppose it's not necessarily about who likes what, its about how the user understands it.

Cerbera wrote:

Also, I don't think it makes sense from a semantics point of view. Even if you view <dl> as being a completely generic name/value grouping (doesn't have to be pairs), the relationship is the wrong way around. The <label> describes the purpose of the <input>, therefore the <label> would need to be in the <dd> while the <input> was in the <dt>. This order would work for radio buttons and checkboxes, but for other controls you'd have an illogical source code order.

I think I can see what your saying here. I had never really thought about it that way, and it kinda makes sense. My thinking is that there is a relationship between the label and its control and it is therefore appropriate to mark it up using a dl. And due to conventions sometimes you put the label in the dt (textboxes...) other times you put the control in the dt (radio, checkbox).

I suppose when you look at the semantics as you did, the semantics don't necessarily match up with the display conventions.

tierce24 wrote:

I also like the idea of using dl. However, how would it sound in a screen reader? Don't they remark that it is a list, or something, and if so, would that be confusing?

Thats a good point. Maybe someone w/ a screen reader can let us know.

An alternative method I used once for a school project was to use the label as the block element by giving is a display block. worentj.sharitripp.com/cmweb220_Dreamweaver-CSS/labs/lab1/Hired_Goons/contact.html Forgive me for the class names (left, right) I built the entire site in about 4 hours so I was in a bit of a hurry. One of the advantages to this is that it makes a very large clickable area to select the control. The only downside that I can see is the default rendering when css is off.

Jonathan Worent

The early bird gets the worm, but the second mouse gets the cheese.

Display posts from previous:

Page 1 of 3

Goto page 1, 2, 3 Next

All times are GMT

Web Accessibility Discussion Platform based on phpBB 2.

Accessify Forum is partnered with Accessify.com and owned/maintained by MIS Web Design.

Accessify Forum - Discuss Website Accessibility

Currently Online

the implicit explicit label