WebAIM - Web Accessibility In Mind

E-mail List Archives

How to make any web chat application accessible using AccDC

for

From: Bryan Garaventa
Date: Oct 7, 2012 4:03PM

In case it's of interest, this is in rgard to the LinkedIn article at
http://lnkd.in/X93xAQ

This sounds complicated, but making web chat accessible is one of the easiest things to do.

For example, the demo at
http://whatsock.com/modules/accessible_chat_dialog_module/demo.htm
Is a copy of the old Facebook chat dialog. I simply applied the steps below to make it accessible.

This is actually much easier than it appears. All you need is to do the following:

1) Keyboard Focus : Make sure that you can Tab or Shift+Tab to all active elements in the chat dialog, especially the Message field and Close button.

If applicable, the article at
http://lnkd.in/jYnkZq
discusses making non-standard elements into accessible active elements.

2) Shortcuts : It's helpful to add accesskey attributes to the Message and Close elements, so that either can be activated from any location on the page.
E.G accesskey="m" and accesskey="c"
(Just don't assign the same shortcut to more than one element on the same page)

If you want to indicate the shortcuts visually for keyboard users, you can use CSS to do so.

E.G

.closeIcon:focus:after {
content: 'Press Alt+C or Shift+Alt+C to activate';
}

3) Automatic Message Announcement : All incoming messages need to be announced for screen reader users.

Now this is the cool part. All you need is to specify the DOM node where incoming messages are displayed, and send this content to the AccDC $A.announce method.

The value of this, is that all incoming messages are programmatically stacked, so that speech interruption will not occur when multiple messages are submitted in rapid succession.

The announce method will simply track each new message and queue it up for announcement.

Also, if the dialog is closed, the announce stack can be cleared using the statement:
String.announce.clear();
So that queued up messages won't keep on being announced after the dialog is closed.

So here is how to make this work.

In the case of Facebook, there is an image link that includes an Alt attribute in the IMG tag, that specifies the name of the person posting the message, then the text of the message appears after that.

So the important thing is to send the parentNode that contains all of this data to the following announceMsg function:

var announceMsg = function(o){
return $A.announce((function(){
var s = '';
$A.query('img', o, function(j, p){
if (p.alt)
s += p.alt + ' ';
});
return s;
})() + $A.getText(o));
};

The function also returns the string that is announced, so that if you wish, you can track prior messages in a separate array that can be announced manually using different shortcuts, so that it's possible for screen reader users to listen to previously displayed messages without moving focus away from the Message Field.

E.G

var track = [];
// Every time a new message is announced:
track.push( announceMsg(MsgDOMNode) );
// Then, pressing Alt+1 for instance can be set to invoke:
if (track.length) $A.announce( track[track.length-1] ); // Announces the last message

And that's it!

Tips:

I recommend using a Textarea field as the Message Field, then set a keypress handler to capture the Enter key and submit the newly written text.

This way, JAWS won't exit Forms Mode every time you press Enter, which will occur if you use an Input field instead.

AccDC Announce was tested successfully using:
* JAWS 11, 12, and 13 using IE 8 and 9, and using Firefox.
* JAWS 12 and 13 using Chrome.
* NVDA using Firefox.
* Voiceover using Safari on the iPhone/iPad.