Accessible Form Results

Posted February 8th, 2006 by Mike Cherim

That’s all there is to it. Save the files and go. You’re done.

After playing around with some modifications to Dan Champion’s Accesskey Script in use at, I discovered a significant improvement to the self-returning form result to make it more accessible. I have recently been going through my forms, starting with those on the site mentioned above, one at a time, improving their level of accessibility by adding a simple ID to the results heading and a bookmark pointing to the results heading on the form submit self-target. I haven’t changed my PHP contact form download (yet), but herein I will describe the changes which are quite simple to implement so you may do it yourself.

Adding the “Result” ID

This is rather simple, but you must be careful to add it correctly. Using my PHP contact form as an example, you have four results headings: three errors and one success result.

Below is the portion of contact form script with the results headings. In this code you’ll notice, in bold (and red if styles are supported), the addition of the result ID.

// This is the PHP contact form script, but only shown in part
    if (!isset($name,$email,$reason,$topicbody) || empty($name) || empty($reason) || empty($topicbody)){
    print "<h2 id=\"result\">Error!</h2>
      <h3>Sorry. An error has occurred!</h3>
      <p>The following &#8220;Required&#8221; fields were not filled in. Using your &#8220;Back&#8221; button, please go back and fill in all required fields.</p>\n";
  echo '<dl><dt>Field(s) Missed:</dt>'."\n";

    if(empty($name)){ echo '<dd>&#8220;Enter your full name&#8221;</dd>'."\n"; }
    if(empty($email)){ echo '<dd>&#8220;Enter your email address&#8221;</dd>'."\n"; }
    if(empty($reason)){ echo '<dd>&#8220;Select a contact reason&#8221;</dd>'."\n"; }
    if(empty($topicbody)){ echo '<dd>&#8220;Enter your message&#8221;</dd>'."\n"; }
  echo '</dl>'"\n";

} else { 

    if(!isset($email) || empty($email)){
  echo '<h2 id="result">Error!</h2>
     <h3>Sorry. An error has occurred!</h3>
     <p>The following &#8220;Required&#8221; fields were not filled in. Using your &#8220;Back&#8221; button, please go back and fill in all required fields.</p><dl><dt>Field(s) Missed:</dt><dd >&#8220;Enter your email address&#8221;</dd></dl>';

} else if(strpos($email,".") === FALSE || strpos($email,"@") === FALSE) {

  echo '<h2 id="result">Error!</h2>
     <h3>Sorry. An error has occurred!</h3>
     <p>The email address you have submitted seems to be invalid. Using your &#8220;Back&#8221; button, please go back and check the address you entered. Worried about Spam? Please review my <a href="/siteinfo/#privacy" title="Privacy Policy">Privacy Policy</a> and worry no more.</p>';

} else {

  echo "<h2 id=\"result\">Success!</h2>
      <h3>Contact Made!</h3>
      <p>Thank you for making contact with Mike Cherim, <em>$name</em>. If appropriate, Mike will get back to you shortly. You have successfully submitted the following information:</p>
      <li><a href=\"mailto:$email\" title=\"$name&#8217;s $email\">$email</a></li>
      <li><a href=\"$url\" title=\"$name&#8217;s $url\">$url</a></li>
      <p>You&#8217;re making contact to <em>$reason</em>.</p>
      <p>And you added the following message:</p>
      <blockquote cite=\"$name\">
      <p><a href=\"$hr\" title=\"Clear Results &amp; Reset Form\">CLEAR RESULTS &amp; RESET FORM</a></p>
      <dt>Form submitted by:</dt>
} else {

Adding the Bookmark Link

The next step is to add the bookmark to the form action target. In this case it’s PHP_SELF, and the result bookmark (#result) is added to the end of the target. Like this:

// This is the PHP contact form body, but only shown in part
  <form method="post" action="<?= $_SERVER["PHP_SELF"]; ?>#result">
    <h2>Contact Mike Cherim</h2>
    <p>The form on this page is an excellent way to communicate with me. The form is mine, the choice to use it is all yours. If you wish to use another method of contact, I do offer some <a href="#options" title="Alternative methods of contact">Contact Options</a> on this very page.</p>

How’s It More Accessible?

That’s all there is to it. Save the files and go. You’re done. But why did we do this? The whole idea is to make the form results more accessible. Prior to the changes, the form would return its result to the same page, basically reloading the page — starting at the top. The problem with this is to anyone using anything but a mouse, they are returned to the top of the page and are forced to navigate the page to read the result (assuming they know it’s there). By the time they make it to the result, the difficulty in getting back — if it’s an error result — will be substantial. By adding the modifications to your form as shown above, the user will be sent directly to the submit results.

To see the script above in its entirety, please check out my original PHP Contact Form article and script.
If you want to see this in action, set some accesskeys at or simply submit my contact form without putting values in the fields.

6 Responses to: “Accessible Form Results”

  1. Dan responds:
    Posted: March 1st, 2006 at 1:45 pm

    That’s good stuff Mike, I want to implement something similar at work. It’s a technique Derek Featherstone promoted in his talk at Web Essentials last year, but in the context of search results. The podcast is well worth a listen.

  2. Derek Featherstone responds:
    Posted: March 1st, 2006 at 7:49 pm

    I guess that’s why most people like to go to the conferences even though so many make the materials available online. The first 3-4 examples are online at though I haven’t had time to post the others and my original slides :(

  3. Derek Featherstone responds:
    Posted: March 1st, 2006 at 9:55 pm

    Awesome, Mike… thanks. I might have thought to link them myself, but I was on my BlackBerry and typing HTML with that minimalist keyboard isn’t exactly a treat!!

Sorry. Comments are closed.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.