Skip to main content

A demonstration of an accessible method to hide form help utilising unobtrusive JavaScript.

-

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

Fields marked * are required

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>&pound; </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.