One Html Label with Two Form Inputs

Question

If I want to associated one label with two forms inputs, say "Expiration Date" for the label for two inputs "ExpirationMonth" and "ExpirationYear", what is the best semantic approach to do this?

Answer 1

There is a solution using the title and aria-labelledby attributes.

Here is an example:

<span id="bday">Birthday</span>:
<select name="bday_month" title="Month of Birth" aria-labelledby="bday">
<option 1>January
  ...
<option 12>December
</select>
<select name="bday_day" title="Day of Birth" aria-labelledby="bday">
<option 1>1
  ...
<option 31>31
</select>

This "passes" the http://wave.webaim.org/ accessibility checker.