Making Twitter Tweet – Using the TPGi Notifier

As part of my presentation at the Accessibility 2.0 Conference I demonstrated a preferences module conceived by Hans Hillen, Gez Lemon and I, as a proof of concept(s) for ways to provide cues to users allowing them to benefit from and/or have access to content that changes dynamically without a page refresh. This was presented using the Twitter character countdown feature, which indicates to users the number of characters (140 character limit) they have left to type into a textarea.

The TPGi notifier includes 3 methods to inform a user of how many letters they have left to type in a text area, before the limit is reached. The 3 methods:

1. JavaScript alert
2. Flash aural cues
3. WAI-ARIA Live regions

Each method has its pros and cons:

1. The JavaScript alert requires that focus be moved away from the text area to the alert box and the user to press the ‘OK’ button for the focus to be moved back to its previous position in the text area. But this method is probably the most widely supported across browsers and Assistive Technology.
2. The Flash method involves the use of reasonably complex JavaScript and the production of the aural cue files. But is well supported and does not require the AT to support Flash, only that the Browser has the Flash plugin installed.
3. The WAI-ARIA live region method is easily implemented, but currently has limited support.

As previously stated this is a ‘proof of concept’ and has not been tested with assistive technology users. The most important aspect is that it provides Preferences, which a user can enable if they choose to. So users are not forced to use any method if they don’t find them useful.

Demonstration

Have a look at the working example or download the example sourcecode (zip file). The example has WAI-ARIA live regions, with a visual fade indicator, set as default. If live regions are unsupported by a user’s browser or Assistive Technology, they can choose from the other methods available.

Technical Details

Hans Hillen took on the task of developing the concept (thanks Hans!) and provides information on the technical details:

The TPGi notifier can be created as a javascript object by a developer for any specific page. It uses unobtrusive scripting, but does not fall back on a non scripted alternative. User agents that do not support javascript simply will not receive the updates.

The notifier object allows developers to create different notifications, which can then be sent to the user at any suitable event. Currently there are three different notification types: Auditory Icons (using Adobe Flash), browser alerts, and live regions. The key factor is that the end user can decide which method to use, based on his or her preference and level of support. The Notifier class is easy to extend, allowing additional notification alternatives to be added in the future. For now, let’s have a closer look at the available methods:

Audio Updates Using Adobe Flash

With this approach, we use Flash to play back sound as a result of a particular event. The Flash movie is a 5kb file that does not contain any actual visual content, only scripted behaviour that handles the loading and playback of sound files. This approach does not require the user to interact with the flash movie at all, as this is all handled by JavaScript. To prevent users from being hassled with messages about missing plugins or plugin versions, we have used the swfobject 2.0 method (developed by Bobby van der Sluis). Swfobject makes it easy to inject Flash content to a document in an unobtrusive, cross browser friendly way. This approach also makes use of the TPGi notifier a lot easier, as the developer does not have to worry about manually implementing flash objects on every page, the TPGi notifier takes care of this. Also, when a user agent is not capable of playing Flash content, this method will degrade gracefully without bothering the end users about missing plugins. Since the notifier has different notification methods next to Flash, supporting Flash is not crucial. The Notifier object will switch the notification method to something that does not require a plugin (currently it will switch to the ‘live region’ method).

The sound files have be in mp3 format. These can be simple and short sound files (such as a beep) , speech recordings, or anything that’s appropriate. Also, different types of alerts can be created using the same sound file, by manipulating volume, spacial position and repetition. For example, the demo provided with this article generates three alerts, based on the remaining number of characters left in a text area. Using the preferences section you can choose to either use a different sound for each event, or to use the same sound but louder for each event. Have a look at the preferences section of the demo to get an idea of the possibilities.

Using JavaScript alerts

A method that is more natively supported by most browsers is the use of browser alerts (e.g. window.alert() calls). The main disadvantage of this approach is that it is disruptive to the user’s browsing experience. For this reason, this method should never be a default setting when using the notifier. It should only be used when chosen by the user. Next to the wide level of support, there is another advantage for this approach: the fact that the alert box is modal and always draws focus to itself provides a guarantee that the user will perceive the notification. Also, even though it steals focus, it always places it back to where it was.

Using ARIA Live Regions

ARIA Live regions are ideal for notifying users of changed content. The TPGi notifier can be used to either create a new live region from scratch to place the notification text in, or an existing element can be targeted to function as a live region. The notifier also takes a set of parameters that determine how the live region will be created. For your visitors to try this method out, they will need a browser that supports live regions (such as Mozilla Firefox ), as well as compatible assistive technology (such as Firevox, NVDA or ORCA).

To Implement

The Notifier requires a few files to be present in your site structure (and the javascript files will have to be loaded in this order:

• swfobject.js, which contains the swfobject code responsible for injecting flash into the page.
• TPG/Utilities.js, which contains core functions used by the notifier.
• TPG/Notifier.js, which contains the actual notifier related classes.
• TPG/tpgnotifier.swf, which is the actual flash file responsible for loading and playing the sounds. The functionality is is located in the SoundHander.as file.
• Additionally MP3 files will have to be provided by the developer.

In short, these are the steps that have to be undertaken to implement the TPGi notifier in your page:

1. Create a new instance of the TPG.Notifier class. The constructor takes two parameters: the method to use, and an optional object that can be used to pass configuration parameters to the notifier. Since the user has to be able to choose the preferred method, this variable should be provided through a persistent preference (such as a cookie).
2. Load the actual notifications. Regardless of the method, a notification always requires a text message to be specified. The reason is that a chosen non-text method (such as Flash) is not supported, it can fall back to a text based alternative.
3. For Flash Notifications, create a new sound object and add it to the notification created in the previous step. You don’t have to create a new sound object for every notification. You can also reuse the same sound in a unique way by changing its parameters.
4. Whenever an event occurs that should notify the user, fire the notification. The notifier will handle which method to use.:

The basic code sample below shows a basic version of the function calls required to set up a notification involving Flash sound:

//1. create notifier object. The 'method' parameter should be retrieved from a user preference
tpgNotifier = new TPG.Notifier(method, Params);
//2. Add a new notification, specifying its text message and ID which we will use for referencing
tpgNotifier.addNotification("30 characters left", "alert1");
//3. create a new sound object, and add the resulting ID to the notifier we created in step 2
tpgNotifier.setNotificationSound("alert1", tpgNotifier.createSound("myFile.mp3"));
//4. On appropriate event, fire the notification
tpgNotifier.notify("alert1");

Browser Support

This method has currently been tested on Internet Explorer 6 and up, Opera 9, Firefox 2 and Safari for Windows. Safari seems to have some issues when running the notifier from a local web page. As mentioned above this is still a work in progress.