Back to home

HTML fieldset and nested fieldset test

Simple fieldset

Test

Example

Personal details

Code sample

<form class="example" action="#">
	<fieldset>
		<legend>Personal details</legend>
		<div>
			<label for="a">Name</label>
			<input id="a" name="a" type="text">
		</div>
		<div>
			<label for="b">Address</label>
			<input id="b" name="b" type="text">
		</div>
	</fieldset>
</form>
Support chart
OS Browser NVDA 2014.4 JAWS 16 VoiceOver
Windows 7 IE 11 Down:
"Personal details grouping. Name. Edit. Blank"
"Address. Edit. Blank"

Up:
"Personal details grouping. Address. Edit. Blank"
"Name. Edit. Blank"
Down:
"Personal details. Name. Edit. Type in text"
"Personal details. Address. Edit. Type in text"

Up:
"Personal details. Address. Edit. Type in text"
"Personal details. Name. Edit. Type in text"
Windows 7 IE 8 Down:
"Personal details grouping. Name. Edit. Blank"
"Address. Edit. Blank"

Up:
"Personal details grouping. Address. Edit. Blank"
"Name. Edit. Blank"
Down:
"Personal details. Name. Edit. Type in text"
"Personal details. Address. Edit. Type in text"

Up:
"Personal details. Address. Edit. Type in text"
"Personal details. Name. Edit. Type in text"
Windows 7 Chrome 39 Down:
"Personal details grouping. Name. Edit. Blank"
"Address. Edit. Blank"

Up:
"Personal details grouping. Address. Edit. Blank"
"Name. Edit. Blank"
Down:
"Personal details. Name. Edit. Type in text"
"Personal details. Address. Edit. Type in text"

Up:
"Personal details. Address. Edit. Type in text"
"Personal details. Name. Edit. Type in text"
Windows 7 Firefox 34 Down:
"Personal details grouping. Name. Edit with autocomplete. Blank"
"Address. Edit. Blank"

Up:
"Personal details grouping. Address. Edit with autocomplete. Blank"
"Name. Edit. Blank"
Down:
"Personal details. Name. Edit. Type in text"
"Address. Edit. Type in text"

Up:
"Personal details. Address. Edit. Type in text"
"Name. Edit. Type in text"
OSX 10.9 Chrome 39 Down:
"Name. Edit. Text"
"Address. Edit. Text"

Up:
"Address. Edit. Text"
"Name. Edit. Text"
OSX 10.9 Firefox 34 Down:
"Name. Personal details. Personal details. Text"
"Address. Personal details. Personal details. Text"

Up:
"Address. Personal details. Personal details. Text"
"Name. Personal details. Personal details. Text"
OSX 10.9 Safari 7 Down:
"Name. Personal details. Edit. Text"
"Address. Personal details. Edit. Text"

Up:
"Address. Personal details. Edit. Text"
"Name. Personal details. Edit. Text"

Nested fieldset

Test

Example

Add your details
Favourites?

Code sample

<form class="example" action="#">
	<fieldset>
		<legend>Add your details</legend>
		<div class="row-form">
			<label for="c">Phone</label>
			<input id="c" name="c" type="text">
		</div>
		<fieldset>
			<legend>Favourite colors?</legend>
			<div>
				<input type="checkbox" id="red" name="red">
				<label for="red">red</label>
			</div>
			<div>
				<input type="checkbox" id="green" name="green">
				<label for="green">green</label>
			</div>
		</fieldset>
		<div class="row-form">
			<label for="d">Email</label>
			<input id="d" name="d" type="text">
		</div>
	</fieldset>
</form>
Support chart
OS Browser NVDA 2014.4 JAWS 16 VoiceOver
Windows 7 IE 11 Down:
"Add your details. Grouping. Phone. Edit. Blank"
"Favourites. Grouping. Color. Edit. Blank"
"Fruit. Edit. Blank"
"Email. Edit. Blank"

Up:
"Add your details. Grouping. Email. Edit. Blank"
"Favourites. Grouping. Fruit. Edit. Blank"
"Color. Edit. Blank"
"Phone. Edit. Blank"
Down:
"Add your details. Phone. Edit. Type in text"
"Favourites. Color. Edit. Type in text"
"Favourites. Fruit. Edit. Type in text"
"Add your details. Email. Edit. Type in text"

