Accessible JavaScript form help
Last revised: 15th August 2006
A rough example showing and hiding adjacent span elements intended as extended form help, using accessible unobtrusive JavaScript.
This work is a furtherance to a development by Chris Heilmann at onlinetools.org.
The demonstration shows & hides a piece of help text in the simple form below. The label
text "Total amount to insure" is inside a span
with a class="helpLink"
. The span
is directly followed by another span
which contains the help text to be hidden.
It should be noted for accessibility reasons both spans
and the £ symbol are inside a label
which is explicitly associated to the input.
Rough example
The JavaScript is held in a separate file called showhide.js [1.59KB]. A minimal example is available for download: showhide.zip [1.56KB]
The (X)HTML code
Note: No link in the form; No JavaScript; All text inside the label
.
<label for="sumInsured">
Total amount to insure:
<span class="helpLink">[help]</span>
<span>You should state the new replacement value including VAT of the same or comparable replacements.</span>
<strong class="required" title="Required">*</strong>
<span>£ </span>
</label>
<input name="sumInsured" id="sumInsured" value="5000" size="10" maxlength="10" type="text" />
The CSS
It is recommended for the help link to have a different look to the standard links on the page. the example uses greens and the cursor is set to "help".
strong.required {color:red; cursor:help}
a.helpLink,
a.helpLink:link {color:#040; cursor:help}
a.helpLink:active,
a.helpLink:focus,
a.helpLink:hover {color:#090}
a.helpLink:visited {color:#020}
The unobtrusive JavaScript
The workhorse of the script is the function hideAll()
. When the page has finished loading it looks through the content for all occurrences of a span
element.
It then checks to see if the span
has a class="helpLink"
. If so it sets the next adjacent span
display property to disply:none
. Then creates a link, populates it with the original text, and adds a few attributes.
An onclick
action is then added which flips the display state between "none" and "inline", it also flips the link title accordingly. The link then finally replaces the original span
.
function hideAll(){
var obj,nextspan,anchor,content
// get all spans
obj=document.getElementsByTagName('span')
// run through them
for (var i=0;i<obj.length;i++){
// if it has a class of helpLink
if(/helpLink/.test(obj[i].className)){
// get the adjacent span
nextspan=obj[i].nextSibling
while(nextspan.nodeType!=1) nextspan=nextspan.nextSibling
// hide it
nextspan.style.display='none'
//create a link
anchor=document.createElement('a')
// copy original helpLink text and add attributes
content=document.createTextNode(obj[i].firstChild.nodeValue)
anchor.appendChild(content)
anchor.href='#help'
anchor.title='Click to show help'
anchor.className="helpLink"
anchor.nextspan=nextspan
anchor.onclick= function(){
showHide(this.nextspan);
changeTitle(this);
return false
}
// replace span with created link
obj[i].replaceChild(anchor,obj[i].firstChild)
}
}
}
function changeTitle(obj)
changes the span links title attribute accordingly.
function showHide(obj)
changes the visibility of an object, in this case the next adjacent span.
function changeTitle(obj){
if(obj)
obj.title = obj.title=='Click to show help' ? 'Click to hide help' : 'Click to show help'
}
function showHide(obj){
if(obj)
obj.style.display = obj.style.display=='none' ? 'inline' : 'none'
}
window.addEventListener("load", hideAll, false);
Credits
The function hideAll()
was a furtherance to a masterfully simple piece by Chris Heilmann at onlinetools.org
Discussions on this technique are available on the Accessify forum.
Social links and email client: