Hello (Accessible) World

The web world we live and work in as web developers is predominantly a visual medium, yet what happens if you don’t have the benefit of sight? It’s a completely different experience, and often not a very good one given the lack of accessibility support from most web sites.

Through the process of building a rich media portal for MIT, I had the honor of getting to know a visually impaired user and gained a better understanding of how to build more accessible online experiences everyone can enjoy.

About MIT World

ISITE Design recently completed a redesign of the MIT World video portal. The site features 500+ videos and is an internationally recognized destination for big thinking and ideas emerging from MIT.

Thinking about accessibility upfront

We planned for numerous accessibility-driven features in the initial development of MIT World. The design offers a high contrast version for limited sight users and the underlying HTML code is optimized for screen reader support. Careful attention went toward descriptive link names, informative content and images with alt tags. While transcriptions didn’t exist for closed captioning, we have an architecture that can support it in the future. However, a video-driven portal like MIT World presented unique accessibility challenges.

Meet Allen Kleiman

Shortly after launching the site, MIT World got a call from Allen Kleiman, one of its most dedicated users. Mr. Kleiman is a former computer programmer and also visually impaired. Not only did he help articulate the problems with the new site, he graciously agreed to help brainstorm new ideas and test potential solutions.

The first thing he reminded me about was the fact that he doesn’t use a mouse. All interaction is controlled via the keyboard. While I understood this, it did encourage me to try using the site without a mouse to see firsthand what the experience was like.

I’d recommend everyone forgo the mouse and navigate to and through your favorite website. While some sites are better than others, it’s a frustrating experience to say the least. Now close your eyes and try. It's impossible of course without screen reading software installed. Without the benefit of sight or assistive technology, the web simply ceases to exist.

Making video accessible

The video content at MIT World.com is the single reason most people visit the site. The video player itself is built in Flash. Flash was selected based on its reach and ability to provide a common platform regardless of browser.

There are many accessibility features available within Flash, however there are also inherent difficulties with multimedia content online. Many multimedia applications and JavaScript-based page features have more sophisticated controls and interactions in their interface. Some types of interactions (i.e. drag and drop) are practically impossible to make accessible for the visually impaired online. The web and the consumer devices we use to interact with these newer interactions are not yet sophisticated enough to provide the feedback needed for accessibility.

Using assistive technologies

For Mr. Kleiman, like most people using assistive technologies, the setup is pretty standard. This includes a Windows-based PC, Internet Explorer and a screen reader program such as JAWS. This is a typical setup for accessibility testing as well. IE is ahead of other browsers in accessibility support and many of the most popular screen reading programs are PC based.

I asked him to access the site, knowing that he would be unable to play a video, but wanting to understand the experience. I could hear JAWS plodding its way through the web site. Screen readers are verbose and the default settings literally read every element they find. Listening to Mr. Kleiman’s experience, it was apparent that the screen reader had completely skipped the Flash video player. A problem indeed.

The primary keys used to move around a web page with a screen reader are the tab key and the up down arrow keys. The tab key is used to jump from link to link, which includes the buttons and controls in a multimedia feature. The arrow keys scroll the page up and down. The enter key is used to activate a function or follow a link. Mr. Klieman advised me to be concise in the descriptions of the functional aspects of the multimedia and interactive features.

On a Mac I was able to tab in and out of the MIT World player and use the enter key to access the controls. After a day of searching I found a bug when the Flash is implemented in a certain manner. Often times we make the background of our Flash movies transparent so the Flash can ‘float’ above content on the page. However this makes a Flash movie invisible to a screen reader. In the end the actual fix was easy enough, although it had design implications.

Why accessibility matters

I asked Mr. Kleiman what he does if a web site is not accessible. His said he simply gives up closes the page -- and doesn't return. It’s a key lesson to remember that your site will cease to exist for a certain group of users if you don't take care to implement accessibility-driven features.

Interestingly enough Mr. Kleiman said that government sites, although mandated by Federal law to implement accessible content, are some of the hardest sites to navigate. It’s critical to have a good strategy in place to ensure content remains accessible. This has a lot do with the information architecture planning up front. Remember, if it’s confusing to sighted users, you can assume that the confusion will significantly greater for the visually impaired

Building better experiences

It’s critical to account for accessibility during all phases of your web development projects. This is even more important for large sites with dynamic content. As I learned through talking with Mr. Kleiman, understanding how the end users interact with your site goes a long way in helping build better experiences that everyone can enjoy online.