Getting Push Email on My Windows Mobile Smartphone

August 1st, 2009

BlackBerry users have long had the bragging rights of push email – the ability to receive new email notifications on their mobile device nearly in real-time wherever they were in range of a signal. Not everyone has BlackBerry though, but would like push email. It has been possible to have push email on Windows Mobile if you had access to an Exchange server, but many of us do not have this either. This left ActiveSync polling, which could be set to poll as often as 5 minutes, but hey this isn’t quite real-time! For more on push email see this Wikipedia article.

My Requirements

I needed to add email syncing to my Windows Mobile device in terms of my current email solution as I did not want to change email providers, nor get a new email address. And I did not want to have two different mailboxes with duplicate copies of my mail. With the latter requirement in mind this ruled out the possibility of forwarding mail to Windows Live Hotmail or using a Mail2web hosted Exchange account. My current email setup uses Google Apps to host email for my won domain—essentially Gmail and my own domain name. I use IMAP to connect Microsoft Outlook and it is also possible to use IMAP to link Windows Mobile and keep data synchronized, just not in real-time on the Windows Mobile device as discussed above.

Possible Solutions

As I researched alternative solutions to getting push email onto my Windows Mobile device without purchasing an Exchange server or using a hosted Exchange service I came across two developments, one new and one that has been around a few years but hasn’t gotten much press. The first solution I looked at is the open source Z-push by Zarafa.

Z-Push Open Source

Z-Push claims to be an open source implementation of the ActiveSync protocol, which is built into Windows Mobile device (and others) for syncing data including email, contacts and calendars. It is used in the Zarafa mail server, but has been separated into a stand alone package. Seeing it was open source and I could run it on almost any web server that supported PHP I was interested. According to the install guide it was possible to have Z-Push monitor an IMAP server connection and push changes to a mobile device. This could be perfect! I have an IMAP server courtesy of Google Apps after all…

A quick Google search indicated that a few others had came up with this idea. For example the forum post “Push email no forwarding required” explained that the author had it working. A few other posts also indicated that it worked including with the Gmail instead of Zarafa as the backend.

I threw up a Debian 5.0 server on my Linode VPS, installed Apache and PHP 5 and then set about testing Z-Push. The current stable release was Z-Push 1.2.2 and the latest beta was 1.3beta2. I opted to try the 1.2.2 version first as I hoped to avoid any beta bugs. Installation is not difficult as long as you are used to installing open source packages like this under Linux with some editing of PHP settings and configuring Apache. All is explained in the install guide and is not covered here. I edited Z-Push’s config.php file to use IMAP as the backend instead of Zarafa, also explained briefly in the install guide and in config.php. (I will note here as I was doing a test, I did not set up an SSL connection. For using this in production a SSL connection is recommended between Z-Push and the ActiveSync compatible device.)

This is when I encountered my first problem. Using the stock Debian 5 installation, with Apache and PHP5 packages installed using apt-get install, Z-Push would not run. After some investigation I found that a “canary mismatch on efree() - heap overflow detected” error was being thrown as shown in the Apache error log (/var/logs/apache2/error.log). This turns out to be caused by the suhosin patch compiled into the default Debian PHP 5 package (and it is included in other flavors as well). This seemed a strange error to be getting, and I did not find any useful resolutions to the problem on the Z-Push forums. Short of removing the suhosin patch as the post “Fixing Mismatched Canaries – How to Remove suhosin from Debian/Ubuntu Packages” describes, which seemed like a lot of work and possibly cause even more issues in the process, this seemed like a no-go.

I uninstalled Z-Push 1.2.2 (by deleting the z-push directory under the web server root) and installed Z-Push 1.3beta2. Upon launching this setup, the canary mismatch was resolved and there were no more errors in Apache’s error log. This was a positive step. (It is interesting that the Z-Push change log does not mention any fixes for this between 1.2.2 and 1.3beta2 that I could find, so I do not know what was causing the issue or what resolved it code-wise.)

