5

If I want to have a question with a "Yes/No" radio button. How do I need to mark up the code so that a screen reader reads the question associated with the "yes/no" selection instead of just reading the "Yes" and "No" labels when the radio buttons are selected?

<span>Did you understand this? (choose one) </span>
<label>
<input type="radio" id="yes_no" name="yes_no" value="Yes" />
Yes
</label>
<label>
<input type="radio" id="yes_no" name="yes_no" value="No" />
No
</label>

Thanks

Jaime Garcia
  • 6,744
  • 7
  • 49
  • 61

3 Answers3

10

For form elements of this nature I use:

<fieldset>
  <legend>Did you understand the question?</legend>
  <input type="radio" name="yes_no" id="yes">
  <label for="yes">Yes</label>
  <input type="radio" name="yes_no" id="no">
  <label for="no">No</label>
</fieldset>

Also please take note that all ID values on a page should be unique. If you have an element that needs to share a descriptor then add it as a class.

I also use Fieldsets to add a distinct boundary to the radio selection.

And be sure to specify the for="id_value" attribute of the label. This will associate the label with the desired radio button.

bryanbraun
  • 3,025
  • 2
  • 26
  • 38
gruntled
  • 2,684
  • 19
  • 16
2
<fieldset>
<legend><span>Did you understand this? (choose one) </span></legend>
<label>
<input type="radio" id="yes_no" name="yes_no" value="Yes" />
Yes
</label>
<label>
<input type="radio" id="yes_no" name="yes_no" value="No" />
No
</label>
</fieldset>
Jeff
  • 21,744
  • 6
  • 51
  • 55
-1

use the content attribute (if it is available).

VoodooChild
  • 9,776
  • 8
  • 66
  • 99