I’ve written on making forms accessible before in the WCAG series, but I thought I’d document some real examples using the work that I’ve been doing. This one is a fairly simple, but important example especially since we’re moving to PDA (patron driven acquisitions).
Recommend / Suggest a Purchase Form
Our old form broke a whole bunch of rules and was definitely not coded properly. It also used a table to get the labels next to the input boxes, and had no styling.
In particular, most of the fields were missing the label tag (the automated ones had label tags). It was also weird that the note for faculty was after the submit button.
[code language=”html” collapse=”true” title=”Old form code”]
<form action="" method="post">
<table class="small" border="0" cellspacing="5">
<tr>
<td class="bold" align="right" width="30%"><label for="author">Author</label></td>
<td align="left" width="70%"><input id="author" type="text" maxlength="40" name="author" size="40" value="" /></td>
</tr>
<tr>
<td class="bold" align="right" width="30%"><label for="title">Title</label></td>
<td align="left" width="70%"><input id="title" type="text" maxlength="40" name="title" size="40" value="" /></td>
</tr>
<tr>
<td class="bold" align="right" width="30%">Publisher/Year of Publication</td>
<td align="left" width="70%"><input type="text" maxlength="60" name="publish" size="40" value="" /></td>
</tr>
<tr>
<td class="bold" align="right" width="30%">Email address</td>
<td align="left" width="70%"><input id="other" type="text" maxlength="40" name="other" size="40" value="" /></td>
</tr>
<tr>
<td class="bold" align="right" width="30%">Additional Information</td>
<td align="left" width="70%"><input type="text" maxlength="60" name="mention" size="40" value="" /></td>
</tr>
<tr>
<td align="right" width="30%"><span class="bold">Your Name</span> (either first or last name)</td>
<td align="left" width="70%"><input id="name" type="text" maxlength="40" name="name" size="40" value="" /></td>
</tr>
<tr>
<td align="right" width="30%"><span class="bold">Your 13 digit barcode: </span>(on your staff/student card)</td>
<td align="left" width="70%"><input id="barcode" type="PASSWORD" maxlength="40" name="barcode" size="20" value="" /></td>
</tr>
<tr>
<td width="30%"> </td>
<td><input type="SUBMIT" name="submit" value="SUBMIT THIS SUGGESTION" /></td>
</tr>
</table>
<p>Faculty members should submit requests to their <a href="//example.com">subject librarian</a>.</p>
</form>
[/code]
So obviously I:
- removed the table
- moved the text after the submit button
- added label tags
I also modified the title to be a legend instead and put the whole thing in a field set. I was a little restricted by the system, particularly in manipulated the width of the text inputs, but the form should be accessible now. This is what the new version looks like:
And the code that goes with it:
[code language=”html” collapse=”true” title=”New Form Code”]
<form class="styledform" action="" method="post">
<fieldset style="max-width: 530px;"><legend>Recommend a Title for the Ryerson Library Collection</legend>
Faculty members should submit requests to their <a href="//example.com">subject librarian</a>.
<label for="author">Author</label><input id="author" type="text" maxlength="40" name="author" size="40" value="" />
<label for="title">Title</label><input id="title" type="text" maxlength="40" name="title" size="40" value="" />
<label for="publish">Publisher Year of Publication</label>
<input id="publish" type="text" maxlength="60" size="40" value="" />
<label for="other">Email address</label>
<input id="other" type="text" maxlength="40" name="other" size="40" value="" />
<label for="mention">Additional Information</label>
<input id="mention" type="text" maxlength="60" size="40" value="" />
<label for="name">Your Name <span class="small">(either first or last name)</span></label>
<input id="name" type="text" maxlength="40" name="name" size="40" value="" />
<label for="barcode">Your 13 digit barcode: <span class="small">(on your staff/student card)</span></label>
<input id="barcode" type="PASSWORD" maxlength="40" name="barcode" size="20" value="" />
<input type="SUBMIT" name="submit" value="SUBMIT THIS SUGGESTION" /></fieldset>
</form>
[/code]