Testing it further I opened the URL in the web browser and completed the authentication dialog using my Google Apps credentials. The browser reported that I was accessing it with an unsupported device, which was correct and passed the test that the install guide recommended.

Next it was time to try ActiveSync on Windows Mobile. For this I used my HTC 6800 running Windows Mobile 6.1. Using the New Account wizard on the Smartphone I configured an Exchange account, using my Z-Push server as the server and setting the login credentials for the Google Apps account. I set ActiveSync to sync email only, as other data types are not supported for this setup with Z-Push. Then I tried to sync.

The Smartphone tried to sync, then reported there was an error and to try later. No matter the cause this is the only error I got—not real useful. Back to the server again. I set Z-Push to keep a log of activity and tried the sync again. The log showed that the session was initiated, then Z-Push communicated successfully with the IMAP server, reporting there were 20 folder changes. Then the IMAP session was closed, and the log ended. No errors were shown. Also I found no new errors in the Apache error log. Yet, there was no email on my phone and the phone reported the sync operation failed.

TO ensure that it was not my Smartphone and/or Windows Mobile 6.1 I decided to try another account. For this I set up a trial account at Mail2web which is a hosted Microsoft Exchange provider, presumably using the full flavored Exchange server. I configured the Smartphone to sync email with Mail2web, and all went fine. The sync happened. Push email happened, when I sent the Mail2web account an email it showed up on the phone in just a few moments. Clearly, the Smartphone and ActiveSync were capable of syncing. Yet I could not get this syncing to occur with Z-Push.

And this is where the Z-Push project stands at present. Others claim to have it working. It looks like it should work. And it does not. I am hopeful to find a solution at some point in the future, perhaps an update to Z-Push, or there is some setting in Z-Push, Apache, or Windows Mobile that needs to be tweaked and I just have not found it?

New NuevaSync Service

NuevaSync is a relatively new sync service which offers calendar and contact syncing with Google over the air for free with ActiveSync compatible devices, including Windows Mobile and the iPhone. Recently NuevaSync added email syncing with IMAP servers including Gmail. When I read this it sounded very similar to what I was trying to do with Z-Push. And an added benefit is it can sync calendars and contacts. This was not a priority for me, but more features are better right?… While the calendar. Contact syncing is free; e-mail is a premium service currently costing $25 USD/year.

Following the advice on NuevaSync’s site, I first set up a free account to sync contacts with Google Contacts. Ensuring this works is recommended before plunking down $25 for the premium service. This will save you the hassle of trying to get a refund—which appears may not be possible. Since you can try before you buy of sorts this should not be a hang-up. The contact sync did work for me, although it did seem slow to update. This may be due to Google Contacts, or perhaps the free service is gaining popularity. Also most of the time it probably isn’t’ necessary to have instant contact updates, so this did not cause me much concern after I was able to determine that the sync connection did work.

I then upgraded to the premium email service and set it to retrieve my mail from Google Apps. I told ActiveSync to start syncing mail, and to schedule to receive items “as they arrive.” And… It worked! I am currently receiving mail on my Smartphone in near real-time, they often arrive in the same minute that they are reported being sent. Success!

It is nice to have found a solution. I would still like to figure out what is going wrong with Z-Push, in the meantime NuevaSync is providing a nice stand-in option.

ActiveSync and MobileSpeak

A brief note on configuring ActiveSync using MobileSpeak Pocket 2.1.212. Using the new account wizard, and using the Server configuration screens in ActiveSync, worked fine with MobileSpeak 2.1.212 Pocket PC edition, except for the last screen of configuring which items to sync. After an Exchange partnership is set up, the items to sync screen can also be found under Options in ActiveSync. The dialog is a tree of items to sync, and each item can be checked and unchecked. MobileSpeak was not announcing the state of the checkboxes, for either state. This made it difficult to tell what was to be synced and not. In my case it appears that by default the items are unchecked when a new Exchange partnership is created. However, I do not know if this is always the case, or if different phone models will behave differently. It is possible to use Windows Mobile Device Center to check and uncheck items, so there is a workaround…

 

