Field Help Markup

The Field Help (X.)H.T.M.L. Structural Markup

What are the benefits of this method?

  1. Help is contained within the same web page as the form. It is not external to it as in the Form Help Method.
  2. No pop-up or new window is needed to show the help. This is an important factor regarding web accessibility and standards.
  3. If DOM/JavaScript is turned off in the user agent/browser, the Context-Sensitive help will automatically show below each field name.
  4. The anchor elements attached to the help icon image elements that open and close the help will be removed, since there is no action needed to trigger its display.
  5. Important Note: This method also allows users dependant on keyboards to tab through each field and easily activate the help. This is an important useability and accessibility component of the technique.

Unobtrusive DOM/JavaScript Cross-Referencing / Related Container Method (as designed by Gez Lemon of The Paciello Group)

The DOM/javaScript cross-referencing technique produces a relationship between two markup elements.

Definitions to the highlighted code in the following code block:
<img id="subjecthelp" The help icon image id attribute with its value of subjecthelp.
<div id="containersubjecthelp"> The div help container id attribute with its value of containersubjecthelp.
  1. <form action="#" method="post" id="enquiryform">
  2.   <fieldset>
  3.     <legend>Enquiry Form</legend>
  4.       <h3 class="form" title="help instructions">
  5.         Activate/Click a Help icon to open or close help.
  6.       </h3>
  7.  
  8.  
  9.   <div>
  10.     <label for="subject" title="Subject dropdown list">
  11.       Subject <span class="req">(required)</span>
  12.       <img id="subjecthelp" alt="help for subject field"  class="help"
  13.         width="16" height="16" src="images/help_small.gif" />
  14.     </label>
  15.   </div>
  16.   <div id="containersubjecthelp">
  17.     <p class="cshelp">
  18.       Please select a subject in the dropdown list.
  19.     </p>
  20.   </div>
  21.   <div>
  22.     <select name="subject" id="subject">
  23.       <option value="">Select a Subject</option>
  24.       <option value="Option 1">Help Authoring Tools</option>
  25.       <option value="Option 2">Microsoft HTML Help</option>
  26.       <option value="Option 3">Web-based Help</option>
  27.       <option value="Option 4">Context-Sensitive Help</option>
  28.     </select>
  29.   </div>
  30.  
  31.  
  32.   <div>
  33.     <label for="name" title="Name field">
  34.       Name <span class="req">(required)</span>
  35.       <img id="namehelp" alt="help for name field" class="help"
  36.         width="16" height="16" src="images/help_small.gif" />
  37.     </label>
  38.   </div>
  39.   <div id="containernamehelp">
  40.     <p class="cshelp">
  41.       Please enter your full name in the textbox.
  42.     </p>
  43.   </div>
  44.   <div>
  45.     <input type="text" name="name" id="name" />
  46.   </div>
  47.  
  48.  
  49.   <div>
  50.     <label for="email" title="Email field">
  51.       Email <span class="req">(required)</span>
  52.       <img id="emailhelp" alt="help for email field" class="help"
  53.         width="16" height="16"  src="images/help_small.gif" />
  54.     </label>
  55.   </div>
  56.   <div id="containeremailhelp">
  57.     <p class="cshelp">
  58.       Please enter your email address in the textbox.
  59.     </p>
  60.   </div>
  61.   <div>
  62.     <input type="text" name="email" id="email" />
  63.   </div>
  64.  
  65.  
  66.   <div>
  67.     <label for="message" title="Message field.">
  68.       Message <span class="req">(required)</span>
  69.         <img id="messagehelp" alt="help for message field" class="help"
  70.         width="16" height="16" src="images/help_small.gif" /></label>
  71.   </div>
  72.   <div id="containermessagehelp">
  73.     <p class="cshelp">
  74.       Please enter your message in the textbox.
  75.     </p>
  76.   </div>
  77.   <div>
  78.     <textarea name="message" id="message" rows="6" cols="30"></textarea>
  79.   </div>
  80.  
  81.  
  82.   <div>
  83.     <label for="update" title="Receive updates checkbox">
  84.       Send Me Updates <span class="req">(optional)</span>
  85.         <img id="updateshelp" alt="help for updates checkbox" class="help"
  86.         width="16" height="16" src="images/help_small.gif" />
  87.     </label>
  88.   </div>
  89.   <div id="containerupdateshelp">
  90.     <p class="cshelp">
  91.       Check the box if you want to receive updates.
  92.     </p>
  93.   </div>
  94.   <div>
  95.     <input class="checkbox" type="checkbox" name="update" id="update" value="n" />
  96.   </div>
  97.  
  98.  
  99.     <label for="submit" title="Click to submit your data.">
  100.       <input class="submit" type="submit" id="submit" value="Submit Enquiry" />
  101.     </label>
  102.   </fieldset>
  103. </form>

top