WebAIM - Web Accessibility In Mind

E-mail List Archives

Here is a bookmarklet that enables screen reader support for Facebook Online Chat using ARIA

for

From: Bryan Garaventa
Date: Nov 18, 2011 9:12PM


Hi,
I've been experimenting a bit with bookmarklets, and wrote this tonight, I thought others might find it useful as well.

This is a simple bookmarklet that, when run from the Facebook.com Chat Dialog, automatically enables screen reader support using ARIA.

For those not familiar with bookmarklets, a bookmarklet is simply a single line of JavaScript code within a Favorites or Bookmark link that performs an action. In this case, the script calls a remote script since the code is too long to fit in a standard href url.

So this is how it works.

1. Right-click the Facebook Chat Bookmarklet link, on the page at
http://whatsock.com/modules/accessible_chat_dialog_module/demo.htm
and add it to your Favorites or Bookmarks list.

The link contains the following script:

if (!window.enableWSFBChat){
(function(l){
var k = document.getElementsByTagName('head')[0] || document.documentElement,
j = document.createElement('script'),
i = false;
j.src = l;
j.onload = j.onreadystatechange = function(){
if (!i && (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete')){
i = true;
j.onload = j.onreadystatechange = null;
if (k && j.parentNode){
k.removeChild(j);
}
}
};
k.insertBefore(j, k.firstChild);
})('http://whatsock.com/modules/accessible_chat_dialog_module/js/fb_chat.js');
} else window.enableWSFBChat();

When the link is activated, the referenced script (fb_chat.js) will configure automatic accessibility for the currently open Facebook chat dialog.

2. Then, open
http://fb.com
login, activate the Chat link, then choose and activate a name from one of your contacts at the bottom of the page .

3. With the Facebook Chat dialog open, open your Bookmarks or Favorites menu, and activate the Facebook Chat Bookmarklet link.

a) Screen readers that support ARIA will then be able to announce incoming messages as they arrive.
b) The addition of ARIA role=dialog will ensure that Application Mode remains active when submitting new messages.
c) The addition of ARIA role=heading will allow screen reader users to jump to the beginning of the latest batch of messages using Shift+H.
d) The addition of the "m" accesskey will allow keyboard users to quickly jump to the message input field from any location on the page using Alt+M in IE or Alt+Shift+M in Firefox.

This is obviously a hack until the dialog includes similar features, but for now, it gets the job done.

Best wishes,
Bryan