WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: How to Make a Facebook Chat Widget Automatically Accessible

for

Number of posts in this thread: 5 (In chronological order)

From: Bryan Garaventa
Date: Tue, Nov 15 2011 12:39AM
Subject: How to Make a Facebook Chat Widget Automatically Accessible
No previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Tue, Nov 15 2011 7:06AM
Subject: Re: How to Make a Facebook Chat Widget Automatically Accessible
← Previous message | Next message →

Mr Bryan

Great idea as always. I would say great implementation as well,
however, there is a bit of a problem, I am knit picky I know.
I go to the demo page (with Jaws 13 and IE9) .. type in my name as
instructed and hit "start Chat".
I get the message "loading, please wait" .. and I wait .... and I wait
.... and I wait ..., and I am still waiting. ;)
Seems like this is not working at the moment, at least with this
software combination.
Cheers
-B

On 11/15/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
> 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
>

From: Bryan Garaventa
Date: Tue, Nov 15 2011 8:09AM
Subject: Re: How to Make a Facebook Chat Widget AutomaticallyAccessible
← Previous message | Next message →

Thanks, I just gave it a spin, and it's working for me, anyone else noticing
this? Granted I have IE8 with JAWS12/13 installed, so feedback would be
helpful.

----- Original Message -----
From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, November 15, 2011 6:06 AM
Subject: Re: [WebAIM] How to Make a Facebook Chat Widget
AutomaticallyAccessible


> Mr Bryan
>
> Great idea as always. I would say great implementation as well,
> however, there is a bit of a problem, I am knit picky I know.
> I go to the demo page (with Jaws 13 and IE9) .. type in my name as
> instructed and hit "start Chat".
> I get the message "loading, please wait" .. and I wait .... and I wait
> .... and I wait ..., and I am still waiting. ;)
> Seems like this is not working at the moment, at least with this
> software combination.
> Cheers
> -B
>
> On 11/15/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
>> 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
>>

From: Kevin Chao
Date: Tue, Nov 15 2011 1:36PM
Subject: Re: How to Make a Facebook Chat Widget AutomaticallyAccessible
← Previous message | Next message →

Hi Bryan,

As always, excellent job, and this is working great with Firefox 11
Nightly and NVDA 2011.3 RC1.

Kevin

On 11/15/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks, I just gave it a spin, and it's working for me, anyone else noticing
> this? Granted I have IE8 with JAWS12/13 installed, so feedback would be
> helpful.
>
> ----- Original Message -----
> From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> Sent: Tuesday, November 15, 2011 6:06 AM
> Subject: Re: [WebAIM] How to Make a Facebook Chat Widget
> AutomaticallyAccessible
>
>
>> Mr Bryan
>>
>> Great idea as always. I would say great implementation as well,
>> however, there is a bit of a problem, I am knit picky I know.
>> I go to the demo page (with Jaws 13 and IE9) .. type in my name as
>> instructed and hit "start Chat".
>> I get the message "loading, please wait" .. and I wait .... and I wait
>> .... and I wait ..., and I am still waiting. ;)
>> Seems like this is not working at the moment, at least with this
>> software combination.
>> Cheers
>> -B
>>
>> On 11/15/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
>>> 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
>>>

From: Patrick Burke
Date: Tue, Nov 15 2011 1:54PM
Subject: Re: How to Make a Facebook Chat Widget AutomaticallyAccessible
← Previous message | No next message

All working here with IE7 & Jaws 12. #kickinitoldskool!

Patrick

At 12:37 PM 11/15/2011, Kevin Chao wrote:
>Hi Bryan,
>
>As always, excellent job, and this is working great with Firefox 11
>Nightly and NVDA 2011.3 RC1.
>
>Kevin
>
>On 11/15/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
> > Thanks, I just gave it a spin, and it's working for me, anyone
> else noticing
> > this? Granted I have IE8 with JAWS12/13 installed, so feedback would be
> > helpful.
> >
> > ----- Original Message -----
> > From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
> > To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> > Sent: Tuesday, November 15, 2011 6:06 AM
> > Subject: Re: [WebAIM] How to Make a Facebook Chat Widget
> > AutomaticallyAccessible
> >
> >
> >> Mr Bryan
> >>
> >> Great idea as always. I would say great implementation as well,
> >> however, there is a bit of a problem, I am knit picky I know.
> >> I go to the demo page (with Jaws 13 and IE9) .. type in my name as
> >> instructed and hit "start Chat".
> >> I get the message "loading, please wait" .. and I wait .... and I wait
> >> .... and I wait ..., and I am still waiting. ;)
> >> Seems like this is not working at the moment, at least with this
> >> software combination.
> >> Cheers
> >> -B
> >>
> >> On 11/15/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
> >>> 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


--
Patrick J. Burke

Coordinator
UCLA Disabilities &
Computing Program

Phone: 310 206-6004
E-mail: burke <at> ucla. edu
Department Contact: = EMAIL ADDRESS REMOVED =