Java Access Bridge and 64-bit Windows

July 3rd, 2009

 

The question of Does the Java Access Bridge work on 64-bit Windows? Recently came up on Sun’s Java Accessibility mailin list. After some discussion the following was posted by Peter Korn. It is reproduced here in hopes of being useful.

 

“I am writing to confirm to you that the existing 32-bit Java Access Bridge version 2.0.1 does work on 64-bit Vista, and I would expect it also would work with Windows 7. To use it with 64-bit Vista, you will need to do a “by hand” installation, as 64-bit Vista has introduced a pair of new directories for 32-bit files that the existing installer doesn’t know about. You must also use the 32-bit Java runtime (which means your Java applications & the runtime itself will be limited to 2GB of addressable memory). However, all of the other benefits of a 64-bit OS are available to you - e.g. for the other application you want to run.

 

Here are the steps:

 

  1. Download and install a 32-bit version of the Java runtime. This will work in 64-bit Windows, as do most 32-bit applications. Note that it will be installed not into your “Program Files” directory, but into 64-bit Vista’s “Program Files (x86)” directory.
    Download the “Access Bridge 2.0.1 Manual Install (.zip)” - one of the two options you get after following the link “Download Java Access Bridge 2.0.1″ at http://java.sun.com/javase/technologies/accessibility/accessbridge/
  2. Follow the “By hand” instructions at http://java.sun.com/javase/technologies/accessibility/accessbridge/2.0.1/docs/setup.html
  3. Copy the three DLL files “JavaAccessBridge.DLL”, “JAWTAccessBridge.DLL”, and “WindowsAccessBridge.DLL” from the Access Bridge installerFiles directory into your new for 64-bit Vista Windows\SysWOW64 directory. This is where 64-bit Vista needs to have 32-bit DLLs (for most people the full path will be “C:\Windows\SysWOW65″).
  4. Modify your PATH so that it ends with the Windows\SysWOW64 directory (Start Menu-> Computer -> Properties -> Advanced system settings -> Environment Variables -> System Variables -> PATH to add the string “;%SystemRoot%\sysWow64″ to the end of the existing PATH (or at a minimum, that it appears after the entry for “”%SystemRoot%\system32″ in your path).

 

With those changes you should be able to run the JavaFerret and JavaMonkey test tools and see the accessibility information of accessible Java apps (like SwingSet2 which is what I tested with).

 

As to whether your specific AT will support Java in this fashion on 64-bit Vista - that is a question for the AT vendors. I have tested it with NVDA version 0.6p3.2 (latest released version as of today), and NVDA reads the contents of apps accessible Java apps just fine - just as it does on 32-bit Windows.”

 

Finally as of June 2009 it has been reported that JAWS 10.0 does not work with the above configuration. And NVDA is confirmed to be working.

 

jQuery UI 1.7 Accessibility Support

March 9th, 2009

According to Marco’s Accessibility Blog, jQuery UI 1.7 contains WAI-ARIA support. This an exciting development as it is potentially possible that just by using the out-of-the-box components accessibility can be improved – for free.

Stay tuned to this development as hopefully more exploration and information and experiences will be reported in the coming months.

Washing Away Money

December 31st, 2008

Ever wondered if using a dish washer is more than just being lazy? According to the NY Times article “Money Down the Drain” it actually can save money and be friendlier to the environment!

The Federal Energy Star program estimates that a savings of $42 a year can be achieved. It is important to note their assumptions that the dish washer be energy star compliant, and be fully loaded with 8-12 place settings and accompanying dishes. So for those of us who don’t get that many dishes without hording them for a week, does it help to have a set of dishes sitting around getting moldy?

Nevertheless now we have the best excuse yet to load the dish washer. Happy dish washing!

Programmatically Customizable GUI

December 1st, 2008

An article on SlashDot points to this article: “Special GUI for your eyes only” which discusses University of Washington research on adapting GUI’s to the abilities of the user instead of the user adapting to the GUI which is commonplace today. The program, named Supple, has the user do various tests testing to find the best way for the user to control the system. The technology can be used for example to determine that a user would benefit from larger than “normal” buttons to provide a larger clicking interface.

It appears that currently the focus is on improving a point and click interface – read mouse. I hope that this concept is furthered and taken to keyboards as well. For example, some users may have no difficulty with a three keystroke shortcut, while others may have the use of one hand and two keystroke combinations on the same side of the keyboard would be easier and faster. Some programs, including Microsoft Word, do allow the user to customize keyboard shortcuts now, but I find the process to often be tedious, time consuming and less than intuitive. Also if the system could help figure out what the best shortcut would be for the long-term that could be help. Is CTRL+H really the best for Find and Replace? Or would I find that I can type that keystroke very quickly and easily and that a far more common task that I complete is creating a hyperlink?

 

Interesting research and interesting ideas… Keep on inventing and sharing.

 

Using ARIA and jQuery to build an accessible tree – part 1

October 28th, 2008

On jQuery.com’s tutorial page there is an article that outlines how to use jQuery to build a tree from unordered lists called “Turn Nested Lists Into a Collapsible Tree With jQuery.” This seems like a nice trick to have in the toolkit however the article did not take accessibility into account. Thus the tree does not work well for screen reader assistive technology. Using WAI-ARIA it is possible to improve the tree and make a more usable experience for users who are using an ARIA aware browser and assistive technology. This series seeks to demonstrate how to make an ARIA-enabled, interactive tree using the “Turn Nested Lists Into a Collapsible Tree With jQuery” article as a jumping off point.

 

As a reminder we will be marking up the unordered nested lists that follow this layout:

<ul> 

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

 

We need to add the ARIA markup that describes a tree and its states to assistive technology. For a description of how this markup works see my posting “ARIA Tree Markup.”

In addition, keyboard event handling is needed for screen reader and keyboard users.

 

Once again, from the “Turn Nested Lists Into a Collapsible Tree With jQuery” article we will start with the following code in the $(document).ready() function:

$(document).ready(function() { 

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

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

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.

// define treeitems

$(’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:

parent_li.attr(”aria-expanded”, “false”);

 

Naming the branches

Next a name for each branch should be defined to keep the browser from returning too long of a name to assistive technology. For discussion on why a branch with children needs to be specifically given a label, see the discussion on “aria-labelledby” in “ARIA Tree Markup.”

We will use the same technique of wrapping the text that should be used to label the branch in a span element. Currently the code is already determining the item’s text and wrapping it in an anchor tag so we can borrow on this work and wrap the text in a span before it gets wrapped with the anchor tag.

parent_li.wrapInner(”<span id=’a11yLabel”+treeitem_label_i + “‘/>”);

 

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:

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

 

The tree itself should also be given a label so that it accurately conveys itself when the user tabs to it. If an element elsewhere on the page is the best label then use that. Otherwise we can use the first item in the tree. This will ensure that screen readers will have something to say when focus lands on the tree.

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:

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

 

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

$(’ul li’).attr(”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

 

ARIA Tree Markup

October 28th, 2008

A tree is a useful tool for displaying hierarchy relationships. For example, in Windows Explorer a tree is used to show the hierarchy of folders. Trees have been used in web applications for some time, but until recently there was not a good way to convey these to assistive technology such as a screen reader. The most common approach was to use unordered nested lists and the user would have to figure out relationships by keeping track of the nesting to get an understanding of the hierarchy. Which could become tedious and confusing quickly. In addition, if each item was activatable, e.g., was a link, the user would have to do a lot of tabbing to get to an item that was of interest, negating the convenience of expanding and collapsing branches to skip past groups of items that were not what was desired at the moment.

While keyboard handling could be implemented for expanding and collapsing tree items, assistive technology still could not track the items or convey the state of expansion because the user agent (browser) was not providing the information.

WAI-ARIA has an answer to these problems. By using it the role and state information that is needed by assistive technology can now be provided. Namely, the roles of tree for the container object; tree item for each branch or leaf of the tree; and group for groups of tree items that are contained at a level. For some additional discussion of ARIA see an earlier post “ARIA resources.”

 

To illustrate how ARIA markup for a tree is employed let’s walk through an example. In order to focus on the ARIA markup we will leave out details of implementing event handlers that would make the tree respond to user events. A browser that supports ARIA such as Firefox 3 will provide the accessibility information through MSAA though so you can check the results with a screen reader that support ARIA or with Microsoft’s MSAA Inspector tool.

 

The tree

Let’s consider the following tree represented by nested lists:

 

  • Item 1
    • Item 1.1
    • Item 1.2
    • Item 1.3
  • Item 2

     

The HTML would be structured like this:

 

<ul>

    <li>Item 1

        <ul>

            <li>Item 1.1></li>

            <li>Item 2</li>

            <li>Item 3</li>

        </ul>

    </li>

    <li>Item 2</li>

</ul>

 

To turn this into a functioning tree, links can be added to each item that call JavaScript functions to control the presentation of the tree such as hiding and showing the sub-lists.

 

Tell AT that this is a tree

Roles

In order to tell the browser and the assistive technology that this is a tree, ARIA markup needs to be added. Three roles are used in a tree:

 

  • Tree
  • Group
  • Treeitem

     

    The tree role pertains to the container object, in other words the entire tree from the first item through the last item. Assigning the tree role to the unordered list that holds all of the stuff will do the trick for us:

    <ul role=”tree”>

     

    Each item in the tree, whether it is a root node, branch or leaf, is a treeitem. In our example each list item is defined as a treeitem, for example:

    <li role=”treeitem”>Item 1.1</li>

     

    Groups are used to define blocks of related items at the same level. For example, items 1.1 through 1.3 are in a group that expands from “Item 1″ in our example. This is defined using a role of group on the container for the group of items. In this example the nested unordered list is the container. The HTML looks like:

    <ul role=”group”>

     

State

A treeitem is either expanded or collapsed. In a collapsed state the items that are children of the treeitem are not displayed. The state of an item is defined by using the aria-expanded attribute. It has two values: true, false.

TO convey that the “Item 1″ group in our example is expanded we add aria-expanded = “true” to the list item:

<li role=”treeitem” aria-expanded=”true”>Item 1

 

Focus

By default lists do not receive keyboard focus in HTML. However, since this is to be an interactive tree we need to define tabindex for the items in the tree. It is important to define a tabindex for each element in the tree that is wanted to gain keyboard focus, or is not wanted to in cases where it would by default, e.g., a link. (We do not want links that are used in the tree for actions to each individually appear in the tab order. Instead we want the tree to be navigatable with arrow keys after receiving keyboard focus via the tab key, and the next press of the tab key should move past the tree.)

In order to do this we need to use two values of tabindex: 0 and -1. A tabindex of 0 places the element into the tab order, allowing the browser to determine the tab order. A tabindex of -1 keeps an element out of the tab order, but allows it to receive focus programmatically.

In this example, the container list element that is now defined as a tree needs to be placed into the tab order. Thus add a tabindex of 0:

<ul role=”tree” tabindex=”0″>

 

Providing a name when focused upon

The tree itself should also be given a label so that it accurately conveys itself when the user tabs to it. If an element elsewhere on the page is the best label then use that. Otherwise we can use the first item in the tree as long as the item is sufficient enough to name the tree. This will ensure that screen readers will have something to say when focus lands on the tree.

To label the tree we use the “aria-labelledby” attribute to point to a HTML element that has the text for the name that we need. The “aria-labelledby” attribute is placed in the container element—the list element in this example. For example if we have a DIV of:

<div ID=”treename”>Table of contents</div>

We can point to this using

<ul role=”tree” tabindex=”0″ aria-labelledby=”treename”>

 

Putting it together - almost

Combining what we have discussed to this point we get the following HTML with ARIA markup defining the tree.

 

<div ID=”treename”>Table of contents</div>

<ul role=”tree” tabindex=”0″ aria-labelledby=”treename”>

    <li role=”treeitem” aria-expanded=”true” tabindex=-1>Item 1

        <ul role=”group”>

            <li role=”treeitem” tabindex=”-1″>Item 1.1></li>

            <li role=”treeitem” tabindex=”-1″>Item 2</li>

            <li role=”treeitem” tabindex=”-1″>Item 3</li>

        </ul>

    </li>

    <li role=”treeitem” tabindex=”-1″>Item 2</li>

</ul>

 

When this is presented in an ARIA aware browser such as Firefox 3, the tree is presented through the accessibility API to assistive technology such as Microsoft Active Accessibility (MSAA) on Windows. Tree items are conveyed with their names and there state information such as “expanded” for the “Item 1.”

However, at the moment there is a problem. Instead of showing that the name of the first item is “Item 1″ the entire contents of the nested items are also be returned as in “Item 1 Item 1.1 Item 1.2 Item 1.3″. At first this is a puzzling situation as it appears that the name of the first item in our tree is “Item 1″ and it is defined that way in the list item. On closer inspection we discover that the first list item actually encapsulates the group of sub items. Hence the entire contents between the <li>…</li> tags is being set as the name of the first treeitem. This is not what we want!

ARIA has a solution! It is possible to define the label for an element by using the aria-labelledby attribute in ARIA. For those familiar with explicit labeling used in HTML forms, this is a similar idea. It is more flexible in that any element containing text can be assigned, instead of just a Label element. To fix the problem we just need to explain to the browser and assistive technology that we only want “Item 1″ to be used as the name of the first node in the tree.

We can do this by using a Span element and setting it as the label for the treeitem:

<li role=”treeitem” aria-expanded=”true” aria-labelledby=”i1″ tabindex=-1><span id=”i1″>Item 1</span>

 

Final tree markup

The final markup for this tree using ARIA is now:

<div ID=”treename”>Table of contents</div>

<ul role=”tree” tabindex=”0″ aria-labelledby=”treename”>

    <li role=”treeitem” aria-expanded=”true” aria-labelledby=”i1″ tabindex=-1><span id=”i1″>Item 1</span>

        <ul role=”group”>

            <li role=”treeitem” tabindex=”-1″>Item 1.1></li>

            <li role=”treeitem” tabindex=”-1″>Item 2</li>

            <li role=”treeitem” tabindex=”-1″>Item 3</li>

        </ul>

    </li>

    <li role=”treeitem” aria-labelledby=”i2″ tabindex=”-1″><span id=”i2″>Item 2</span></li>

</ul>

 

Remember that when the tree is live and responding to user events that change the state of items such as expanding and collapsing branches, the ARIA information needs to be updated. For example, if “Item 1″ is collapsed the aria-expanded attribute needs to be set to “false”. Finally if the tree is very large and not all of it is loaded into the DOM at once additional management needs to be done such as using “aria-posinset.”

 

References

Xobni and JAWS

October 13th, 2008

Recently I had read about Xobni in the news. It is a new add-in for Microsoft Outlook that promises to provide a new way to view and organize your mail. I was specifically interested in its search capabilities and the ability to locate conversations with a specific person. So today I installed Xobni for a test drive.

The first thing I noticed is that Xobni.com is very bare-bones by today’s website standards. This is fine with me – perhaps they’re dedicating most of their resources to their product. Being quite basic, the site was quick to navigate and find the download I was looking for.

After downloading the installer I installed the product. The installation program is standard and accessible enough, working fine with the JAWS screen reader. I realize this is not a comprehensive accessibility testing technique and I will point out here this exercise was not meant to be such. I just wanted to see if I could use the tool and if it would do as advertised.

Next up was actually trying to use the functions of the tool. Xobni put a menu item on Outlook 2007’s menu bar, and that is accessible enough. The options included showing and hiding the sidebar, which can be checked and unchecked. I opened the Analytics tool from this menu and it opened a new window that displays a graph of email usage. There was some text in this window that can be read with the JAWS cursor; however it takes careful reading to work out the context. It appears most information is presented in a graphical chart form in this window.

Next up I set out to try what I really wanted to use: the search and conversations features. I ran into an immediate problem: I could not find these features added anywhere in Outlook’s interface. Tabbing the main window didn’t help, and there was no new menu items for searching or displaying conversations. Opening the Help PDF file I learned that there are a couple of keyboard shortcuts built into the tool. Ctrl+~ moves focus to the search bar, and ctrl+shift+` moves focus to the sidebar. (There are a couple of others.

I pressed the key combination to move focus to the search box, and this did work. JAWS reported that I was on an unnamed edit field. (There is no MSAA information available to identify this edit field either.) According to the manual, as soon as you start typing in this field, a window slides over to show results. I am not sure if such a window appeared, however, JAWS was unable to find one, even when reviewing the Outlook window with the JAWS cursor. So this was a dead-end.

I then tried the Ctrl+Shift+~ keystroke to move focus to the sidebar. This also seemed to work, at least focus went to a panel with a button. The button was unnamed and pressing focus movement keys such as Tab and arrows did not do anything. Attempting to activate the unnamed button via keyboard also didn’t do anything that JAWS could detect.

Lastly, it is worth noting that when focus is moved via the aforementioned keystrokes to the Xobni panels, focus cannot be moved back to the rest of Outlook such as the list of email messages via the keyboard. It is necessary to click the mouse in the main interface of Outlook to restore normal keyboard focus and functionality.

Xobni still sounds like a promising tool and I hope that it can include some accessibility support in future releases. Since it is a new tool in its infancy, today’s experience is not surprising although still a bit disappointing.

 

Increasing Accessibility

October 5th, 2008

Chris Hoffstader wrote a piece “Eating an Elephant - Part I” that touches on the sometimes overwhelming task of making things from technology to everyday low-tech things accessible. He covers several points from the leaps forward we have experienced with technology today especially when it comes to accessing information, to the struggles there still are both with technology to low-tech things such as how to shop at a brick and mortar store effectively.

 

I particularly enjoyed the parts about the lower tech problems such as traveling and shopping. We often get caught up in thinking about technology and technology solutions but in effect actually get stuck in the information technology (IT) arena for both looking at the issues and bringing greater accessibility to them. Information and information technology is huge, and is getting bigger, and I for one love to have information accessible and available to me whenever and wherever I want it. However, there is more than just reading and writing that needs to be accounted for. No matter how hard one might try, reading is not going to fill your physical stomach or find the shampoo bottle (missing because someone moved it to an unexpected location).

This serves as an interesting barometer of where we are currently and yet how far we need to go. Have we focused the right amount of attention in all of the right areas? Are there some that get more attention, or less attention, than they warrant? How do we decide what should be next on the list of things to solve?

 

We need to find the opportunities and then take advantage of them to improve the world. Philanthropy has seemingly been gaining a foothold as a popular thing to do both as a way to give back and as a way to benefit in maybe yet unseen ways for the giver. For example, Google recently announced Project 10 to the 100 which has the goal to take five great ideas and develop them to help the world in the greatest way possible. This seems like a brilliant concept both because it is a venue and opportunity to explore ideas, and to move forward with a few. What it takes is a vision and a plan. So what are your ideas that’d better the world for everyone? What can you do to make them happen? Even just getting the idea out there for others is a start. Remember there are many types, some that are good brainstormers, while others of us are not so good at that but if we see the idea we are good at making an action plan.

Find UISpy

September 12th, 2008

UISpy has been a difficult tool to find. UISpy is the testing tool for UIAutomation to allow you to see what is being presented to assistive technology. [For the uninitiated, UIAutomation is Microsoft's replacement for Microsoft Active Accessibility (MSAA). In addition its intended to allow the automation of the user interface for automated testing purposes.]

The MSDN blog post “Where is UISpy.exe” is the latest word I have found on how to locate UISpy.exe.

Good luck.