Making Twitter Tweet – Using the TPG 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
The TPG 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:
- Flash aural cues
- WAI-ARIA Live regions
Each method has its pros and cons:
- 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.
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.
Hans Hillen took on the task of developing the concept (thanks Hans!) and provides information on the technical details:
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
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.
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 TPG 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).
- 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 TPG notifier in your page:
- 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).
- 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.
- 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.
- 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");
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.