TW Blog :: Entries for Accessibility

Accessibility Assessment Report

This post does not relate to any other topics

In light of the DRC Report back in April, further alarming reading comes from Comparative Assessment of Web Accessibility and Technical Standards Conformance in Four EU States:

It is not just that Web technology is not being applied positively to improve opportunities and capabilities for users with disabilities. On the contrary, as Web services become more pervasive and essential, it means that those with disabilities in our society will increasingly suffer further disadvantages in accessing information and online services. Carmen Marincu and Barry McMullin

A sample of 4877 websites from Ireland, United Kingdom, France and Germany, selected from the Open Directory, were tested with Bobby:

• 94.0 percent of the Irish sites, 94.5 percent of the U.K. sites, 95.6 percent of the German sites and 98.6 percent of the French sites failed Bobby at the minimal accessibility level (WCAG-A)
• 99 percent of U.K. sites and 100 percent of the Irish, French and German sites failed Bobby at the professional accessibility level (WCAG-AA)
• All (100 percent) of the sites failed Bobby at the maximum accessibility level (WCAG-AAA)

Posted on Aug 03, 2004 at 20:17:35. [Comments for Accessibility Assessment Report- 0]

Automating Placeholder Text In HTML Forms

Also relates to DOM Scripting

One of the stumbling blocks for achieving Triple A Conformance of the WCAG 1.0 is Checkpoint 10.4 regarding placeholder text for form controls:

Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas.Checkpoint 10.4 Web Content Accessibility Guidelines 1.0

This is actually an interim solution to accomodate certain legacy assistive technologies that can not handle empty form controls. However, accessibility can be improved if, in meeting this checkpoint, the placeholder text is informative text that assists the user with the information they should enter. For example:

<input type="text" id="name" name="name"
       value="Please enter your name"/>
<input type="text" id="tel"  name="tel"  
       value="Your Phone Number - 01234 123123"/>

This information can be valuable to the user where a complex form is layed out with tables and the label may be detached from the field it relates to. To ease the form completion process a Javascript event may be attached to the form field to clear the placeholder text when focus is received.

<input type="text" id="name" name="name"
       value="Your name"/
       onfocus="if(this.value=='Your name')this.value=''"/>

With a multi-field form the inclusion of a large number of onfocus event handlers will bloat the HTML so this behaviour should be defined in a separate script file.

var helpers = ['Please enter your name', '…', … ];
function addFieldListeners() {
  var elems = document.forms[0].elements;
  for (var i = 0; i < elems.length; i++) {
    if (elems[i].type == "submit") {continue;}
    elems[i].onfocus = function(evt) {
      evt = (evt) ? evt : 
                    (window.event) ? window.event : null;
      if (evt) {
        var elem = (evt.target) ? evt.target : 
                    (evt.srcElement) ? evt.srcElement : null;  
        if (elem) {
          var value = elem.value;
          for (var i = 0, m = helpers.length; i < m; i++) {

            if (value == helpers[i]) {
              elem.value = "";
            }              
          }
        }
      }
    }    
  }  
}

Here an anonymous function is assigned to each form field and when focus is recieved the value is tested against an array of predefined placeholder text strings. This code could be cleaned up by assigning a new array search function to the Array object prototype property, and a global function for retreiving the element that received the event (since other behaviour in the document may require this). This solution will suffice, with new placeholders just added to the helpers array, but in larger projects this in itself can become quite a tiresome process - take a content management system as an obvious example.

Working on a CMS solution just the other day I thought about using the title attribute of the input field to store the placeholder text. My initial thinking was that this could still provide the helper information to the user after they had set focus on the field. If they were jumping around a large form, the user should not be expected to remember the helper text once it has been cleared. Plus the purpose of the title attribute is to provide additional information for the element - exactly what the helper/placeholder text is doing in this scenario. So, this time, using the closure technique discussed previously, the following:

<input type="text" id="name" name="name"
          accesskey="n"
          title="Please enter your name" 
          value="Please enter your name" />

could be handled with the following field listener:

function FieldListener(elem) {
  this.elem = elem;
  this.helper = "";
  
  var me = this;
  
  this.init = function() {
    this.helper = this.elem.getAttribute('title');    
    // Scott Andrew's addEvent method at 
    // www.scottandrew.com/weblog/articles/cbs-events
    addEvent(this.elem, "focus", this.clear);
    addEvent(this.elem, "blur",  this.redisplay);
  }
  
  this.clear = function(evt) {
    if (me.helper == me.elem.value) {
      me.elem.value = "";  
    }
  }
  
  this.redisplay = function(evt) {
    if (me.elem.value == "") {
      me.elem.value = me.helper;  
    }  
  }
}

The FieldListener object stores the title attribute value in a member variable when it is instantiated, then when the field receives focus, the field value is compared against this member variable. Functionality can be extended by redisplaying the placeholder text if the field is still empty when the user moves focus elsewhere - the FieldListener.redisplay() function achieves this. This event listener can be bound to each form field (along with other behaviours - eg pseudo CSS, validation) as follows:

function register(collection) {
  var i, elem, listener;
  for (i = 0; elem = collection.item(i++); ) {
    if (elem.nodeName == "INPUT" && 
        elem.getAttribute("type") != "text")
        {continue;}
    listener = new FieldListener(elem);
    listener.init();  
  }
}
function __init() {  
  if (document.getElementsByTagName) {
    var input_flds = document.getElementsByTagName('input');
    register(input_flds);
    var textarea_flds = document.getElementsByTagName('textarea');
    register(textarea_flds);
  }
  else {    
    nastyHackToHandleNonW3CDom();
  }
}

// see Simon Willison's addLoadEvent entry at 
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
addLoadEvent(__init);  

An alternative function would need to be provided for legacy browsers that do not support DOM2 (Netscape 4.x, MSIE 4.x). Perhaps just selecting the placeholder text on field focus so the user can delete it if they wish to (DOMElement.select()) may suffice. To round off, this modular solution provides a simple automated approach to handling placeholder text that does not require the author to expicitly register the text within the Javascript code - the whole process is automated based on the value of the title attribute.

Posted on Jul 01, 2004 at 16:34:43. [Comments for Automating Placeholder Text In HTML Forms- 4]