Up:
"Add your details. Email. Edit. Type in text"
"Favourites. Fruit. Edit. Type in text"
"Favourites. Color. Edit. Type in text"
"Add your details. Phone. Edit. Type in text"
Windows 7 IE 8 Down:
"Add your details. Grouping. Phone. Edit. Blank"
"Favourites. Grouping. Color. Edit. Blank"
"Fruit. Edit. Blank"
"Email. Edit. Blank"

Up:
"Add your details. Grouping. Email. Edit. Blank"
"Favourites. Grouping. Fruit. Edit. Blank"
"Color. Edit. Blank"
"Phone. Edit. Blank"
Down:
"Add your details. Phone. Edit. Type in text"
"Favourites. Color. Edit. Type in text"
"Favourites. Fruit. Edit. Type in text"
"Add your details. Email. Edit. Type in text"

Up:
"Add your details. Email. Edit. Type in text"
"Favourites. Fruit. Edit. Type in text"
"Favourites. Color. Edit. Type in text"
"Add your details. Phone. Edit. Type in text"
Windows 7 Chrome 39 Down:
"Add your details. Grouping. Phone. Edit. Blank"
"Favourites. Grouping. Color. Edit. Blank"
"Fruit. Edit. Blank"
"Email. Edit. Blank"

Up:
"Add your details. Grouping. Email. Edit. Blank"
"Favourites. Grouping. Fruit. Edit. Blank"
"Color. Edit. Blank"
"Phone. Edit. Blank"
Down:
"Add your details. Phone. Edit. Type in text"
"Favourites. Color. Edit. Type in text"
"Favourites. Fruit. Edit. Type in text"
"Add your details. Email. Edit. Type in text"

Up:
"Add your details. Email. Edit. Type in text"
"Favourites. Fruit. Edit. Type in text"
"Favourites. Color. Edit. Type in text"
"Add your details. Phone. Edit. Type in text"
Windows 7 Firefox 34 Down:
"Add your details. Grouping. Phone. Edit with autocomplete. Blank"
"Favourites. Grouping. Color. Edit with autocomplete. Blank"
"Fruit. Edit with autocomplete. Blank"
"Email. Edit with autocomplete. Blank"

Up:
"Add your details. Grouping. Email with autocomplete. Edit. Blank"
"Favourites. Grouping. Fruit. Edit with autocomplete. Blank"
"Color. Edit with autocomplete. Blank"
"Phone. Edit with autocomplete. Blank"
Down:
"Add your details. Phone. Edit. Type in text"
"Favourites. Color. Edit. Type in text"
"Fruit. Edit. Type in text"
"Email. Edit. Type in text"

Up:
"Add your details. Email. Edit. Type in text"
"Favourites. Fruit. Edit. Type in text"
"Color. Edit. Type in text"
"Phone. Edit. Type in text"
OSX 10.9 Chrome 39 "Phone. Edit. Text"
"Color. Edit. Text"
"Fruit. Edit. Text"
"Email. Edit. Text"
OSX 10.9 Firefox 34 Down:
"Phone. Add your details. Add your details. Text
"Colors. Favourites. Favourites. Add your details. Add your details. Text
"Fruit. Favourites. Favourites. Add your details. Add your details. Text
"Email. Add your details. Add your details. Text

Up:
"Email. Add your details. Add your details. Text
"Fruit. Favourites. Favourites. Add your details. Add your details. Text
"Colors. Favourites. Favourites. Add your details. Add your details. Text
"Phone. Add your details. Add your details. Text
OSX 10.9 Safari 7 Down:
"Phone. Add your details. Edit text
"Colors. Favourites. Edit text
"Fruit. Favourites. Edit text
"Email. Add your details. Edit text

Up:
"Email. Add your details. Edit text
"Fruit. Favourites. Favourites. Edit text
"Colors. Favourites. Favourites. Edit text
"Phone. Add your details. Edit text

Bottom of page - Back to home