WebAIM - Web Accessibility In Mind

E-mail List Archives

How to Make a Facebook Chat Widget Automatically Accessible

for

From: Bryan Garaventa
Date: Nov 15, 2011 12:39AM

This is something I've been thinking about off and on over the last couple years. My family uses Facebook chat, so I figured it would be pretty cool to be able to do the same using the website. Not really as it turned out. Conceptually it wouldn't take too much to make it work though, so about six months ago, I wrote detailed instructions, lovingly crafted with fabulous pros, showing the Facebook folks how this could be accomplished with minimal effort and maximum impact for everyone.

I thought it was brilliant; a true masterpiece;
they ignored me of course...

So, I decided to do it myself anyway, and here it is! Just as described...

The Accessible Chat Dialog Module is a Facebook-style UI component that renders an automatically accessible chat dialog for screen reader and keyboard only users.
Instructions:
1) Type your name and activate the Start Chat button to open the chat dialog,
then type into the Message field and press Enter to submit a chat message.
2) Mouse users can drag the chat window to a new fixed location by holding down the left-mouse button on any textual area of the chat dialog.
3) New messages will automatically be announced to screen reader users when they arrive.
4) Screen reader users can press Ctrl+` to hear the last 5 messages announced when the Message text field has focus.

The ability to drag the chat dialog to a new location on the viewport isn't something Facebook provides, but I thought it would be a nice touch anyway... :)

Now, this is important, the chat dialog is a live server application, so anything you type will be seen by every person around the world who happens to have the dialog open at the same time, regardless whether it is running from the website or locally using the download, so please play nicely...

Demo: http://whatsock.com/modules/accessible_chat_dialog_module/demo.htm

All the best,
Bryan