« April 2005 | Main | August 2005 »

July 22, 2005

How many accessibility experts does it take to screw in a lightbulb?

Ok, please refrain from answering that question in the comments. I wanted to respond to a comment made by my friend Jeffrey Zeldman the other day about the JK Rowling site. I tried to make this point initially and don’t think I did.

One of the concerns that he expresses is that Flash can be accessible, but only with a panel of experts that includes me, the RNIB, and the RNID. The long list of names on the press release might convey that sense and I am sorry that it did.

The JKRowling.com site was really done primarily by Lightmaker. When they first started looking at it, I spent an hour on the phone with the developer. Most of what he did was taken straight from my whitepaper on Best Practices for Flash Accessibility. I got a couple of questions via email but that was it. A couple of months later I got a message reading ‘we’re done’. The work they did to that point was really impressive and very close to what you see today.

A natural step in the process here was to find people with disabilities to review and comment on the site. There are a number of ways to accomplish this informally. However, this is a high profile project and reflects a number of firsts. Thus, we really needed to get the RNIB and the RNID involved. The RNIB made a list of suggestions. The list was extensive, but relatively simple to implement. About a month later, the site was finished. I don't think you would see much more involvement from the experts on a high profile HTML site.

What makes the site so amazing, from my humble perspective, is that it is a great teaching tool. The techniques are easy to understand and simple to implement. I went over the most complex issue yesterday. My hope is that designers will take from this that accessibility in Flash does not require a huge amount of extra effort, but even implementing a limited number of steps, a site can be made much better.

So to answer the original question…at least a couple. Whether you are working in Flash, HTML or C++, you should:

Posted by Bob Regan at 08:33 AM | Comments (1)

July 21, 2005

Progressive Disclosure

I wanted to continue some notes about the JK Rowling site (www.jkrowling.com).

Progressive disclosure

As I mentioned yesterday, one of the things I really love about the site is the simplicity of it. Perhaps my favorite aspect of the site is the way it handles complex elements. One of the key usability challenges for screen reader users is getting to the information you want on a page. There are a number of places on the site where there are a lot of little elements grouped together. In these cases, the screen reader user has to listen to these elements on the page before they can get to the info they want.

As one example, take the phone. In the upper left hand corner of the site is a mobile phone. It allows you to dial numbers and even receive calls. The problem with the phone is that it has 13 buttons. For someone viewing the site using a screen reader, reading the site in it unmodified form would mean listening to all of the buttons on the phone, one by one until they got to the next section of the site, the scrapbook. This is a very tedious way of navigating the site.

To address this issue, the developer grouped these buttons together into one button. When the screen reader comes to the phone, they hear, “Mobile phone, click here to pick up the phone button.” By default, the .silent property of all of the buttons is set to true. When the user picks up the phone, the buttons are exposed and the rest of the site is hidden. The only other addition is that the developer added a button to ‘hang up’ the phone and restore the default state.

This is a very simple shell game called progressive disclosure. It is analogous to rollover menus in JavaScript we see visually all the time. It provides the user with a limited set of information and then provides more only when the user asks for it. Technically, it is not difficult to implement. It only requires the author to group items logically and then use the .silent property to show and hide objects as needed.

Posted by Bob Regan at 02:57 PM | Comments (0)

July 20, 2005

jkrowling.com

Today, JK Rowling launched a new, accessible version of her site at: www.jkrowling.com. The new version of the site sets the standard for accessibility in Flash. I love this site. Jo Rowling and the guys at Lightmaker deserve tremendous credit for this project. It was the result of a collaboration between Lightmaker, the Royal National Institute of the Blind and the Royal National Institute for Deaf and Hard of Hearing People. More than any other site, it shows what can happen when high end designers partner with accessibility experts.

First, why Flash? The primary reason for this is to create a playful, immersive environment. The original site included a visual representation of JK Rowling’s desk, audio of the sounds of her neighborhood, and an interactive game built into the site. It was a unique site that won the MAX 2004 award for the best Media, Entertainment, and Gaming Experience. The use of Flash allowed Lightmaker to provide a layer of richness to the experience that was not possible in HTML alone.

When thinking about accessibility in the context of this site, the question became how to create the same type of experience for a variety of users with disabilities. Using HTML, the same information conveyed using Flash, can be provided to the user. In fact, the site already included a ‘text only’ version available at: http://www.jkrowling.com/textonly/welcome.cfm. If you check it out, it provides information but does not have the same richness or feel as the Flash version. Thus, Lightmaker and JK Rowling started looking at ways to make the Flash experience accessible to people with disabilities. The goal became to create a site that provided the same immersive experience as the original site, but that was accessible to people with disabilities. The only way to do that, was to use Flash. The result is pretty compelling.

I wrote a paper a while back about accessibility and design titled, ‘Web Accessibility and Design: A Failure of the Imagination’. In it, I describe the fact that we have too few sites that are both great examples of design and accessibility. Sites tend to be either one or the other, not both. The projects are either staffed by design experts or accessibility experts, rarely both. What I love about this project is that it clearly shows what can happen when the two groups combine. The guys at Lightmaker that did the design work here are truly great designers. Their work is unique and compelling without parallel. For this project, they partnered with the RNIB to get a sense of how to make a site that was not only accessible, but truly usable for people with disabilities.

What I love about this site is its simplicity. In the process of developing the site, the developer at Lightmaker came up with a number of nifty little tricks. Most of them are not technical in their implementation and thus, infinitely replicable. I think this site will serve as a great model for developers of accessible sites in Flash.

Check it out (and be sure to select the accessible version) at: www.jkrowling.com.

Posted by Bob Regan at 10:40 AM | Comments (20)

July 19, 2005

Macromedia Welcomes Andrew Kirkpatrick

I wanted to point out a couple of changes at Macromedia. First, I want to welcome Andrew Kirkpatrick to Macromedia. This month we are fortunate to have Andrew Kirkpatrick join Macromedia. Andrew joins Macromedia from the WGBH National Center for Accessible Media (NCAM) in Boston. At NCAM, Andrew was Director of Technology with a focus on accessibility consulting for corporate clients.  Andrew worked with corporate clients including America Online, Yahoo!, BT, Apple, and for the past four years, Macromedia. Andrew was instrumental in establishing accessibility in the Flash platform. In addition to strategic partnership activities, Andrew managed projects focused on web and interactive media accessibility, and was the product manager for MAGpie - NCAM’s software for creating captions and audio descriptions, and developed STEP - NCAM’s Simple Tool for [accessibility] Error Prioritization. Andrew is a welcome addition to our team. Look for him to start adding posts here soon!

Second, we recently updated our accessibility portal at: www.macromedia.com/accessibility. Please check it out for the latest information on accessible design and macromedia tools. It includes an updated whitepaper on accessible Flash design, product info and a list of sample sites. We will be updating the site frequently in the months to come, please visit often.

Posted by Bob Regan at 09:22 AM | Comments (0)