WebAIM - Web Accessibility In Mind

E-mail List Archives

span in place of label?

for

From: Tomlins Diane
Date: Jun 15, 2016 12:53PM

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