Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
This article was contributed by my good friend, accessible designer, Technical Writer with Opera Software ASA, and co-founder of The South African Web Standards and Accessibility Group, Frank Palinkas. This is part two of a two part series that explores a new accessible way of providing context sensitive help to both form fields and a complete form (If you missed part 1 you can read it here.).
Employing the Form Help Method
Calling traditional Context-Sensitive help popup windows
This method has been implemented throughout web-based application history.
- A hyperlink from the web form (a help icon or other means) is made to an external help topic or file which details instructions to complete each field in the form.
- This action or behavior is commonly known as "invoking a popup window".
The advent of web standards and web accessibility has highlighed the difficulties assistive devices (i.e., screen readers, etc.) encounter when dealing with popup windows.
Form Help Method
How it Works
A user clicks on or activates the help icon link in the web form.
- The browser follows the link to the external Context-Sensitive help file and opens it in a new window in the current web page.
- In the markup, we replace the onclick event handler attribute with the rel attribute.
- In doing so:
- The rel attribute now serves the same purpose and delivers the same result as the replaced onclick event handler attribute.
- When scripting is turned off in the browser and the help icon is activated by a user, the external Context-Sensitive help file will open in a new, full-sized browser window.
Below is a screen shot of that we are working towards:
[img_assist|nid=2178|title=Screenshot of the final form|desc=|link=none|align=none|width=450|height=450]
Activating the Context-Sensitive Form HelpImportant! Inform the user that clicking the help icon will open help in a new window.
Following good practice, the user should know what is going to happen before performing an action.
- Mouse activation:
- Click the Help icon in the form to call the Context-Sensitive help.
- Click the [ X ] in the Help window title bar to close it.
- Keyboard activation:
- Press the TAB key to gain focus on the Help icon .
- Press the ENTER key to open the help.
- Press the ALT + F4 keys together to close the help window.
- Turn off scripting in your browser, refresh the web page, and then activate/click the same help icon again.
- The Context-Sensitive help will now open in a new full sized window, covering up this web page.
HTML Markup Code for the Form Help Method
The Context-Sensitive help markup starts on code line 5 and ends on code line 7 in the code block.
- Below is a HTML code block (gray colored area) containing all of the markup needed to construct the form.
- An external cascading style sheet (master.css) positions the Context-Sensitive help icon on the right side of the <h3> element instruction text for quick association and access to it.
- For your editing and reference purposes, this external CSS style sheet is contained within the main project folder along with the rest of the working parts of this tutorial.
Definitions of the code in the code block:
- <a></a> This is the anchor (link) element which contains the following attributes and their values:
- href="HelpExample.htm" This markup attribute and its value identify the hyperlink path to the external Context-Sensitive help web page.
- <img - - - src="images/help_small.gif" This markup attribute and its value identify the source location of the external help icon image.
<form action="" method="post" id="enquiryform">
<h3 title="help instructions">Click the icon to view help in a new window.<a rel="help" href="HelpExample.html"><img alt="helpicon" title="Click to view help in a new window." width="16" height="16" src="../media/icons/help_small.gif"></a></h3>
<label for="subject" title="Subject dropdown list.">
Subject <span class="req">Required</span>
<select name="subject" id="subject">
<option value="">Select a Subject</option>
<option value="Option 1">Help Authoring Tools</option>
<option value="Option 2">Microsoft HTML Help</option>
<option value="Option 3">Web-based Help</option>
<option value="Option 4">Context-Sensitive Help</option>
<label for="name" title="Name field">
Name <span class="req">Required</span>
<input type="text" name="name" id="name">
<label for="email" title="Email field">
Email <span class="req">Required</span>
<input type="text" name="email" id="email">
<label for="message" title="Message field">
Message <span class="req">Required</span>
<textarea name="message" id="message" rows="6" cols="30"></textarea>
<label for="updates" title="Updates checkbox">
Send Me Updates <span class="req">Optional</span>
<input type="checkbox" name="updates" id="updates" value="n">
<label for="submit" title="Click this button to submit your enquiry.">
<input class="submit" type="submit" id="submit" value="Submit Enquiry">
Definitions of the markup:
Important Note: All files must always be kept within the main project folder to maintain their associations as written in the code.
relattribute value of
<a></a>element with its
hrefattribute to open the Context-Sensitive help web page (HelpExample.htm) within the Form Help Method web page.
The following code block contains three functions:
- function addLoadEvent(func) This function enables more than one script to register and load in a web page.
- function formhelp() This function sets the rel attribute as the hook to the anchor link which points to the external help file.
- function popUp(winURL) This function provides the trigger to open the external help file in a new window.
- Form Help Method web page
- Context-Sensitive help web page
- images folder
- CSS files
- Notice the rel attribute with its value of "help" and its relationship to the anchor ("a") element href attribute which in the markup points to the external help file.
- You can also set the:
- width and height of the new Context-Sensitive help window;
- add a status bar to it (highly recommended);
- give the user the ability to resize the new Context-Sensitive help window if they choose to do so;
- add scrollbars to it.
- These additions to the function are shown in the window.open(winURL,"popup", ...), line 39 in the following code block.
- If scripting is turned off in the browser the Context-Sensitive help page when activated, will gracefully open in a new, full sized window.
/* start multiple load function - design by Simon Willison */
var oldonload = window.onload;
if (typeof window.onload != 'function')
window.onload = func;
window.onload = function()
/* add more code here to run on page load if necessary */
/* end multiple load function */
/* start window.onload = function() */
window.onload = function()
if (!document.getElementsByTagName) return false;
var lnks = document.getElementsByTagName("a");
for (var i = 0; i < lnks.length; i++)
if (lnks[i].getAttribute("rel") == "help")
lnks[i].onclick = function()
/* end formhelp() function */
/* start popUp(winURL) function */
window.open(winURL, "popup", "width=460,height=680,status=yes,resizable=yes,scrollbars=yes,screenX=600,screenY=200,top=200,left=600");
/* end popUp(winURL) function */
I sincerely thank
Frank PalinkasTechnical Writer with Opera Software ASA
Frank sincerely thanks (in alphabetical order)
Char James-TannyPresident of JTF Associates, Owner of helpstuff.com, Secretary of the Society for Technical Communication (S.T.C.)
Websites: http://www.helpstuff.com HAT-Matrix.com
Manager - Applications Engineer, Campbell Scientific Inc.
Gez LemonPrincipal Accessibility Engineer and Project Leader - The Paciello Group (T.P.G.)
Mike PacielloCreator/Owner of Helpware.net, Helpware FAR HTML, and H2Reg
Opinions expressed by DZone contributors are their own.