WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: form label for long question

for

Number of posts in this thread: 3 (In chronological order)

From: Mike Warner
Date: Mon, Feb 05 2018 10:54AM
Subject: form label for long question
No previous message | Next message →

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.

From: Mike Warner
Date: Mon, Feb 05 2018 10:58AM
Subject: Re: form label for long question
← Previous message | Next message →

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

From: Jim Allan
Date: Mon, Feb 05 2018 1:44PM
Subject: Re: form label for long question
← Previous message | No next message

you can go semantically, also add <style>fieldset
{border:0;}</style>wrapping legends look messy when there is a border
<fieldset>
<legend>​8. If a patient's blood sugar, cholesterol, and blood pressure are
all
dependent on diet, which of these is the explanatory variable</legend>
<input name="radio1" type="radio" value="yes" id="radiobutton1" />
<label for="radiobutton1">blood sugar</label>
<br />
<input name="radio1" type="radio" value="no" id="radio1" />
<label for="radio1">blood pressure</label>
</fieldset>

or do it aria + semantics

<p id="faux-legend"> 8. If a patient's blood sugar, cholesterol, and blood
pressure are all
dependent on diet, which of these is the explanatory variable</p>
<div role="group" aria-labelledby="faux-legend">
<input name="rb" type="radio" value="yes" id="r1"/>
<label for="r1">Blood Sugar</label>
<br />
<input name="rb" type="radio" value="no" id="r2"/>
<label for="r2">Blood pressure</label>
</div>




On Mon, Feb 5, 2018 at 11:54 AM, Mike Warner < = EMAIL ADDRESS REMOVED = > wrote:

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



--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9452 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964