Access options:

New web site is in beta: websemantics.uk. A far better experience.

Accessible JavaScript form help

author: mike foskett 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

All 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]

Features:

  • unobtrusive JavaScript, that is no JavaScript appears in the body
  • multiple show & hides on one page
  • accessible to both mouse and keyboard independently
  • a cross browser, cross platform solution
  • without JavaScript present the show & hide link is plain text and the help text is displayed in full
  • the example keeps the span's natural inline styling though it is configurable
  • the cursor changes to "help" when hovered on the link helping to differentiate it from a normal link
  • all styling may be done via a style sheet
  • an add event script is included for working alongside other onload actioned scripts.

Limitations:

  • only works with two adjacent <span> elements but is changeable for other elements
  • the first span requires class="helpLink".

The (X)HTML code

Note: No link in the form; No JavaScript; All text inside the label.


<form method="post" action="#">
  <fieldset>
    <p>All fields marked <strong class="required" title="Required">*</strong> are required</p>
    <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" />
    <input name="quote" id="quote" value="Get quote now" type="submit" />
  </fieldset>
</form>

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".


fieldset {color:#000; background:#fff7dd; border:1px solid #ccc; padding:0.5em; margin-bottom:1em}
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 function addEvent(func) allows multiple on-load actions. It is the equivalent of window.onload=hideAll;. If you wish to know more about it then check out the original addLoadEvent by Simon Willison.


function addEvent(func){
  if (!document.getElementById | !document.getElementsByTagName) return
  var oldonload=window.onload
  if (typeof window.onload != 'function') {window.onload=func}
  else {window.onload=function() {oldonload(); func()}}
}

addEvent(hideAll)

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'
}

Credits

The function addEvent(func). Is a basic copy of Simon Willisons addLoadEvent.

The function hideAll() was a furtherance to a masterful piece by Chris Heilmann at onlinetools.org

Discussions on this technique are available on the Accessify forum.

Site search & complementary navigation:

Site search:

Online tools

Most popular

New to site