WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: form label for long question

for

From: Jim Allan
Date: Feb 5, 2018 1:44PM

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