Making Forms Accessible

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.

Old Recommend Form

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.

<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%">&nbsp;</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>

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:

New Recommend Form

And the code that goes with it:

<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>

Published by

Cynthia

A librarian learning the ways of technology, accessibility, metadata, and people

Leave a Comment

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s