Forms - a non-accessible example

Forms are one of the many ways interacting with users.

As with all good web design the forms should be accessible. This class will give you the basics, some advanced information, and some things to think about when making accessible forms. As a starting point let's look at a non-accessible form...

and let's listen to the form using a screen reader.

All items marked in red are required.

First Name Middle Initial Last Name

Dog's Name

Your dog's favorite foods:

Kibble
Chow
Steak

Empty my bank account to pay for the food:

yes
no

is my dogs size.

 

 

<form action="mailto:someone@knowbility.org" class="example">
<p>All items marked in <span class="attn">red</span> are required.
</p>
<table>
<tr>
<th class="attn">First Name</th>
<th>Middle Initial</th>
<th class="attn">Last Name</th>
</tr>
<tr>
<td><input maxlength="40" name="Fname" size="20" type="text" /></td>
<td><input maxlength="40" name="Mname" size="20" type="text" /></td>
<td><input maxlength="40" name="Lname" size="20" type="text" /></td>
</tr>
</table>
<br />
<p> Dog's Name <br />
<input name="dogname" size="30" />
</p>
<p>Your dog's favorite foods:</p>
<p>
<input type="checkbox" value="checkbox" /> Kibble <br />
<input type="checkbox" value="checkbox" /> Chow <br />
<input type="checkbox" value="checkbox" /> Steak
</p>
<p> <strong>Empty my bank account to pay for the food: </strong> </p>
<p>
<input name="dogbreed" type="radio" />
yes<br />
<input name="dogbreed" type="radio" />
no
</p>
<p>
<select id="dogsize" name="dog_size" size="1">
<option value="tiny" selected="selected">Tiny</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="-1" selected="selected">Pick one</option>
</select>
is my dogs size. </p>
<p> </p>
</form>