Back to home

Alternatives to the fieldset element

Developers may wish to add information above radio buttons, but the fieldset may not always be appropriate.

Option 1: fieldset

Test

Example

Do you like apples?

Code sample

<fieldset>
	<legend>Do you like apples?</legend>
	<input type="radio" id="apples-y" name="apples">
	<label for="apples-y">Yes</label><br>
	<input type="radio" id="apples-n" name="apples">
	<label for="apples-n">No</label>
</fieldset>
Support chart
OS Browser NVDA 2014.4 JAWS 16 VoiceOver
Windows 7 IE 11 Down:
"Do you like apples. Grouping. Yes. Radio button. Not checked."

Up:
"Do you like apples. Grouping. No. Radio button. Not checked." 		Down:
"Do you like apples. Yes. Radio button. Not checked. 1 of 2"

Up:
"Do you like apples. No. Radio button. Not checked. 2c of 2"
Windows 7 IE 8 Down:
"Do you like apples. Grouping. Yes. Radio button. Not checked."

Up:
"Do you like apples. Grouping. No. Radio button. Not checked." 		Down:
"Do you like apples. Yes. Radio button. Not checked. 1 of 2"

Up:
"Do you like apples. No. Radio button. Not checked. 2c of 2"
Windows 7 Chrome 39 Down:
"Do you like apples. Grouping. Yes. Radio button. Half checked."

Up:
"Do you like apples. Grouping. No. Radio button. Half checked." 		Down:
"Do you like apples. Yes. Radio button. Not checked. Partially checked."

Up:
"Do you like apples. No. Radio button. Not checked. Partially checked."
Windows 7 Firefox 34 Down:
"Do you like apples. Grouping. Yes. Radio button. Not checked. 1 of 2"

Up:
"Do you like apples. Grouping. No. Radio button. Not checked. 2 of 2" 		Down:
"Do you like apples. Yes. Radio button. Not checked. 1 of 2"

Up:
"Do you like apples. No. Radio button. Not checked. 2 of 2"
OSX 10.9 Chrome 39 Down:
"Yes. Radio button"

Up:
"No. Radio button"
OSX 10.9 Firefox 34 Down:
"Yes. Do you like apples. Do you like apples, Radio button"

Up:
"No. Do you like apples. Do you like apples. Radio button."
OSX 10.9 Safari 7 Down:
"Yes. Do you like apples. Radio button. 1 of 2"

Up:
"No. Do you like apples. Radio button. 2 of 2"

Option 2: using aria-describedby

Test

Example

What is you favourite day?


Code sample

<p id="description">
	What is you favourite day?
</p>
<input aria-describedby="description" type="radio" id="monday" name="day">
<label for="monday">Monday</label><br>
<input aria-describedby="description" type="radio" id="friday" name="day">
<label for="friday">Friday</label>
Support chart
OS Browser NVDA 2014.4 JAWS 16 VoiceOver
Windows 7 IE 11 Down:
"Monday. Radio button not checked. What is your favourite day"

Up:
"Friday. Radio button not checked. What is your favourite day" 		"Monday. Radio button not checked. What is your favourite day"

Up:
"Friday. Radio button not checked. What is your favourite day"
Windows 7 IE 8 Down:
"Monday. Radio button not checked. What is your favourite day"

Up:
"Friday. Radio button not checked. What is your favourite day" 		Down:
"Monday. Radio button not checked. 1 of 2. What is your favourite day"

Up:
"Friday. Radio button not checked. 2 of 2. What is your favourite day"
Windows 7 Chrome 39 Down:
"Monday. Radio button half checked. What is your favourite day"

Up:
"Friday. Radio button half checked. What is your favourite day" 		Down:
"Monday. Radio button not checked. Partially checked. What is your favourite day"

Up:
"Friday. Radio button not checked. Partially checked. What is your favourite day"
Windows 7 Firefox 34 Down:
"Monday. Radio button not checked. What is your favourite day. 1 of 2"

Up:
"Friday. Radio button not checked. What is your favourite day. 2 of 2" 		Down:
"Monday. Radio button not checked. 1 of 2. What is your favourite day."

Up:
"Friday. Radio button checked. 2 of 2. What is your favourite day"
OSX 10.9 Chrome 39 Down:
"Monday. Radio button"

Up:
"Friday. Radio button"
OSX 10.9 Firefox 34 Down:
"What is your favourite day. Radio button"

Up:
"What is your favourite day. Radio button"
OSX 10.9 Safari 7 Down:
"Monday. Radio button. 1 of 2"

Up:
"Friday. Radio button. 2 of 2"

Option 3: radiogroup

Test

Example

Pick a subscription



Code sample

<div role="radiogroup" aria-labelledby="subscription">
	<p id="subscription">
		Pick a subscription
	</p>
	<input type="radio" id="daily" name="subscribe">
	<label for="daily">Daily</label><br>
	<input type="radio" id="weekly" name="subscribe">
	<label for="weekly">Weekly</label><br>
</div>
Support chart
OS Browser NVDA 2014.4 JAWS 16 VoiceOver
Windows 7 IE 11 Down:
"Pick a subscription. Grouping. Daily. Radio button not checked."

Up:
"Pick a subscription. Grouping. Weekly. Radio button not checked."
 Down:
"Pick a subscription. Daily. Radio button not checked."

Up:
"Pick a subscription. Weekly. Radio button not checked."
Windows 7 IE 8 Down:
"Pick a subscription. Grouping. Daily. Radio button not checked."

Up:
"Pick a subscription. Grouping. Weekly. Radio button not checked."
 Down:
"Pick a subscription.. Daily. Radio button not checked. 1 of 2"

Up:
"Pick a subscription. Weekly. Radio button not checked. 1 of 2"
Windows 7 Chrome 39 Down:
"Daily. Radio button half checked."

Up:
"Weekly. Radio button half checked."
 Down:
"Pick a subscription. Daily. Radio button not checked. Partially checked"

Up:
"Pick a subscription. Weekly. Radio button not checked. Partially checked"
Windows 7 Firefox 34 Down:
"Pick a subscription. Grouping. Daily. Radio button not checked. 1 of 2"

Up:
"Pick a subscription. Grouping. Weekly. Radio button not checked. 2 of 2"
 Down:
"Pick a subscription. Daily. Radio button not checked. 1 of 2"

Up:
"Pick a subscription. Weekly. Radio button not checked. 2 of 2"
OSX 10.9 Chrome 39 Down:
"Daily. Pick a subscription. Pick a subscription. Radio button. 1 of 2"

Up:
"Weekly. Pick a subscription. Pick a subscription. Radio button. 2 of 2"
OSX 10.9 Firefox 34 Down:
"Daily. Pick a subscription. Pick a subscription. Radio button"

Up:
"Weekly. Pick a subscription. Pick a subscription. Radio button"
OSX 10.9 Safari 7 Down:
"Daily. Pick a subscription. Radio button. 1 of 2"

Up:
"Weekly. Pick a subscription. Radio button. 2 of 2"

Bottom of page - Back to home