AJAX, WEB 2.0 and Accessibility - a tutorial

Tutorial Menu

• Home Page
• Basic AJAX - Creating an AJAX class
• Basic AJAX - Calling the AJAX class
• Basic AJAX - Making the AJAX class more accessible
• Basic AJAX - Incorporating alternatives
• Basic AJAX - Best Practice
• Common uses
• Submitting a form
• Dynamically Displaying Content

Basic AJAX - Best Practice

The previous examples may give a user a chance of working but without careful thought it can create confusion for other assistive technologies. AJAX can be used to help aid users in the use of a website. Webcredible state that the following should be incorporated:

• Inform users early in the page that dynamic updates will occur
  Not all users are familiar with AJAX interfaces. Let them know that changes may take place so they can expect and look for these changes. This is particularly important for screen reader and magnifier users as they may be unaware that changes have taken place.
• Highlight the areas that have been updated
  Using subtle changes to highlight areas that have changed, for just a short period of time, can be most helpful. It will inform users, in particular those with reading difficulties that updates have taken place.
• Don't change the focus
  Do not move the focus of the page to where the change has taken place. Changing the focus can be disrupting for screen reader and magnifier users especially if there are no mechanisms to return to the previous position.
• Offer the option to disable automatic updates
  Allow users to manually request page updates, for example by providing links and/or form buttons to refresh the page on-demand. Screen reader and magnifier users may be unaware of on-the-page changes. It can also be difficult for users with reading difficulties to keep up with automatic updates. If possible, store users' preferences for requesting page updates for future visits to the site.
• Ensure the site works if JavaScript isn't enabled
  Build a standard application then overlay it with AJAX to improve its functionality. If JavaScript is disabled or not available then users will still be able to use the site.

(webcredible, 2008)

If we apply this to the previous ideas discussed then the functionality of setting the focus or attempting to cause the virtual buffer on a screen reader to refresh is deemed confusing to a user. Instead the article suggests that the following changes are made. First start with the basic AJAX class as there is no functionality to set the focus or update the screen reader.

First update the AJAX class to incorporate the following standard loading message:

onSend:function(){
  var loadDiv=document.createElement('div');
  loadDiv.setAttribute('id','load');
  var loadText=document.createElement('p');
  loadText.appendChild(document.createTextNode('Loading more content'));
  loadDiv.appendChild(loadText);
  var objContent = document.getElementById('content');
  objContent.appendChild(loadDiv);		
}, 
onLoad:function(){
  var loadDiv=document.getElementById('load');
  document.getElementById('content').removeChild(loadDiv);
}

This is useful as there is no need to put a loading div in the document body.

Next add in the init functionality previously discussed.

window.onload = init;
function init(){
  giveOptions();
  if (get_cookie ( 'isAJAX' )||!document.getElementById || 
      !document.createTextNode || (typeof XMLHttpRequest == 'undefined' 
        && !ActiveXObject)){
    return;
  }
  createListeners();
}
function createListeners(){
  var objAnchor = document.getElementById('link');
  if (objAnchor){
    objAnchor.onclick = function(event){return makeCall();};
    objAnchor.onkeypress = function(event){return makeCall();};
  }
}
function removeListeners(){
  var objAnchor = document.getElementById('link');
  if (objAnchor){
    objAnchor.onclick = function(event){return true;};
    objAnchor.onkeypress = function(event){return true;};
  }
}
function giveOptions(){
  var accesslist=document.getElementById('accessMenu');
  if(accesslist){
    var newOpt=createLink();
    var listItem=document.createElement('li');
    listItem.appendChild(newOpt);
    accesslist.appendChild(listItem);
  }
}
function createLink(){
  var newOpt=document.createElement('a');
  newOpt.setAttribute('href' , '#');
  newOpt.setAttribute('id' , 'AJAXchoice');
  newOpt.setAttribute('href' , 'javascript:setAJAX()')
  if(get_cookie ( 'isAJAX' )){
    newOpt.appendChild(document.createTextNode(('Turn dynamic content on'));
  }else{
    newOpt.appendChild(document.createTextNode('Turn dynamic content off'));
  }
  return newOpt;
}
function setAJAX(){
  if(get_cookie ( 'isAJAX' )){
    delete_cookie ( 'isAJAX' );
    var newOpt=createLink();
    var AJAXLink=document.getElementById('AJAXchoice');
    AJAXLink.parentNode.replaceChild(newOpt,AJAXLink);
    createListeners();
    alert("Dynamic content is enabled on this site");
  }else{
    set_cookie('isAJAX', 1);
    var newOpt=createLink();
    var AJAXLink=document.getElementById('AJAXchoice');
    AJAXLink.parentNode.replaceChild(newOpt,AJAXLink);
    removeListeners();
    alert("Dynamic content is disabled on this site");
  }
}

The only change is to replace the information to 'Turn dynamic content off' as this is simpler for someone who does not know the term AJAX to understand. This will also inform the user that there is dynamic content.

The second change is to highlight the changed text. This is done through setting the background colour of the text. The colour can fit into your websites colour scheme. Inb the example I chose yellow by placing the following line of code in the makeCall function.

document.getElementById('dataTarget').style.backgroundColor='yellow';

See example

This option enables the majority of users the opportunity to user the web page. The dynamic content can be turned on and off alongside highlighting page changes and it works with JavaScript disabled.

Previous: Basic AJAX - Incorporating alternatives Next: Common uses