Html form and use of <label> for multiple textboxes

I have come across a situation while building a form form a client. One “question” (the text of which will go in a <label> tag is associated with four textboxes. In other words, the person filling out the form has the option to provide up to four answers to the question.

I thought I would wrap the <label></label> tags around the group of four < input> elements but then I can’t connect them to the label with for="" and the <input> with their id’s.

How should I handle this?

One approach would be to wrap the inputs in a fieldset, use a legend for the question title, and use hidden labels for the inputs (which you would then give separate ids).

I’m not an accessibility guru though, so I’ll be interested to hear what other have to say.

Yeah, fieldset with legend is the way to go here, IMHO, as that ties all the label/input pairs to the main question, which is set by the legend.

However, sometimes I read that a heading is just as good. But I get muddled. @Stomme_poes is the one twask.

The form is quite large, and is already grouped into numerous fieldsets. But putting both of your suggestions together, @ralphm and @James_Hibbard, what if I use a <p></p> for the question (not quite a heading), then use a hidden label (but would display:none make the labels unuseful in terms of accessibility?) for each input element.

Yeah, that would hide it from screen readers, I believe. You can just absolutely position the labels way off screen if you don’t want them visible.

Perhaps with some ARIA sugar that would be OK, such as aria-labeledby. E.g.

<p id="bq">Here are some big questions for you to answer</p> 
         
  <label id="q1">Question 1</label> 
  <input type="text" aria-labelledby="q1 bq"> 

  <label id="q2">Question 2</label> 
  <input type="text" aria-labelledby="q2 bq"> 

  <label id="q3">Question 3</label> 
  <input type="text" aria-labelledby="q3 bq"> 

  <label id="q4">Question 4</label> 
  <input type="text" aria-labelledby="q4 bq">

Thanks. I tried that and it worked really well.

I tend to use legends just like that p, and I’m mostly okay with going crazy on fieldsets (though not really very nested fieldsets, no trees) because they’re a navigable thing which can also be nice.

They kinda suck in JAWS because often the legend gets read out each control/question, but that’s an AT issue and honestly I think we should let JAWS users complain to FS about that.

If the legend is short though it can even be handy, depends.

I tend to use fieldset with legend-as-question for stuff like “gender” or if I have a multi-input date or postal code question. It’s valid to ask if those last two should be separate inputs but often you the front-ender are left on the whim of the back-ender’s method of sanitation/validation. : P

Thanks @Stomme_poes. Do you think the ARIA alternative is viable, or just not worth it?

Well, first I’d be tempted to let the label’s for-attr do its thing… and then to avoid any *-labelledby overwriting that, use *-describedby instead. Though I usually reserve that for error messages and hints.

There is indeed still a real issue with ATs who keep separate “Forms Modes” and “Browse Modes” meaning when in Forms Mode the user may miss non-form controls like the p. So I guess if you worry and you’re using something like a p then adding a *-describedby pointing to it isn’t bad.

I remember once adding something like “this relates to the next 3 questions” or something in the first label once, in a span within the label so it got read out (this was before aria was a thing). Only got one guy to test it for me and he’s a nerd/developer so was never sure I could take his word for it that it made sense : P

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.