E-mail List Archives
Thread: Use of label without input
Number of posts in this thread: 14 (In chronological order)
From: Brian Lovely
Date: Fri, Nov 15 2019 11:19AM
Subject: Use of label without input
No previous message | Next message →
Is there any reason not to use a label as a simple container for text,
without any related input? The best reason I can come up with is "pride in
your work", but that's likely not enough. Minus being associated with an
input via the for attribute, a label element seems to be a non-semantic
container like a div, span, or <p>.
It bugs me that people do this, but I can't find any citable reason to tell
them to stop.
--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: Carly Gerard
Date: Fri, Nov 15 2019 11:28AM
Subject: Re: Use of label without input
← Previous message | Next message →
Hi Brian,
From the MDN Dev documentation on the label element<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label>: "The HTML <label> element represents a caption for an item in a user interface" (emphasis my own).
I interpret that to mean any text that is associated with some kind of user interface control--an input, a select, a textarea, etc. If there's a corresponding control where the user can do something, then label is more appropriate. If it's plain text with no corresponding control, a paragraph should suffice.
Hopefully that helps,
Carly
[Western logo]
Carly Gerard | She/Her/Hers
Web Accessibility Engineer | Web Communication Technologies
Western Washington University
516 High Street, Bellingham WA 98225
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > | = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > | (360) 650-3944<tel:(360)%20650-3944>
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Brian Lovely via WebAIM-Forum < = EMAIL ADDRESS REMOVED = >
Sent: Friday, November 15, 2019 10:19 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Cc: Brian Lovely < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Use of label without input
Is there any reason not to use a label as a simple container for text,
without any related input? The best reason I can come up with is "pride in
your work", but that's likely not enough. Minus being associated with an
input via the for attribute, a label element seems to be a non-semantic
container like a div, span, or <p>.
It bugs me that people do this, but I can't find any citable reason to tell
them to stop.
--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: glen walker
Date: Fri, Nov 15 2019 11:45AM
Subject: Re: Use of label without input
← Previous message | Next message →
I find it silly to use a <label> if you're not labeling anything. You
don't get any extra semantic info from using that element by itself.
The official html spec for the label,
https://www.w3.org/TR/html53/sec-forms.html#the-label-element, says it
should be used with a "labelable element". A list of labelable elements is
provide at https://www.w3.org/TR/html53/sec-forms.html#labelable-element
(which is the same url as the <label> spec but further up the page).
From: Brian Lovely
Date: Fri, Nov 15 2019 11:56AM
Subject: Re: [External Sender] Use of label without input
← Previous message | Next message →
So it looks like it's perfectly legit to use a label instead of a legend as
the group label of a fieldset element.
On Fri, Nov 15, 2019 at 1:45 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> I find it silly to use a <label> if you're not labeling anything. You
> don't get any extra semantic info from using that element by itself.
>
> The official html spec for the label,
>
> https://urldefense.com/v3/__https://www.w3.org/TR/html53/sec-forms.html*the-label-element__;Iw!0Ns9_1dOjwg!Mf7wWYgTjOxjs2lYmelag-QwuoP2BqIL52bi2i8C-08TDVeQew4RnrVp0vfPKmZXIg_lHQ$
> , says it
> should be used with a "labelable element". A list of labelable elements is
> provide at
> https://urldefense.com/v3/__https://www.w3.org/TR/html53/sec-forms.html*labelable-element__;Iw!0Ns9_1dOjwg!Mf7wWYgTjOxjs2lYmelag-QwuoP2BqIL52bi2i8C-08TDVeQew4RnrVp0vfPKmbYZ_N-7g$
> (which is the same url as the <label> spec but further up the page).
> > > https://urldefense.com/v3/__http://list.webaim.org/__;!0Ns9_1dOjwg!Mf7wWYgTjOxjs2lYmelag-QwuoP2BqIL52bi2i8C-08TDVeQew4RnrVp0vfPKmZgqTNUJw$
> List archives at
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!0Ns9_1dOjwg!Mf7wWYgTjOxjs2lYmelag-QwuoP2BqIL52bi2i8C-08TDVeQew4RnrVp0vfPKmbseEZ2Qg$
> >
--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: glen walker
Date: Fri, Nov 15 2019 12:07PM
Subject: Re: [External Sender]Use of label without input
← Previous message | Next message →
Depends what you mean by "legit". The list of "labelable elements" does
not show that a fieldset can be labeled by a <label> element. Look at the
last column of the table in
https://www.w3.org/TR/html53/sec-forms.html#labelable-element.
You'll get a parsing error if you try something like this:
<label for="stuff">hello</label>
<fieldset id="stuff"></fieldset>
On Fri, Nov 15, 2019 at 11:56 AM Brian Lovely via WebAIM-Forum <
= EMAIL ADDRESS REMOVED = > wrote:
> So it looks like it's perfectly legit to use a label instead of a legend as
> the group label of a fieldset element.
>
>
>
From: Mallory
Date: Fri, Nov 15 2019 12:26PM
Subject: Re: [External Sender]Use of label without input
← Previous message | Next message →
I see loose orphan <label> elements all the time. Sometimes I have no idea what the developers were thinking.
But when they try to label a fieldset or a group of inputs (I see this with a label with for matching the id of a div with a radiogroup role too), I ding 'em and correct with a fieldset+legend.
Now the only weird one I've seen which was legit was a label + button. but that's an edge case. Buttons are labellable elements, but they usually have their own text. A common weird case is a label with tabindex made clickable to activate a hidden input type=file. I tell devs there to use a button instead of label and still have the onclick activate the hidden input-- they do this because input type=files are not styleable, and they vaguely remember something about clicking labels to focus/activate their controls, lol.
cheers,
_mallory
On Fri, Nov 15, 2019, at 8:07 PM, glen walker wrote:
> Depends what you mean by "legit". The list of "labelable elements" does
> not show that a fieldset can be labeled by a <label> element. Look at the
> last column of the table in
> https://www.w3.org/TR/html53/sec-forms.html#labelable-element.
>
> You'll get a parsing error if you try something like this:
>
> <label for="stuff">hello</label>
> <fieldset id="stuff"></fieldset>
>
>
> On Fri, Nov 15, 2019 at 11:56 AM Brian Lovely via WebAIM-Forum <
> = EMAIL ADDRESS REMOVED = > wrote:
>
> > So it looks like it's perfectly legit to use a label instead of a legend as
> > the group label of a fieldset element.
> >
> >
> >
> > > > >
From: Brian Lovely
Date: Fri, Nov 15 2019 12:36PM
Subject: Re: [External Sender]Use of label without input
← Previous message | Next message →
Oh Glen, you are so right, thanks for pointing that out. I totally missed
that column
On Fri, Nov 15, 2019 at 2:08 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> Depends what you mean by "legit". The list of "labelable elements" does
> not show that a fieldset can be labeled by a <label> element. Look at the
> last column of the table in
>
> https://urldefense.com/v3/__https://www.w3.org/TR/html53/sec-forms.html*labelable-element__;Iw!0Ns9_1dOjwg!I668vx4gU8CYeJJSVck_raxxrCiynUIPJUs61sKi6_a_ohpRpZzvYfciiddcCnz-gaIlQA$
> .
>
> You'll get a parsing error if you try something like this:
>
> <label for="stuff">hello</label>
> <fieldset id="stuff"></fieldset>
>
>
> On Fri, Nov 15, 2019 at 11:56 AM Brian Lovely via WebAIM-Forum <
> = EMAIL ADDRESS REMOVED = > wrote:
>
> > So it looks like it's perfectly legit to use a label instead of a legend
> as
> > the group label of a fieldset element.
> >
> >
> >
> > > https://urldefense.com/v3/__http://list.webaim.org/__;!0Ns9_1dOjwg!I668vx4gU8CYeJJSVck_raxxrCiynUIPJUs61sKi6_a_ohpRpZzvYfciiddcCnyR4DZieA$
> List archives at
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!0Ns9_1dOjwg!I668vx4gU8CYeJJSVck_raxxrCiynUIPJUs61sKi6_a_ohpRpZzvYfciiddcCnw-YlXURw$
> >
--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: Patrick H. Lauke
Date: Fri, Nov 15 2019 12:41PM
Subject: Re: Use of label without input
← Previous message | Next message →
On 15/11/2019 18:19, Brian Lovely via WebAIM-Forum wrote:
> Is there any reason not to use a label as a simple container for text,
> without any related input? The best reason I can come up with is "pride in
> your work", but that's likely not enough. Minus being associated with an
> input via the for attribute, a label element seems to be a non-semantic
> container like a div, span, or <p>.
>
> It bugs me that people do this, but I can't find any citable reason to tell
> them to stop.
Even if it bugs you though, is it causing any kind of issue? It's
probably a mild case of using a slightly inappropriate element, but not
enough to, for instance, fail under WCAG 2.1 SC 1.3.1. To my knowledge,
it has no adverse effect per se, so beyond the "what you're doing here
is pointless", not sure there's any major reason for letting it slide.
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: glen walker
Date: Fri, Nov 15 2019 2:00PM
Subject: Re: Use of label without input
← Previous message | Next message →
Yes, agreed. Unless they have a parsing issue such as using a <label> on a
<fieldset>, I just shake my head and let it go.
On Fri, Nov 15, 2019 at 12:41 PM Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
wrote:
>
> Even if it bugs you though, is it causing any kind of issue? It's
> probably a mild case of using a slightly inappropriate element, but not
> enough to, for instance, fail under WCAG 2.1 SC 1.3.1. To my knowledge,
> it has no adverse effect per se, so beyond the "what you're doing here
> is pointless", not sure there's any major reason for letting it slide.
>
> P
> --
> Patrick H. Lauke
>
>
From: Brian Lovely
Date: Fri, Nov 15 2019 2:15PM
Subject: Re: [External Sender] Use of label without input
← Previous message | Next message →
Patrick, the reason I have for sometimes being kind of a stickler about
stuff, is because someone else will do something that is less than ideal,
then when I call it out they say "I just copied what I saw on such-and-such
page". These things just spread, and I want to make sure every dev has at
least a working knowledge of accessibility best practices, including
correct semantics. Who knows, in another context, something that is of
negligible impact may be more problematic. If I could guarantee this was an
isolated edge case I'd feel differently about it, but I've seen bad
practice creep and don't want to encourage it.
On Fri, Nov 15, 2019 at 2:41 PM Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
wrote:
> On 15/11/2019 18:19, Brian Lovely via WebAIM-Forum wrote:
> > Is there any reason not to use a label as a simple container for text,
> > without any related input? The best reason I can come up with is "pride
> in
> > your work", but that's likely not enough. Minus being associated with an
> > input via the for attribute, a label element seems to be a non-semantic
> > container like a div, span, or <p>.
> >
> > It bugs me that people do this, but I can't find any citable reason to
> tell
> > them to stop.
>
> Even if it bugs you though, is it causing any kind of issue? It's
> probably a mild case of using a slightly inappropriate element, but not
> enough to, for instance, fail under WCAG 2.1 SC 1.3.1. To my knowledge,
> it has no adverse effect per se, so beyond the "what you're doing here
> is pointless", not sure there's any major reason for letting it slide.
>
> P
> --
> Patrick H. Lauke
>
>
> https://urldefense.com/v3/__http://www.splintered.co.uk__;!0Ns9_1dOjwg!PePYgqHWjF_CMTcE5uF9T-rncIMTl-ygCFPdFGJAbc3dCsWJJsPJ6sjPIxisJiEoXEdy7g$
> |
> https://urldefense.com/v3/__https://github.com/patrickhlauke__;!0Ns9_1dOjwg!PePYgqHWjF_CMTcE5uF9T-rncIMTl-ygCFPdFGJAbc3dCsWJJsPJ6sjPIxisJiEtdfMkJw$
>
> https://urldefense.com/v3/__http://flickr.com/photos/redux/__;!0Ns9_1dOjwg!PePYgqHWjF_CMTcE5uF9T-rncIMTl-ygCFPdFGJAbc3dCsWJJsPJ6sjPIxisJiEQxOGngw$
> |
> https://urldefense.com/v3/__http://redux.deviantart.com__;!0Ns9_1dOjwg!PePYgqHWjF_CMTcE5uF9T-rncIMTl-ygCFPdFGJAbc3dCsWJJsPJ6sjPIxisJiEjtyd5TQ$
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > https://urldefense.com/v3/__http://list.webaim.org/__;!0Ns9_1dOjwg!PePYgqHWjF_CMTcE5uF9T-rncIMTl-ygCFPdFGJAbc3dCsWJJsPJ6sjPIxisJiGQnqWI-Q$
> List archives at
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!0Ns9_1dOjwg!PePYgqHWjF_CMTcE5uF9T-rncIMTl-ygCFPdFGJAbc3dCsWJJsPJ6sjPIxisJiENVEReTA$
> >
--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: Birkir R. Gunnarsson
Date: Fri, Nov 15 2019 8:04PM
Subject: Re: [External Sender]Use of label without input
← Previous message | Next message →
If you are working for one organization and can set a bit of a
standard that is not barebones WCAG, you can require that the HTML
markup for the page at lbeast be semantically correct (use linting).
You can fail inappropriate use of a <label> element under that as an
internal quanlity control/standard (this is vaguely related to the
robust requirement of WCAG, since correct markup is compatible with
more user agents than incorrect markup, even if the incorrect use of
the markup does not specifically violate any other WCAG success
criterion).
This is a bit of a stretch, but if you want your content to be the
best, it should be semantically correct, something makers of
Javascript based frameworks have long long since forgotten.
On 11/15/19, Brian Lovely via WebAIM-Forum < = EMAIL ADDRESS REMOVED = > wrote:
> Patrick, the reason I have for sometimes being kind of a stickler about
> stuff, is because someone else will do something that is less than ideal,
> then when I call it out they say "I just copied what I saw on such-and-such
> page". These things just spread, and I want to make sure every dev has at
> least a working knowledge of accessibility best practices, including
> correct semantics. Who knows, in another context, something that is of
> negligible impact may be more problematic. If I could guarantee this was an
> isolated edge case I'd feel differently about it, but I've seen bad
> practice creep and don't want to encourage it.
>
> On Fri, Nov 15, 2019 at 2:41 PM Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> On 15/11/2019 18:19, Brian Lovely via WebAIM-Forum wrote:
>> > Is there any reason not to use a label as a simple container for text,
>> > without any related input? The best reason I can come up with is "pride
>> in
>> > your work", but that's likely not enough. Minus being associated with
>> > an
>> > input via the for attribute, a label element seems to be a non-semantic
>> > container like a div, span, or <p>.
>> >
>> > It bugs me that people do this, but I can't find any citable reason to
>> tell
>> > them to stop.
>>
>> Even if it bugs you though, is it causing any kind of issue? It's
>> probably a mild case of using a slightly inappropriate element, but not
>> enough to, for instance, fail under WCAG 2.1 SC 1.3.1. To my knowledge,
>> it has no adverse effect per se, so beyond the "what you're doing here
>> is pointless", not sure there's any major reason for letting it slide.
>>
>> P
>> --
>> Patrick H. Lauke
>>
>>
>> https://urldefense.com/v3/__http://www.splintered.co.uk__;!0Ns9_1dOjwg!PePYgqHWjF_CMTcE5uF9T-rncIMTl-ygCFPdFGJAbc3dCsWJJsPJ6sjPIxisJiEoXEdy7g$
>> |
>> https://urldefense.com/v3/__https://github.com/patrickhlauke__;!0Ns9_1dOjwg!PePYgqHWjF_CMTcE5uF9T-rncIMTl-ygCFPdFGJAbc3dCsWJJsPJ6sjPIxisJiEtdfMkJw$
>>
>> https://urldefense.com/v3/__http://flickr.com/photos/redux/__;!0Ns9_1dOjwg!PePYgqHWjF_CMTcE5uF9T-rncIMTl-ygCFPdFGJAbc3dCsWJJsPJ6sjPIxisJiEQxOGngw$
>> |
>> https://urldefense.com/v3/__http://redux.deviantart.com__;!0Ns9_1dOjwg!PePYgqHWjF_CMTcE5uF9T-rncIMTl-ygCFPdFGJAbc3dCsWJJsPJ6sjPIxisJiEjtyd5TQ$
>> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>> >> >> https://urldefense.com/v3/__http://list.webaim.org/__;!0Ns9_1dOjwg!PePYgqHWjF_CMTcE5uF9T-rncIMTl-ygCFPdFGJAbc3dCsWJJsPJ6sjPIxisJiGQnqWI-Q$
>> List archives at
>> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!0Ns9_1dOjwg!PePYgqHWjF_CMTcE5uF9T-rncIMTl-ygCFPdFGJAbc3dCsWJJsPJ6sjPIxisJiENVEReTA$
>> >>
>
>
> --
> *Brian Lovely*
> Capital One Digital Accessibility
> 804.389.1064
>
> >
>
>
> The information contained in this e-mail is confidential and/or proprietary
> to Capital One and/or its affiliates and may only be used solely in
> performance of work or services for Capital One. The information transmitted
> herewith is intended only for use by the individual or entity to which it is
> addressed. If the reader of this message is not the intended recipient, you
> are hereby notified that any review, retransmission, dissemination,
> distribution, copying or other use of, or taking of any action in reliance
> upon this information is strictly prohibited. If you have received this
> communication in error, please contact the sender and delete the material
> from your computer.
>
>
>
> > > > >
--
Work hard. Have fun. Make history.
From: Steve Green
Date: Sat, Nov 16 2019 2:42PM
Subject: Re: Use of label without input
← Previous message | Next message →
Actually, it does cause an issue, which is caused by one of JAWS' heuristics. If a page contains a <label> element that is not programmatically associated with a labelable element, and the page also contains an unlabelled element that is labelable, JAWS uses the contents of the <label> element to label the other element.
I have seen this many times, and at first I had no idea what was going on because the two elements were hundreds of lines apart in the DOM and there was no apparent relationship between them. However, it was easy to create a minimal test page to verify the theory.
To the best of my knowledge, this issue does not occur with any other screen reader.
Steve Green
Managing Director
Test Partners Ltd
From: Jonathan Cohn
Date: Sat, Nov 16 2019 5:22PM
Subject: Re: Use of label without input
← Previous message | Next message →
Steve,
Is this still the case in JAWS 2019/2020? It was my understanding that JAWS generally uses the iAccessible2 protocol for both Chrome and Firefox. If this is true, I would not expect your described behavior to still occur.
> On Nov 16, 2019, at 4:42 PM, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
>
> Actually, it does cause an issue, which is caused by one of JAWS' heuristics. If a page contains a <label> element that is not programmatically associated with a labelable element, and the page also contains an unlabelled element that is labelable, JAWS uses the contents of the <label> element to label the other element.
>
> I have seen this many times, and at first I had no idea what was going on because the two elements were hundreds of lines apart in the DOM and there was no apparent relationship between them. However, it was easy to create a minimal test page to verify the theory.
>
> To the best of my knowledge, this issue does not occur with any other screen reader.
>
> Steve Green
> Managing Director
> Test Partners Ltd
>
>
>
From: Steve Green
Date: Mon, Nov 18 2019 3:36AM
Subject: Re: Use of label without input
← Previous message | No next message
You're right, it's not happening with JAWS 2019, but it did happen with some previous versions. I don't know when they fixed it.
Steve