WebA11y

• Not much tweeting lately. Struggling through keyboard event hell for unified handler for click, enter and space keys for dojo widgets #dojo #
• how do I run safari 3 and safari 4 beta on same machine? I guess I could use web kit daily rather than safari 4 beta if I have to. #
• Right NOW Attending ARIA Webinar via EASI http://easi.cc/entrance.htm #

Powered by Twitter Tools.

• RT @iStelios : Importance of HTML Headings for Accessibility - Raymond Selda Blog | http://tinyurl.com/qoght8 #a11y #
• Speaker lineup for the Ajax Exp in Boston: 48 men 1 woman. Not enough women with important titles I guess - how sad. #
• they are coming by to empty the office trash - must be time to go home! #
• MacBook Pro screen went black, could see and move the mouse but typing any characters just beeped at me. Had to reboot! #
• RT @kliehm (edited) WTF IE8 supports #ARIA, but many features only on Windows Vista+ http://is.gd/AJ5u http://is.gd/AJ5J #a11y good 2 know #

Powered by Twitter Tools.

• Got some embarrassingly stupid bugs fixed today. Had to admit my stupidity and lack of thorough testing. That’ll learn me! #dojo #
• More info on IEEE Accessing the Future Conference July 20-21 in Boston http://tinyurl.com/qs3hnv Hoping I’ll be there #
• Heading home from AccessU AUS to BOS #
• embarrassed by bug in dojo changeset [17496] have fix but need to test more when back home before I commit Don’t want to break twice! #Dojo #
• Arrived in Austin, TX for AccessU! #

Powered by Twitter Tools.

• worn out after visiting elder parents for the day. It is so hard to become the parent of your parents! #
• Getting ready for AccessU in Austin, Tx next week. There is still time to register for GREAT a11y training - http://tinyurl.com/clha33 #
• strange - col-resize and row-resize cursors are not visible in high contrast mode in Firefox when running in Parallels/WinXP on Mac?? #
• Just found Mitch Kapor (mkapor) on twitter!As an old time Lotus employee (joined in January 1984) I had to follow! #
• looking for keyboard accessible flash player that works in Firefox - any recommendations? #

Powered by Twitter Tools.

I thought I would create and ARIA example of Popup Help - turns out that is easier said than done. By Popup Help I mean a link or trigger element that is activated to display a block of help text that “floats” above the rest of the page. It seemed easy enough to implement until I started thinking about the features it should have:

• Focus needs to go to the popup help so that it can be closed via the keyboard. Setting it to close after a certain amount of time is not sufficient since people will need differing amounts of time to read the text.
• The popup needs to disappear when it loses focus or when the user clicks outside of the popup block. This means we need some sort of handler on the document to detect the click and close the popup. We need a close button or need to catch a press of the escape key to close the popup.
• If the popup has focusable items, you may want to trap keyboard focus within the Popup until the user explicitly closes it. Or, at least close the popup when the user pressed tab with focus on the last focusable item in the Popup.
• When the popup is closed, focus should go back to the trigger element.
• The popup needs to placed appropriately relative to the trigger element. This means that if the trigger is close to an outer edge of the current window, it must be displayed towards the inside of window. In other words, to make sure the popup is placed appropriately, some calculations need to be done to make sure it is visible and not clipped.

At this point the Popup Help suddenly seem like alot of work. Then I thought, “Hey, Dojo has a widget that does all that! Why don’t I just use the TooltipDialog?”. It places the dialog appropriately, it traps focus within the dialog until the user closes it, and it can be closed via the escape key or by clicking outside of the dialog. And, it is already ARIA enabled.

However, the TooltipDialog is triggered via a Dojo DropDownButton and most people want Popup Help triggered via a link rather than a button. So, my first step was to restyle the trigger element to look like a link. Even though I’m no CSS whiz, I was able to accomplish that!

When a TooltipDialog becomes active, focus is set onto the first focusable item within the dialog. A screen reader will announce “dialog” and the dialog title and then the item with focus. Popup Help is often just text and may not have a focusable item. How am I going to get the screen reader to speak the Popup Help text when it is displayed? Well, ARIA has a role of alertdialog. If I set the role of the TooltipDialog to alertdialog, JAWS 10 will speak the text. Since the TooltipDialog is hard coded with a role of dialog, I had to catch the event when the dialog is shown and change the role. Not too hard with Dojo’s addOnLoad function and dojo.connect().

So, with a little modification I was able to use Dojo’s TooltipDialog to create accessible Popup Help. Here is the working Popup Help example with code snippets to demonstrate the changes I made. Why reinvent the wheel when the hard stuff has already been implemented?

• great read! RT @slger123 Just posted my love story about my “talking ATM” at asyourworldchanges.wordpress.com. Talks so nicely. #
• Saw interesting prz by Dan Ingalls from Sun today on lively kernel. No a11y, yet bit pretty cool what they are doing with JavaScript #

Powered by Twitter Tools.

I have to admit that working on creating videos and captioned videos has been a humbling experience. I really don’t understand video on the web, yet, and wonder how so many youTube videos actually get created! I can certainly see why they don’t get captions - the process is tedious and can be confusing!

I used Camtasia 6.0 to record a demonstration video using the Dojo Sample Mail application with the JAWS 10 screen reader. I then used the IBM DigiCape program to transcribe the audio for me. That is certainly a big help! It is much easier to edit the captions than to have to try to transcribe it all myself. And, the Freedom Scienfitic folks might get a chuckle that “screen reader” often got transcribed as “supreme leader”!

After editing the transcript from DigiCape I used that text file to add captions in Camtasia. In theory, I should be able to give the video to DigiCape and it would synchronize the captions into the video for me - I’m still working on that and learning the DigiCape tool. It was fairly easy to sync the captions in Camstudio, although if you look at the result, you’ll see that I have a bit more to learn about line lengths, sizing and such. But, I at least have a 10 minute, captioned demo of Dojo widgets being used with a screen reader. I also need to get a better microphone as the video quality is poor and the volume not very high - I hope it is still usable! And, since the player is not accessible, the video is set to play automatically. Next step - learning about accessible players NCAM/CC and JW Player!

More to come as I venture into the world of captioned video!