ARIA in Gmail #2: Enhancing the Chat experience

This post continues a series on the implementation of ARIA (Accessible Rich Internet Applications) in Gmail.

On July 30, Orca team lead Willie Walker forwarded a message to the Orca mailing list titled Orca & gmail. The message is originally by Srinivas Annam, an accessibility web developer at Google. He describes a couple of enhancements that had been made to the Gmail user interface and were pushed live recently. I’m going to review each feature in turn so you get an impression of what accessibility improvements these changes actually brought about.

I tested with JAWS 9.0, Window-Eyes 7.0 Beta 1, NVDA snapshot as of Wednesday August 6, and Orca snapshot as of Wednesday August 6. Unless noted otherwise, all features are fully useable using Firefox 3.0.1 and these versions of the screen readers.

All of the below are in the Chat area of the Gmail interface. So after you’ve logged into Gmail, make sure to activate the “Chat” link to be able to follow the descriptions.

The “Set Status Here” label

This is the label right below the “Search, Add or Invite” textbox. Pressing Tab from that textbox focuses the label. You can press Enter to get another textbox where you can put in a personal status message that others will see when they have you in their chat lists. Note if you’re using JAWS, press JawsKey+3 (3 on the number row) to pass the key through to Firefox directly. Otherwise, JAWS will capture the Enter key and turn off Forms Mode when you don’t want it to.

The “Status” menu button

This follows directly in the tab order after the “Set status here” label. You can press Enter on it to bring up a context menu to navigate and set a predefined status. This button is also discoverable with the virtual cursor in all three Windows-based screen readers, and Enter works on all of them to open the context menu.

Inside the context menu, navigating the items with Up and Down arrow keys properly issues the focus events, making use of the aria-activedescendant attribute to indicate which of the menu items is active.

A known problem is that, when pressing Escape to close the menu, focus does not yet return to the menu button. Use screen reader navigational commands to return to where you left off.

The chat contact list

This is an ARIA listbox with list items. It follows the “Status” menu button in the tab order. The Windows-based screen readers allow navigating to it using their virtual cursors, and pressing Enter for Forms Mode/Virtual off/PassKey mode. With Orca, you can simply navigate or tab to the list. The list uses aria-activedescendant to indicate which item has focus.

Navigating inside the list is done using Up and Down arrow keys. Besides the contact’s name, the status is given “chatting”, “available”, “idle”, “offline”.

Pressing Enter will do one of two things. Note that if you’re using JAWS, again use the JawsKey+3 keystroke to pass the key through, or it will turn off Forms Mode.

  • If the contact is available or idle, a chat window will open. See the next section for features within this window.
  • If the contact is offline, a new mail message to it will be started, and the focus will be placed in the “Subject:” textbox.

Below the list is another menu button labelled “Options”. However, the menu that opens does not yet use the aria-activedescendant attribute. The result is that no screen reader follows the focused item within this menu yet. It is hoped that this menu be accessible soon since it contains a number of useful functions.

The chat window

If you’ve opened a chat window to one of your contacts, the focus is placed inside a textbox where you can type your message. Press Enter when done to send your message.

The chat output pane uses ARIA live regions to enable screen readers to speak incoming messages automatically. These can either be your own, or the ones your chat buddy types. A suggestion: The message output uses aria-live=”assertive”. The other portion that gives messages such as “xxx is typing” does not use live region markup at all yet. It would be good if this used aria-live=”polite” to allow screen readers to also speak this information. Since this message is not as important as the actual output, using “polite” here can help screen readers prioritize the speaking of these updates.

Currently, both Orca and NVDA support speaking of live region updates. This means that, when inside the chat area and a message comes in, both screen readers will automatically speak them. Additionally, you can turn off PassKey through mode in NVDA and navigate upwards to review the last messages. With Orca, simply navigate upwards to review the last messages.

Note: If you’re using JAWS, you should pop out the chat into a separate window. For some unknown reason, JAWS will not pick up the contents of the output window unless the chat is inside its own window. To do this:

  1. Press JawsKey+3, followed by Ctrl+DownArrow to focus the Chat window toolbar.
  2. Press Tab to move to the “Pop out” button.
  3. Press Enter to activate it. Note you might get a warning from your popup blocker that it prevented Gmail from opening a pop up, and an error dialog by Gmail itself that tells you how to disable popup blocking for Gmail. I suggest you do this to more easily open those pop outs.

