E-mail List Archives
Thread: span in place of label?
Number of posts in this thread: 4 (In chronological order)
From: Tomlins Diane
Date: Wed, Jun 15 2016 12:53PM
Subject: span in place of label?
No previous message | Next message →
Bit of a discussion with a co-worker on whether or not the presence of text in a span is sufficient to pass WCAG Lvl A testing. I'm a little too new at this to be sure of some of the finer points and alternatives, so I'm asking you folks :)
This is the code in question:
<span class="sr-only label-info">
Please accept terms and conditions
</span>
<input id="tcagreement" class="ember-view ember-checkbox tcagreement-checkBox" type="checkbox" name="tcagreement" data-rule-required="true" data-msg-required="Please accept terms and conditions.">
The "sr-only" is a Bootstrap class (for those unfamiliar with it) and so it will only work with screen readers anyway. The visible text next to the checkbox says "I have read and agree to the Terms & Conditions", but it's just text inside the <div> (why they didn't just make that the label I don't know)
WebAXE flags it with - No label or aria-label on input field (wcag2a wcag332 wcag131)
My coworker says the span is enough to pass, but is it really? Or does the text "I have read..." being there sufficient?
Thanks!
Diane R Tomlins
HCA IT&S | Digital Media
Web Development Specialist
From: Birkir R. Gunnarsson
Date: Wed, Jun 15 2016 1:06PM
Subject: Re: span in place of label?
← Previous message | Next message →
Hi
Every input field needs an accessible name.
When a label is connected to it explicitly (using the for attribute
with an ID matching that of the input field), or implicitly (label tag
is wrapped around the input element and the text used as its label),
this is taken care of.
In your situation, a span is located close to the input in content
order, but that in itself is not enough to assign the span as the
input's accessible name.
You can do it using aria-labelledby
1. Assign an id to the span whose contents are the form field label.
<span id="label1">Please enter your name</span>
2. Associate the input field with the span using an aria-labelledby
that points tot that ID.
<input aria-labelledby="label1" type="text">
Now the text in the span is the accessible name of the input field.
It doesn't matter if the span text is visible, visible only to screen
readers, or completely invisible (using display: none;)
aria-labelledby wil cause its contents to be announced when focus
lands on the text field connected to it.
In your situation, I would be concerned why they want to invent a
label just for screen readers, one that seems significantly different
from the visible text.
Why not wrap the normal text in a span, give it an id and associate it
as described above.
Also remember that using html labeling is better, because it is better
supported by older assistive technologies, and creates a bigger click
target for users, benefits users who use a mouse but have problems
with fine motor control. I know there are situations where html
labeling cannot be used, but there should be durn good reasons why. ;)
First rule of ARIA, use it only if html techniques cannot be used.
Cheers
-B
On 6/15/16, Tomlins Diane < = EMAIL ADDRESS REMOVED = > wrote:
> Bit of a discussion with a co-worker on whether or not the presence of text
> in a span is sufficient to pass WCAG Lvl A testing. I'm a little too new at
> this to be sure of some of the finer points and alternatives, so I'm asking
> you folks :)
>
> This is the code in question:
>
> <span class="sr-only label-info">
> Please accept terms and conditions
> </span>
> <input id="tcagreement" class="ember-view ember-checkbox
> tcagreement-checkBox" type="checkbox" name="tcagreement"
> data-rule-required="true" data-msg-required="Please accept terms and
> conditions.">
>
> The "sr-only" is a Bootstrap class (for those unfamiliar with it) and so it
> will only work with screen readers anyway. The visible text next to the
> checkbox says "I have read and agree to the Terms & Conditions", but it's
> just text inside the <div> (why they didn't just make that the label I don't
> know)
>
> WebAXE flags it with - No label or aria-label on input field (wcag2a wcag332
> wcag131)
>
> My coworker says the span is enough to pass, but is it really? Or does the
> text "I have read..." being there sufficient?
>
> Thanks!
>
> Diane R Tomlins
> HCA IT&S | Digital Media
> Web Development Specialist
>
> > > > >
--
Work hard. Have fun. Make history.
From: Steve Faulkner
Date: Wed, Jun 15 2016 1:08PM
Subject: Re: span in place of label?
← Previous message | Next message →
Hi Diane, it is not. All controls must have an accessible name (label) in
this case the label is not associated with the control it labels. Suggest
getting rid of the SR only span and adding <label> around visible text and
associating the label to the control using for/id attributes.
On Wednesday, 15 June 2016, Tomlins Diane < = EMAIL ADDRESS REMOVED = >
wrote:
> Bit of a discussion with a co-worker on whether or not the presence of
> text in a span is sufficient to pass WCAG Lvl A testing. I'm a little too
> new at this to be sure of some of the finer points and alternatives, so I'm
> asking you folks :)
>
> This is the code in question:
>
> <span class="sr-only label-info">
> Please accept terms and conditions
> </span>
> <input id="tcagreement" class="ember-view ember-checkbox
> tcagreement-checkBox" type="checkbox" name="tcagreement"
> data-rule-required="true" data-msg-required="Please accept terms and
> conditions.">
>
> The "sr-only" is a Bootstrap class (for those unfamiliar with it) and so
> it will only work with screen readers anyway. The visible text next to the
> checkbox says "I have read and agree to the Terms & Conditions", but it's
> just text inside the <div> (why they didn't just make that the label I
> don't know)
>
> WebAXE flags it with - No label or aria-label on input field (wcag2a
> wcag332 wcag131)
>
> My coworker says the span is enough to pass, but is it really? Or does the
> text "I have read..." being there sufficient?
>
> Thanks!
>
> Diane R Tomlins
> HCA IT&S | Digital Media
> Web Development Specialist
>
> > > > >
--
--
Regards
SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
From: Tomlins Diane
Date: Wed, Jun 15 2016 1:27PM
Subject: Re: span in place of label?
← Previous message | No next message
Thank you for the confirmation Steve and Birkir. That was my stance, that it has to have a label to pass and an html tag is easy enough. We have to recertify this application for Meaninful Use 2 (Level A only), how they got this point passed last year I do not know. I wasn't involved in it at all then, they used a 3rd party.
I too am wondering why they are showing something different to screen readers, it doesn't make any sense, given the rest of the text on the page. If I'm lucky, I can get them to change this for the next release ;)
Diane R Tomlins
HCA IT&S | Digital Media
Web Development Specialist
>Hi Diane, it is not. All controls must have an accessible name (label) in this case the label is not associated with the control it labels. Suggest >getting rid of the SR only span and adding <label> around visible text and associating the label to the control using for/id attributes.
Regards
SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;