Web Access Centre

JK Rowling Flash website - Case study - Web Access Centre

Summary: The relaunch of JKRowling.com saw LightMaker push the boundaries of accessible Flash. This case study provides an overview of key issues tacked to make the site as accessible as possible.

• Summary
• Introduction
• Accessibility features
• Flash accessibility – moving forward
• About Lightmaker
• Case studies

---

www.jkrowling.com

Summary

Lightmaker pioneered 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 jkrowling.com. Lightmaker worked closely with the RNIB, RNID and Macromedia in this development.

Introduction

The 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.

It was important to look at opening up this exciting online world to users with disabilities so that they were able to enjoy all aspects of the site.

Lightmaker are committed to making websites accessible to all, and through close consultation with partners, we strive to deliver outstanding sites that everyone can enjoy. Our sites are built to the highest standards in terms of usability and accessibility and we strictly adhere to the guidelines set out by all governmental organisations, but at the same time we look to push these standards to the next level to ensure that the accessible experience is as involving and rewarding as all others.

The J.K. Rowling accessible website was launched in July 2005 and is recognised as one of the most advanced and accessible Rich Media experiences, pioneering new accessibility features for disabled, blind and partially sighted internet users.

J.K. Rowling said:

"www.jkrowling.co.uk allows me the opportunity to be able to communicate directly with as many Harry Potter fans as possible. I am therefore delighted that disabled and visually impaired fans can now be a part of this."

The original site offers the user an intensely visual experience and it was imperative to retain the explorative and creative element of the site, and still offer all the features and treats that the original has. Once each use-case was identified, we found alternative methods to convey the experience to each of these, and hence end up with a rich site that is universally accessible.

Accessibility features

Key accessibility features that have been developed for www.jkrowling.com 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 jkrowling.com 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

Jkrowling.com 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.

Flash accessibility – moving forward

Lightmaker are delighted to have been involved in developing the accessible version of jkrowling.com and the results that have been achieved.

Rob Noble, CEO of Lightmaker has commented that:

"www.jkrowling.com is one of the most fun and interactive website builds Lightmaker have had the pleasure of being involved with. This latest development stage demonstrates how Lightmaker managed to understand, take on and rise to JK Rowling’s challenge of delivering the same fun and interactive experience to disabled and visually impaired internet users. Lightmaker hopes this website demonstrates that with determination and collaboration with expert institutions like RNIB and leaders in their field like Macromedia, and a collective passion for the internet our industry can deliver accessible websites whatever the content or interface, it really can be an experience for all."

Every release of Flash caters more and more to address key areas that affect the delivery of media over the web.

Accessibility is a very large area, and the work involved in Flash to make a site fully accessible requires a lot of thought and time. With the last two big releases of Flash the accessible features have improved greatly, making developing the content quicker and more efficient, in turn allowing time to concentrate more on new ideas to enhance the accessible experience.

About Lightmaker

A privately owned and funded company Lightmaker Group consists of six companies located in the UK, Europe and the USA our service offering includes Web Development, Outsourcing, Hosting, Consultancy, Education online and Branding. Lightmaker’s Web Divisions are located in Tunbridge Wells (UK), Manchester (UK), Amsterdam (NE) and Orlando (USA) and specialise in Web Development Consultancy, Macromedia Flash site production, Website Accessibility, Web interface design, Web development process management, Web integration and Web application services.

Lightmaker Group Ltd
Century Place
Buildings 3 & 4

Lamberts Road
Tunbridge Wells
Kent TN2 3EH
T. +44 (0)1892 615 015
F. +44 (0)1892 615 016
E. enquiries@lightmaker.com

Case studies

• Back to case studies

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 20/11/2008 11:13