What makes this accessible?

  • input elements have an associated label tag. This helps screen reader users know what data is expected for the inputs in your form. Using a label also expands the clickable area of an input making it easier for keyboard users with limited mobility.
  • Field label is positioned next to its related input. Keep the label and inputs visually connected so that visitors who use a screen magnifier are still able to see the connection.
  • fieldsets are used to group related items
  • Captcha is not used to validate human data entry
Contact Info

What kind of sandwich do you want for lunch?

What would you like on your sandwich?

What would you like to drink with your sandwich?


What the HTML looks like

<form action="">
	<fieldset>
		<legend>Contact Info</legend>
		<p>
			<label for="name">Name:</label>
			<input type="text" id="name" name="name" />
		</p>
		<p>
			<label for="address">Address:</label>
			<input type="text" id="address" name="address" />
		</p>
		<p>
			<label for="city">City</label>
			<input type="text" id="city" name="city" />
		</p>
	</fieldset>
	<fieldset>
		<legend>What kind of sandwich do you want for lunch?</legend>
		<p>
			<input type="radio" name="sandwich" id="tuna" value="Tuna" />
			<label for="tuna"> Tuna</label>
		</p>
		<p>
			<input type="radio" name="sandwich" id="cheese" value="Cheese" />
			<label for="cheese"> Cheese</label>
		</p>
		<p>
			<input type="radio" name="sandwich" id="turkey" value="Turkey" />
			<label for="turkey"> Turkey</label>
		</p>
	</fieldset>
	<fieldset>
		<legend>What would you like on your sandwich?</legend>
		<p>
			<input type="checkbox" name="addons" id="lettuce" value="Lettuce" />
			<label for="lettuce"> Lettuce</label>
		</p>
		<p>
			<input type="checkbox" name="addons" id="tomato" value="Tomato" />
			<label for="tomato"> Tomato</label>
		</p>
		<p>
			<input type="checkbox" name="addons" id="mayo" value="Mayo" />
			<label for="mayo"> Mayo</label>
		</p>
		<p>
			<input type="checkbox" name="addons" id="mustard" value="Mustard" />
			<label for="mustard"> Mustard</label>
		</p>
	</fieldset>
	<fieldset>
		<legend>What would you like to drink with your sandwich?</legend>
		<p>
			<input type="radio" name="drink" id="milk" value="Milk" />
			<label for="milk"> Milk</label>
		</p>
		<p>
			<input type="radio" name="drink" id="soda" value="Soda" />
			<label for="soda"> Soda</label>
		</p>
		<p>
			<input type="radio" name="drink" id="coffee" value="Coffee" />
			<label for="coffee"> Coffee</label>
		</p>
		<p>
			<input type="radio" name="drink" id="tea" value="Tea" />
			<label for="tea"> Tea</label>
		</p>
	</fieldset>
	<p>
		<label for="other" class="longlabel">Additional requests:</label>
		<textarea name="other" id="other" rows="5" cols="25"></textarea>
	</p>
	<p><input type="submit" value="Submit" class="submit" /></p>
</form>