Travis Roth’s Weblog

<li>item 1

<ul> 

<li>item 1.1</li> 

<li>item 1.2</li> 

<li>item 1.3</li> 

</ul> 

</li> 

<li>item 2

<ul> 

<li>item 2.1

<ul> 

<li>item 2.1.1</li> 

<li>item 2.2.2</li> 

</ul> 

</li> 

</ul> 

</li> 

<li>item 3</li> 

</ul> 

// Find list items representing folders and 

// style them accordingly. Also, turn them 

// into links that can expand/collapse the 

// tree leaf. 

$(’li > ul’).each(function(i) { 

// Find this list’s parent list item. 

var parent_li = $(this).parent(’li’); 

// Style the list item as folder. 

parent_li.addClass(’folder’); 

// Temporarily remove the list from the 

// parent list item, wrap the remaining 

// text in an anchor, then reattach it. 

var sub_ul = $(this).remove(); 

parent_li.wrapInner(’<a/>’).find(’a').click(function() { 

// Make the anchor toggle the leaf display. 

sub_ul.toggle(); 

}); // close the add a click event handler

parent_li.append(sub_ul); 

}); // closes the loop working on each branch

// Hide all lists except the outermost. 

$(’ul ul’).hide(); 

}); 

Define the tree element

In this example the root of the tree is an unordered list. We can use jQuery to programmatically set the role of the list to be a tree. We can add this code to the end of the above function since it is not dependent on any earlier work. In fact we could add it to the beginning as well but let’s not complicate things.

first_ul.attr(”role”, “tree”);

The filter of “:first” causes jQuery to return the first unordered list in the document. If we had several lists which were being defined as separate trees, or if otherwise there were multiple lists and only one is to be a tree then a more elegant selector would need to be used. For example the selector could look for unordered lists that have a class of tree. Refining this is left as an exercise for the reader to do as is needed in any specific application. Back to adding ARIA…

The second line adds a “role” attribute using jQuery’s attr() function and sets its value to “tree.”

Defining tree items

Each list item will be given an ARIA role of treeitem. The following jQuery will loop through the DOM and give each list item a new “role” attribute and set it to “treeitem.” We can place the code at the end of the above function.

$(’ul li’).attr(”role”, “treeitem”);

Add state

A tree item has two possible states: expanded and collapsed. To tell which state should be conveyed to assistive technology ARIA defines the “aria-expanded” attribute. We need to add “aria-expanded” attributes to each tree item that has children.

In this example we note that by default only the root tree is being displayed and all children are being hidden (or collapsed). In addition, the example is already determining which tree items have children, so we just need to append to the end of the logic that is working with the branches.

The branches that need to have the “aria-expanded” attribute are represented in the parent_li variable. Add the attribute by placing this line just before the sub-list is appended back to the parent list item:

Naming the branches

The line can be placed after the removal of the sub-list from the parent list item:

var sub_ul = $(this).remove(); 

The variable treeitem_label_i is just an index counter we increment by one with each iteration of the loop to create different ID’s for each item. We will have ID’s of “a11yLabel1″, “a11yLabel2″, etc.

Then set the “aria-labelledby” attribute on the parent list item to point to the span we just created:

The variable first_ul created earlier points to the list that is defined as a tree that we need to label. Using the first span we just created we can set the label for the tree to the span by:

first_ul.attr(”aria-labelledby”, “a11yLabel1″);

Tabindex

The tree needs to receive focus when tabbed too. In order to do this a tabindex = 0 is given to the root list. In addition, to keep tab from going to the links in the tree tabindex = -1 is given to them. This way focus can be programmatically set to the elements, but tab will bypass them, giving the user a nice quick way to continue to other parts of the page. (The tree itself will be navigated by using the arrow keys once it has focus.)

Set the tree tabindex = 0 with this line:

And give the other list items and links a tabindex = -1:

$(’ul li a’).attr(”tabindex”, “-1″);

Putting it together

At this point we have the code we need to build ARIA into the default tree that is being created from the nested lists. When we combine the steps outlined to this point we end up with the following JavaScript.

        // code

            // the ready event runs after page is loaded

$(document).ready(function() {

// Find list items representing folders and

// style them accordingly. Also, turn them

// into links that can expand/collapse the

// tree leaf.

var treeitem_label_i = 0; // index for ARIA labels

$(’li > ul’).each(function(i) {

    treeitem_label_i++;

// Find this list’s parent list item.

var parent_li = $(this).parent(’li’);

// Style the list item as folder.

parent_li.addClass(’folder’);

// Temporarily remove the list from the

// parent list item, wrap the remaining

// text in an span and a anchor, then reattach it.

var sub_ul = $(this).remove();

parent_li.wrapInner(”<span id=’a11yLabel”+treeitem_label_i + “‘/>”); // use this for ARIA label

parent_li.attr(”aria-labelledby”, “a11yLabel”+treeitem_label_i);

parent_li.wrapInner(’<a/>’).find(’a').click(function() {

// Make the anchor toggle the leaf display.

sub_ul.toggle();

}); // close the add a click event handler

parent_li.attr(”aria-expanded”, “false”); // adding state via ARIA

parent_li.append(sub_ul);

}); // closes the loop working on each branch

// Hide all lists except the outermost.

$(’ul ul’).hide();

// ARIA code

// set the outer list to be the tree

var first_ul = $(”ul”).filter(”:first”);

first_ul.attr(”role”, “tree”);

// name the tree using the first item in the tree (for some trees other text on page may be more suitable)

first_ul.attr(”aria-labelledby”, “a11yLabel1″);

// set tabindex

first_ul.attr(”tabindex”, “0″);

$(’ul li’).attr(”tabindex”,”-1″);

$(’ul li a’).attr(”tabindex”, “-1″);

// define treeitems

$(’ul li’).attr(”role”, “treeitem”);

});

In part two event handling will be discussed and added to the tree so that nodes can be expanded and collapsed. After all, what fun is a static tree? (Astute readers will note there already is some event handling provided but at this point it is mouse oriented. It needs to be device independent, or in JavaScript’s case handle both mouse and keyboard events.) In addition, when the state of a node changes, the ARIA needs to be updated to reflect the change. This also needs to be added to event handler logic.

References