Let's Go!
This Fast Track tutorial demonstrates two methods to call Context-Sensitive Help in a Web Form:
- the Field Help Method
- the Form Help Method
We'll discover how Unobtrusive DOM/JavaScript achieves the desired result in calling Context-Sensitive help, and demonstrate how to keep the Structure, Presentation, and Behavior layers of a web page completely separate from one another ensuring good practice with current web standards and accessibility rules.
Employing the Field Help Method
A standards-based, accessible and integrated alternative to Context-Sensitive help popup windows
The Context-Sensitive Field Help Method with unobtrusive DOM/JavaScript goes a long way in satisfying web standards and accessibility needs.
- Help content is contained within the Web Form and attached to each form field.
- If and when a user needs help with a particular field, they activate/click a help icon image to open and close the the help content.
- If scripting is turned off in the browser, the help will automatically be presented below each form field.
- In this section of the tutorial, we'll demonstrate how Unobtrusive DOM/JavaScript provides a better way to deliver user-activated, field-level Context-Sensitive help.
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.
- The Context-Sensitive help is called by JavaScript, which produces a secondary window containing the help within the web form page.
- 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.
- This new interest has given rise to what is known as Unobtrusive DOM/JavaScript and its employment in cases such as Context-Sensitive help popup windows.
- The Form Help Method shows how to implement Unobtrusive DOM/JavaScript to call an external Context-Sensitive help popup window from a web form in a standards-based and accessible manner.
Other Possibilities
- Dropdown Navigation lists
- Another Fast Track tutorial will show how this is done.
- Frequently Asked Questions (F.A.Q.) documentation is a good example.
- Answers to the questions can remain hidden until opened by user action via the script.
- This saves precious vertical space in the document and limits scrolling to find a particular question.
Frequently Asked Questions Example
How to use: Activate/Click a
icon to open or close an answer section.
Question 1
Answer: This answer is constructed with a paragraph and an ordered list.
- Task
- Nested Task
- Task
- Task
Question 2
Answer: This answer is constructed with a paragraph and an unordered list.
- Item
- Nested Item
- Item
- Item
Question 3
Answer: This answer is constructed with a paragraph and a definition list.
- Definition Term
- Definition Description
- Definition Term
- Definition Description