WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: form label for long question

for

From: Mike Warner
Date: Feb 5, 2018 10:58AM

To follow up, the html for the input and button seems to follow the
recommendations:

<div id="id_variables15" class="container_sb" style="width: auto;">
<label for="answer_1517852685270"><input class="blankInput_sb" name="enter
answer here" type="text" id="answer_1517852685270" style="width: 3em;
height: 23.6px;">
<span class="unit-post">&nbsp;</span>
</label>
<button aria-controls="answer_1517852685270" class="checkIt_sb
grey-game-button">Check</button>
</div>

Mike Warner
Director of IT Services
MindEdge, Inc.

2018-02-05 12:54 GMT-05:00 Mike Warner < <EMAIL REMOVED> >:

> Hi all,
>
> I'm reworking one of our interactive features and was wondering what the
> best practice is for a label when the question is long. Here's a sample
> question:
>
> 8. If a patient's blood sugar, cholesterol, and blood pressure are all
> dependent on diet, which of these is the explanatory variable
>
> 1. Blood sugar
> 2. Cholesterol level
> 3. Blood pressure
> 4. Diet
>
> After this question comes the input and the check button. We currently
> have the label around the input with a nbsp in it next to the input and to
> give a bit of space before the check button, but WAVE and aXe are saying
> that there is no label. I imagine that's because the label surrounds the
> input field. What are good ways to add the label that won't confuse the
> user? I imagine that we don't want it around the entire question, right?
> Some of the questions are longer than this.
>
> Thanks!
> Mike
>
> Mike Warner
> Director of IT Services
> MindEdge, Inc.
>