WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: span in place of label?

for

From: Birkir R. Gunnarsson
Date: Jun 15, 2016 1:06PM

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 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.