JAST: WAI-ARIA JavaScript framework

JAST is a powerful JavaScript toolkit written by Diego La Monica that supports the WAI-ARIA standard and technologies in order to make RIAs accessible even to assistive technologies users. In its core, called JAST.src, JAST provides some useful methods to deal with WAI-ARIA attributes. For example:

ARIA: {
  addRole: function(e, role){
   e.setAttribute('role',role);
  },
  setProperty: function(e, property, value){
   if(typeof (property) == 'object'){
    for(p in property){
     e.setAttribute('aria-' + p, property[p]);
    }
   }else{
    e.setAttribute('aria-' + property,value);
   }
  },
  getProperty: function(e, property){
   return e.getAttribute('aria-' + property); 
  },
  focusNextNode: function(node){
   
   var p = node.parentNode;
   if(p==null) return false;
   var nodes = p.childNodes;
   if(node.id==null || node.id=='') node.id = JASTEggIt.generateUniqueId('jast');
   var isCurrent = false;
   for (var i = 0; i < nodes.length; i++) {
    if(nodes[i].nodeType==1){
     if(isCurrent){
      nodes[i].focus();
      return;
     } 
     isCurrent = (node.id== nodes[i].id);
    }
   }
  },
  focusPreviousNode: function(node){
   var p = node.parentNode;
   if(p==null) return false;
   var nodes = p.childNodes;
   if(node.id==null || node.id=='') node.id = JASTEggIt.generateUniqueId('jast');
   
   var previousItem = null;
   
   for(var i = 0; i<nodes.length; i++){
    if( nodes[i].nodeType==1){ // è un nodo HTML del DOM
     if (node.id== nodes[i].id) { 
      if (previousItem == null) return false;

      previousItem.focus();
      return true;
     }
     previousItem = nodes[i];
    }
   }
   if(previousItem!=null) previousItem.focus();
   return true;
  }

 }

The ARIA object contains the following methods:

  1. addRole() - adds an ARIA role attribute
  2. setProperty/getProperty() - getter/setter for ARIA object properties
  3. focusNextNode() - giving focus to a DOM node is a basic requirement when dealing with keyboard navigation; this method gives focus to adiacent nodes
  4. focusPreviousNode() - same as above, except that this method gives focus to a preceding node in the DOM tree.

As you can see, JAST doesn't create a global wrapper for chaining methods and properties (for example, jQuery follows this approach). Instead, it uses a global namespace, so you're not forced to write $(element)[0].method() to use a simple DOM property or method. The approach followed by JAST is much similar to the YUI library's one.

Leave a Reply

Note: Only a member of this blog may post a comment.