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

  • Be consistent. "We always abbrieviate a telephone number with Tel before it so people always know it means the same thing," says Ian Edelman.
  • Don't overwrite. "Write content so it reads well for people who have got to listen to it," says Edelman. "When writing for the web, you need to write as little as possible but without sacrificing the quality of meaning and richness of language."
  • Kill pop-ups. "We found that popups regularly caused a sense of disorientation in several of the user groups - their focus moved without their knowledge and they could not find their way back," says Emma Charles.
  • Provide alt tags. "Having listened to blind users having to listen to one long unintuitive image URL after another, we have to conclude that alt tags are the most important aspect of making a website accessible," says Charles.
  • Define accesskeys for frequently-used links. The Manchester United Access site uses the UK Government Standard Accesskeys, where for example ALT+1 jumps to the homepage link in Internet Explorer.
  • Write meaningful links. "A lot of screenreader users list the links on a page to see if it might lead them to where they want to go and an endless parade of 'click heres' is not much help," says The Disability Rights Commission's senior software developer Stephen Beesley.
  • Use structural tags. "While a screen reader will probably pronounce DRC as Dee Ar Cee, it might not cope with EOC and pronounce it Eeyock," says Beesley. "Use of the ABBR tag would make things clearer."
  • Don't abuse HTML. "Use of the BLOCKQUOTE tag usually causes indentation of text in a browser which some people like to exploit," says Beesley. "But since it's meant to denote quotations, some assistive software may be misled."
  • Don't used timed events. A top user complaint is about "dynamic content that alters without the user being informed of the alteration and pages with automatic refresh or forwarding."

More on accessibility

Credits

© Sean McManus. All rights reserved.

Visit www.sean.co.uk for free chapters from Sean's coding books (including Mission Python, Scratch Programming in Easy Steps and Coder Academy) and more!

Discover my latest books

Coding Compendium

Coding Compendium

A free 100-page ebook collecting my projects and tutorials for Raspberry Pi, micro:bit, Scratch and Python. Simply join my newsletter to download it.

Web Design in Easy Steps

Web Design IES

Web Design in Easy Steps, now in its 7th Edition, shows you how to make effective websites that work on any device.

100 Top Tips: Microsoft Excel

100 Top Tips: Microsoft Excel

Power up your Microsoft Excel skills with this powerful pocket-sized book of tips that will save you time and help you learn more from your spreadsheets.

Scratch Programming in Easy Steps

Scratch Programming IES

This book, now fully updated for Scratch 3, will take you from the basics of the Scratch language into the depths of its more advanced features. A great way to start programming.

Mission Python book

Mission Python

Code a space adventure game in this Python programming book published by No Starch Press.

Cool Scratch Projects in Easy Steps book

Cool Scratch Projects in Easy Steps

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

Walking astronaut from Mission Python book Top | Search | Help | Privacy | Access Keys | Contact me
Home | Newsletter | Blog | Copywriting Services | Books | Free book chapters | Articles | Music | Photos | Games | Shop | About