WebA11y

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?

Say you have a set of invitations to connect to colleagues in your favorite social networking software. These might be listed one after another with an accept and reject button associated with each request. But, if someone is using a screen reader to just tab through the buttons on the page, how would you know which button is associated with each invite? Certainly the designers are not likely to want to put the user name within the button text, so how can we make this easier for the person using a screen reader or screen magnifier to access the page?

There are several different ARIA properties you could use. I created a sample page using 4 different strategies aria-labelledby, aria-describedby, aria-label, and the title attribute. See Augmenting Button Text with ARIA. I’ve included code snippets so you can see exactly how the techniques were implemented.

The first approach was to use aria-labelledby to label the button using text containing the associated user name placed within a span that is placed offscreen using CSS. Since the text is positioned offscreen it will not be seen but will be spoken by the screen reader. This seems to work the best with the various screen readers and ARIA supported browsers. However, it does require additional text and the use of CSS to place it out of view.

The next approach uses aria-describedby on the button to point to a span containing the User name text . This would augment the Accept and Reject button with the user name. This requires no additional text, you just need to include an id on the span (or other element) containing the user name text. This was not consistently supported in the browsers and screen readers.

Adding an aria-label onto the button element with the label for the button is easy enough. It does require the extra text as the value of the aria-label attribute but is easy enough to implement. Unfortunately, there is no current browser support for aria-label but it is coming in the next release of Firefox.

And lastly, just adding a title attribute on the button with the additonal information about which invite user it is associated with. This has fairly good support but does depend upon the user screen reader settings.

I compiled the results of testing with Firefox 3.0.8, a daily Firefox/Minefield build, and IE8 with JAWS 10, Window-Eyes 6.1 and NVDA 0.6p32 so you can compare the results and draw your own conclusions.

Hopefully the ARIA examples are helpful as well - I’ll try to do more!