Example of an accessible form

Form.html

<h1>Super forms</h1>
<p>This is a form which <strong>will</strong> work across multiple browsers.</p>
<div class="serverValidation">
	<p>Please check the listed fields below for errors.</p>
	<ol>
		<li><a href="#medium">Question label (Medium)</a></li>
		<li><a href="#selectMedium">Question label (selectMedium)</a></li>
		<li><a href="#radio1">Question label (Radio)</a></li>
		<li><a href="#textArea">Question label (textArea)</a></li>
	</ol>
</div>
<form action="" method="get" class="superForms">
	<fieldset>
		<div>
			<label for="small">Small</label>
			<input type="text" id="small" class="text small" />
		</div>
		<div>
			<label for="medium">Medium</label>
			<input type="text" id="medium" class="text medium" />
		</div>
		<div>
			<label for="large">Large</label>
			<input type="text" id="large" class="text large" />
		</div>
		<hr />
		<div>
			<label for="selectSmall">Select small</label>
			<select id="selectSmall" class="small">
				<option value="0" selected="selected">Please select an option</option>
				<option value="1">Option 1</option>
				<option value="2">Option 2</option>
				<option value="3">Option 3</option>
			</select>
		</div>
		<div>
			<label for="selectMedium">Select medium</label>
			<select id="selectMedium" class="medium">
				<option value="0" selected="selected">Please select an option</option>
				<option value="1">Option 1</option>
				<option value="2">Option 2</option>
				<option value="3">Option 3</option>
			</select>
		</div>
		<div>
			<label for="selectLarge">Select large</label>
			<select id="selectLarge" class="large">
				<option value="0" selected="selected">Please select an option</option>
				<option value="1">Option 1</option>
				<option value="2">Option 2</option>
				<option value="3">Option 3</option>
			</select>
		</div>
		<hr />
		<div>
			<span class="label">Radio</span>
			<div class="group">
				<label for="radio1"><input type="radio" id="radio1" name="radio" />Radio 1</label>
				<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
				<label for="radio2"><input type="radio" id="radio2" name="radio" />Radio 2</label>
				<label for="radio3"><input type="radio" id="radio3" name="radio" checked="checked" />Radio 3</label>
				<div>
					<input type="text" class="text" />
				</div>
			</div>
		</div>
		<div>
			<span class="label">Checkboxes</span>
			<div class="group">
				<label for="checkbox1"><input type="checkbox" id="checkbox1" name="checkbox" />Radio 1</label>
				<label for="checkbox2"><input type="checkbox" id="checkbox2" name="checkbox" />Radio 2</label>
				<label for="checkbox3"><input type="checkbox" id="checkbox3" name="checkbox" />Radio 3</label>
			</div>
		</div>
		<hr />
		<div>
			<label for="file">File upload</label>
			<input type="file" id="file" />
		</div>
		<hr />
		<div>
			<label for="textArea">Text area</label>
			<textarea id="textArea" rows="8" cols="40"></textarea>
		</div>
	</fieldset>
	<div class="buttons">
		<button type="submit" class="submit">Submit</button>
	</div>
	<div class="buttons">
		<div class="left">
			<button type="button" class="save">Save</button>
			<button type="button" class="print">Print</button>
		</div>
		<div class="right">
			<button type="button" class="previous">Previous</button>
			<button type="button" class="next">Next</button>
		</div>
	</div>
</form>
<hr />
<div id="paging">
	<ul>
		<li class="first"><a href="#">First</a></li>
		<li class="previous"><a href="#">Previous</a></li>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li class="selected"><span>3</span></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">6</a></li>
		<li><a href="#">7</a></li>
		<li class="next"><a href="#">Next</a></li>
		<li class="last"><a href="#">Last</a></li>
	</ul>
</div>