The Chat window toolbar

You can reach this by pressing Control+DownArrow while focused inside the chat entry textbox. It places focus on an “Options” menu button. Press Enter to open it. Navigation inside it is just like in the “Status” menu, also works using aria-activedescendant.

Alternatively, you can press Tab to reach the “Pop out” button, allowing you to put the chat into its own window.

Finally, Ctrl+UpArrow will put focus back into the chat entry textbox.

In summary

With these enhancements in both keyboard navigation and ARIA semantics, Google have turned this portion of Gmail into a really useful tool also for blind and visually impaired users. With Firefox or another ARIA-capable browser and a compatible screen reader, you can now use this part just like your sighted buddies do.

With this, Gmail is not just web mail, it becomes a communication center as it already is for the sighted users.

I’d like to thank Google again for putting ARIA into Gmail in this fashion. It shows that the work Mozilla, IBM and the W3C, under the leadership of Aaron Leventhal, put into this spec is indeed usable in real-life scenarios and not just, as suspected by some, a nice geeky thing on the drawing board.

Previous ARIA in Gmail posts

15 comments:

  1. Gry, thanks for your comment! But would you mind reposting it in English. I doubt a lot of my readers, including also the author, understand Polish.

  2. This is great news. I have everything working as described in the article except of ability to reread what has been posted when the chat window is shown in the sidebar. I am using NVDA. Once the input area in a chat window has focus and I disable virtual buffer pass through focus shifts back to the main site when pressing up arrow. if chat is displayed in a new window then it’s all working great. Do you think NVDA needs improvements in this area or might this be a gmail issue?
    A thing worth noting might be that I am using gmail set to display its interface in slovak. I have seen rumours that english version is the only most up to date and other localized versions are following shortly.
    Anyway I am amazed. thanks for all these postings.

  3. Hi Peter,

    yes I’ve noticed that there are problems with displaying chat content with JAWS when processed inline. The content is there, at least JAWS however doesn’t pick up on it. I tested this with NVDA, too, and thought I had it working, but now I see inconsistent results, too.

    And yes, I tested with the English Gmail interface, since the German interface that I normally would use didn’t provide all the markup enhancements yet. While it also gave the contact list a role of list, and the items a role of option, it did not yet implement the aria-activedescendant attribute to track the focus. So I decided to do my testing with the English interface.

  4. OK, I think I have understoot it better after a bit of chatting with Jamie. Gmail is very complex application so my assumptions may not be correct. But anyway I am going to post what I have found out so others might correct me and possibly help to find where is the problem.
    When a gmail is loaded and a conversation is open inline, the document loaded into firefox contains a paragraph. Inside this paragraph the conversation is taking place. The document loaded into firefox has some iframes at the same level like this paragraph. These iframes might contain other documents and other elements inside. This is all found out using NVDA’s object navigation so it’s IA2 objects hierarchy. Now the problematic part. While focus is in the multiline edit field (an input area of a conversation window) I can perfectly move upwards in the IA2 objects hierarchy. Once I stop at the paragraph I started my explanation with it automagically turns out to be reported as invisible and it is also reported to have no children. So this is why NVDA can’t render it into the buffer I guess. Gmail can focus an object inside it because it has stored ids id or something.
    This is with latest stable version of firefox 3.0.1. I will perhaps test with more recent build of firefox just to see if it might make a difference.

  5. @Ronnie No, full ARIA support as is also now in the WCAG 2.0 is only supported in Firefox 3.0 and above. However, since Firefox 2.0 has reached its end of life, I do not see this as a problem at all.

  6. My company uses GTAlk for communication, and I have gratefully followed your instructions on how to use it with JAWS until now. The last few days it won’t work. What should I do? Have the changed it? Also having trouble reading my mail, which is actually GMail witha different domain.

  7. Okay, I am sorry. My comment last night was stupid and based on the panic of the barely technical literate. What is actually happening is that the chat window does not seem to be opening. I have been using the pass through key command (I have JAWS 8.0) and I can get to the contacts, but the chat window wil not appear, and it will not say that we are chatting, which it did before. Would a JAWS upgrade help, or is ther something a little less expensive I could try?

What are your thoughts?