Review: The all-new Yahoo! Mail web application

Yahoo! recently announced the availability of their all-new mail web application. They also made announcements on the Yahoo! Access channels about the much improved accessibility of this new mail interface. Well, it’s time to look at it! So shall we?

For my testing, I used the latest release of Firefox, version 6.0.2, and NVDA 2011.2 (the current release). I also found that it is a good idea to look in the Mail Accessibility help, and there especially the keyboard shortcuts.

First steps

Armed with this information, I logged into my Yahoo! mail account. First, I was prompted to switch to the new Yahoo! mail. Go ahead and do so if you haven’t done already.

I was then greeted with the What’s New tab of the new interface. This is a web document one can browse to find out the latest headlines, but at the top it also gives you the choice to switch to your inbox. It tells you how many unread messages you have, and how many in total.

The inbox

I went ahead and activated the link to go to the inbox. What followed was a switch to focus mode from the default browse mode. The reason became evident: i was no placed in the messages list, a rich widget that allows for navigation through the messages with the arrow keys up and down. Speech feedback is just marvelous, one gets all the relevant information one would expect to hear, just like one was in a desktop client like Thunderbird or Outlook.

Also, as can be seen in the above linked to shortcuts list, a lot of shortcuts that are familiar from desktop clients simply work in this e-mail client, too: delete deletes a message and provides great speech feedback, r initiates a reply, f forwards one. Yes, these are different from Thunderbird and Outlook, but hey, with each new program, you have to learn some new shortcuts, even when switching from Outlook to Thunderbird. 🙂

Reading a message

Pressing enter opens a message for reading. And here’s one of the beauties of this WAI-ARIA enabled e-mail client: The markup used is really being used in a sensible and intelligent way. While the messages list definitely needs to be treated in application mode, the message itself is a document and thus should make use of NVDA’s browse mode (virtual cursor). And this is exactly what happens. Without having to do anything, NVDA will switch to its browse mode and start reading the e-mail you just opened. If this is an ordinary e-mail message, there is a reply box right at the bottom, so one can answer the e-mail from here. There is no quote functionality, though, so if you want to do some fancy stuff, you’ll have to use the full e-mail dialog that you can reach by hitting r from the messages list.

Pressing escape brings one out of the message and back into the message list. It remembers the position, so one gets put right at the spot where one wants to continue browsing messages.

More to find

Tabbing around the main interface, one finds several tool bars. Again the keyboard navigation is very smart: Tab jumps from the higher-level items such tool bars to the next, while, when in a toolbar, one can inspect each available option within it using left and right arrow keys. So even if a tool bar contains 10 items, tabbing will only stop once on the tool bar. If you do not want to go through the 10 items, you don’t have to.

The Contacts tab works in a similar fashion as the mail tab, where you can manage your contact list, import from other accounts etc. The switch between application and browse modes is seamless as on the inbox tab, and information is presented in a very comprehensive manner.

Speaking of tabs: There are instructions given on navigation wherever something might work slightly differently from what one is used to from desktop applications. For example when focused on the tabs, one is instructed to navigate left and right, and that enter will actually make that tab active. In Windows applications, simply focusing different tabs already makes them active, so this is a slight difference between the interaction models which is clearly communicated. Very nice!

Social networks

The fourth of the default tabs is called “Updates”, and it allows you to connect your Yahoo! profile with those you have on Facebook, Twitter etc. While the tab itself is mainly for configuring those updates and for sending updates to the connected social networks, the reading updates app gets launched in a new browser tab. That one is a regular web site that gives you a good, and more importantly, fully accessible overview of your Facebook and Twitter timelines. While both social networks still have their accessibility issues to sort out, Yahoo!’s interface to these is fully accessible and hardly leaves anything to be desired.

Setting prefs

From the main navigation area, you can open the options/preferences for mail and other parts of the Yahoo! set of web applications. Especially in the mail preferences, you can set a few things to make your life a bit easier. One is to have messages displayed in paginated form, which gets rid of the preview pane and other stuff that might get in the way of accessibility. Also, you can set to have the inbox tab selected upon login automatically. This is something that I set since I want to do mail when I log into mail first.

You can also connect other mail accounts here. This is one of the few areas which irritated me: The link to add an account is at the very top of this virtual document, near the “Save changes” button, not down in the explanation of what adding accounts actually means, as I would have expected it to appear.

Third-party apps

One can include third-party apps in the Yahoo! mail interface. There is an app called “My social networks”, for example. These, as they are being developed and delivered by third-parties, are not guaranteed to have the same level of accessibility. Some may even be entirely inaccessible, because they use plugins such as Flash or Silverlight and may not adhere to accessibility standards within these platforms. But Yahoo! is not to blame for that. Instead, accessibility should be evangelized to those content providers that have the powers to make their apps accessible.

In summary

What Yahoo! are delivering here is a really outstanding example of putting the WAI-ARIA and other HTML accessibility techniques to very good use. WAI-ARIA has previously been deployed mainly in some enterprise/intranet or specialized public sections and gained limited exposure. Yahoo! mail is the first mainstream web application to put this technology to use and deploy it to a wide range of users worldwide.

Personally, I can even see myself switching to a web client away from a desktop client for the first time since this is the first instance of a web e-mail client that I found I can use as productively as my favorite desktop client. Other examples like the big G are far to inefficient, and for my work, the Zimbra web interface is totally inaccessible, so I have to use a desktop client for these.

Yahoo! Mail, along with the very accessible rich search interface, is a very good example of an all-inclusive, accessible, web application approach that puts others to shame that suggest to turn off their standard interface and use a basic one if one uses a screen reader. Needless to say, that basic interface is then severely limited in functionality. Or the same company that suggests to turn off their instant feature if one uses a screen reader, or search results might no longer be really accessible. Yahoo! are taking an inclusive design approach here that to my knowledge is unparalleled among big stock holder web app companies.

Of course, there are still some small kinks to work out here and there. if one uses the German version of Yahoo! Mail, for example, closing a tab requires a different keystroke than the English Ctrl+. Unfortunately, the German version of the Mail Accessibilit yhelp topics don’t seem to have been translated yet. Searching for Barrierefreiheit didn’t yield any results, and searching for Zugänglichkeit only gave a general page about My Yahoo! accessibility, but nothing specific to mail. But I am sure these are things that will be fixed/documented in a timely manner so people whose first language is not English can benefit from the features in the same way.

I applaud Yahoo! for their newest version of the mail interface for its inclusive design principles and good accessibility for everyone! Keep up the good work!

If you’d like to read this article in German instead, here’s the translation on my German blog.