Accessible Flash: nothing is impossible

November 2, 2007

Although this has nothing to do with Second Life, i found it quite interesting. An article on the RNIB website describes how Lightmaker pushed the boundaries of Flash to create an accessible Flash website.
The case study, analyses the steps taken by Lightmaker to pioneer new accessibility features for disabled, blind, partially sighted, mobility impaired, deaf and cognitively-disabled internet users with the development of an accessibility enabled Flash version of Lightmaker worked with the RNIB, RNID and Macromedia in the development of this project.

The Flash site was created by Lightmaker to provide an accurate portrayal of J.K. Rowling’s world. It is an explorative area in which the user can hunt for hidden content and interact with their surroundings in order to access special and collectable content.

This case study can be used as an example demonstrating what steps should be taken in making technologies such as Flash, known for being notoriously inaccessible, compliant with today’s accessibility standards.

Accessibility features

The site’s key accessibility features include:

  • Accessibility menu

An accessibility menu was created, positioned at the top of the page so that users can quickly gain access to accessibility features. The tab order was also set so that screen reader and braille output users will tab to this area of content before any other. Features in the Menu include; the ability to pause movement, turn off background sounds and to enlarge certain pieces of text and access a site help area.

  • Site help

It was felt that this new version of the site needed explaining for two reasons. To many users, the original release of offered everything they wanted, and may not realise the importance of broadening the audience. Similarly, new users that make use of the accessible features may not be aware of what kind of experience is on offer, and so the ‘Site Overview’ provides this information.

The option in the main accessibility menu to turn off sounds only applies to background sounds, so these can be silenced so as not to conflict with screen reader narration. Foreground sounds are not encompassed in this muting as they provide meaning and prompts for the user. With several different sounds scattered around the site, the meaning of each sound is not obvious from the noise. To combat this we created a Sound Glossary, where every sound on the site is sorted by category and can be listened to along with a description.

One of the biggest challenges faced when starting our work in accessibility was knowing how to operate screen readers correctly. When a screen reader is running, it overwrites standard keyboard commands with its own. To navigate a site efficiently with a screen reader, knowing a handful of the main keyboard commands is vital. To help with this, we added a Keyboard Controls section, which lists the most useful keyboard commands for the two most popular Flash-compatible screen readers, JAWS and WindowEyes.

  • Adjustable text size

The user can determine the size of the body text, and enlarge all other content and clues, by using Flash’s in-built zoom feature accessible via the right mouse button.

  • Labels

Labels have been placed across the site which states the function of every control. For example, the landing page is a direct representation of J.K. Rowling’s desk however a person with a visual impairment may not know this therefore the label states ‘Welcome to my desk, which was specifically tidied for your visit. Please wander around and explore all of the objects you find here.’

Each time the user moves to a new area, the label description is updated to represent this, for example when moving to the ‘Extra Stuff’ area the label changes to ‘You have entered the extra stuff area, the news board is full of interesting bits and pieces for you to browse around.’

  • Handling audio

The site contains a number of background and foreground sounds however for vision impaired users, these sounds may become confusing, especially if a screen reader is being used, therefore the site allows the user to mute the sound if required. Captions for audio have been built into the user interface for hearing impaired users.

As mentioned previously, in the ‘Site Help’ section, there is also a sound glossary to reinforce events on the site and look up the meaning of important sound clues. Examples of general sounds include a pen scribble, the portkey journey and reward certificates. There are also sounds for when the user has revealed a hidden clue, the spider running across the screen and dialling a number on the phone.

  • Keyboard navigation

Navigating around the site is possible without a mouse. The keyboard navigation is rebuilt dynamically on-the-fly as users navigate around to different areas of the site. A logical sequence is applied to the order is which items are navigated to, making the pattern follow a logical path around the screen. Important links have been put further up the tabbing order to make life easier.

This non linear keyboard navigation can be seen whilst navigating the desktop, specifically the mobile phone. This makes use of progressive disclosure, which makes all the buttons on the phone silent until the phone is selected, at which point the whole desk is made silent to screen readers apart from the buttons on the phone. The progressive disclosure technique allows the desk to be navigated around quickly without having to tab through all 12 buttons on the phone. When the phone is required it inherits exclusive focus as the desk items are made silent.

  • Screen readers works with screen reader technology. If detected, the user experience will then be adapted so that hidden content is easier to find. While non-screen reader users have a slightly more challenging game experience because they can use visual clues to assist them.