WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: span in place of label?

for

From: Steve Faulkner
Date: Jun 15, 2016 1:08PM

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 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/>;