It's Sean!

UK freelance journalist, author
and writer Sean McManus

Printed from www.sean.co.uk. © Sean McManus.

NEW: Sign up for my newsletter!

Home > Articles > Webmaster resources > Accessibility case studies

Internet Magazine, January 2004

Accessibility excellence

Sean McManus talks to the designers behind three award-winning accessible websites

Tate Modern IMAP

Screenshot of the Tate Imap website

You don't need a mouse to play with Picasso's nude woman in a red armchair

A blind visitor emailed Tate Modern about its Imap project, which explains the works of Matisse and Picasso. "I was born blind," he wrote. "Therefore, the concept of visual art is quite new to me. Although I've been through some of these descriptions a couple of times I don't think I've grasped some of the finer points as some of the ideas strike me as very visual. I hope to be able to appreciate these concepts more in future by thinking about them and talking to other people."

"It's a complete vindication of the site," says Caro Howell, the site's curator. "It's not a blind person saying this is very visual so it's pointless, but saying it's interesting so he'll keep plugging away at it."

For sighted people, there's a Flash section that explains the paintings interactively under keyboard or mouse control.

For the visually-impaired, there's a text-only commentary and a PDF of raised drawings to download. These can be printed on a laser printer, photocopied onto 'swell paper' and then put through a machine called a Fuser to create an embossed and tactile page. In the first six weeks, the PDF was downloaded 2600 times.

Howell says: "If you or I read something, our eyes can jump back and forth over the text to refer to earlier points. You can't do that aurally. If they can't remember what the last point was, you've lost them. Whereas most people try to be text-light on the web, we went the opposite way. It's very text-heavy because it's complicated information we're trying to get across."

The animations were complete by the time Flash MX introduced accessibility features, but there's another reason the site doesn't use them. Dan Porter, the freelance art historian and webdesigner who built the site, explains: "We knew that using Flash would be something new for visually impaired people and didn't want to add complexity by making it too interactive. It helped user orientation to create distinct areas for visual information and text-based information."

The site won a BAFTA Interactive in 2002 and was the first non-profit to win.

Hampshire Museums Service

Screengrab of the Hants museums website

The Hampshire Museums Service website is designed to look great and sound great too

You shouldn't be afraid to deviate from the WAI accessibility standards. That's the view of Ian Edelman, the manager of Hampshire Museums Service's website. "While we use stylesheets across the site, we've resisted the temptation to use them for positioning until it will work without pages falling apart on older browsers," he says. "We tend to use tables for layout. It's not best practice, but you have to take a pragmatic approach. If it renders both visually in as many different browsers and platforms as possible, and also renders through audio browsers, then we think we've achieved as high a level of accessibility as possible."

To test the site, Edelman uses the audio browser PW WebSpeak. "I look away from the screen and run a selection of pages through it," he says. "It's not the latest of the audio browsers, but it gives me a good feeling of how it sounds. While tools like Bobby tell you more than you need to know, they don't always tell you what you do need to know."

Edelman advises webmasters to build flexibility into their designs from the start. "When we added a 'skip navigation' link to our navbar, we only had to change one file to change the whole site," he says. "If people have embedded their navigation in every page, of course it would be difficult to make this simple change. We use server side includes so we can make global changes without having to open 3000 pages."

The site was shortlisted in May 2003 for the Jodi Mattes Access Award, which recognises accessible museum websites.

Manchester United

Screengrab of Manchester United Access site

Manchester United might have lost David Beckham, but they have gained an accessible website.

(The Manchester United Accessible website is no longer online.)

"Manchester United was determined to launch disabled access to manutd.com for the start of the 2003 Premiership season," says Donna North, head of creative production Europe at TWI Interactive. "Due to the complexity and size of the project, it was decided that a phased approach using a second frontage was the only and best way to achieve this. This approach also guaranteed that the diverse requirements of all target disability groups could be met without compromising any one group."

To ensure that the access site doesn't end up second division to the main site, the two share the same content management system. "This means when the editors at Old Trafford publish a story, it will go live on both sites at the same time," says North.

Although the whole site has been designed to read intuitively on screenreaders, there's a separate screenreader-optimised version that omits images. "The main aim of the screenreader-optimised version is to closely mirror the manner used by a screenreader to read the page," says North. "We found a number of visually impaired, not blind, users used screenreaders while trying to keep note of their place on the screen at the same time."

The site offers tools for increasing the font size. Emma Charles, head of Production at TWI Interactive, says: "Browsers and operating systems come with a range of accessibility controls that can open sites up to more users. However, not all users who would benefit from these controls know how to use them and many do not even know they exist. Anything a website designer can do to present these controls within the website experience will be of benefit to these users. Font size controls within the page are seen as very useful, and the possibility to change the site colour scheme but still retain the branding and identity of the site is very well received. At the very least, font sizes and colours should be relatively coded to allow manipulation by browser and operating system controls."

Manchester United's accessible website was shortlisted in the category of accessibility and usability for the BIMA Awards 2003. As at January 2007, the Manchester United Access site is unavailable.

The designers of accessible sites share their secrets...

More on accessibility

Books by Sean McManus

Scratch Programming in Easy Steps

Scratch Programming in Easy Steps

Raspberry Pi For Dummies

Raspberry Pi For Dummies

Learn to program with the Scratch programming language, widely used in schools and colleges.

Set up your Pi, master Linux, learn Scratch and Python, and create your own electronics projects.

Coder Academy

Coder Academy

Cool Scratch Projects in Easy Steps

Cool Scratch Projects in Easy Steps

Learn to make games and other programs in Scratch 2.0, and make a web page in HTML, with this highly interactive book for 7-10 year olds.

Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!

More books

Recommended articles

Stylised coloured photo of a synth

Discover my music and home recording articles

Interested in starting home recording? Follow me as I start recording, using instruments such as the Novation MiniNova and Korg Kaossilator, and share my synth and sample-based music online.

Scratch cat and rainbow circle

10-block demos for Scratch programming

Lots of people of all ages are learning to program with Scratch. Discover some useful tricks and techniques in my 10-block Scratch demos, including special effects you can drop into your games.

Paper Raspberry Pi case

Download free book chapters and more!

Download a free case for your Raspberry Pi, and free chapters from my books about the Raspberry Pi, Scratch, web design and more!

©Sean McManus. www.sean.co.uk.