BBC – Making Websites Accessible
Anyone who has a disability that affects their ability to use web-based content will have experienced the frustration of trying to use sites that aren’t accessibility friendly. Likewise many online content developers will have experienced the challenges faced when creating accessible content.
The BBC treats accessibility seriously and aims to make all of its web based content available to everyone, regardless of ability. The challenge is in raising awareness amongst those who commission and develop content, so that they take this on board and achieve positive results. To meet this challenge the BBC commissioned Kineo and Designs on Learning to produce an e-learning module.
There’s a great case study on the module which appeared in November 2010’s edition of E-learning Age magazine. You can read the article in full here on page 24 (the whole magazine’s well worth a read of course). We summarise some of the key points from that article and share some screenshots below.
Accessible design needs careful thought. Many come to the topic with preconceived notions, e.g. “It’s for a minority”, “it’s too expensive”, “it’s going to compromise my design”. However, the BBC has a mandate to deliver to everyone and is not keen to compromise creativity in the act of making one of its many sites accessible. The aim of the e-learning module, therefore, was to bring people around and make sure there was a shared awareness of the importance of this issue, and bring the detailed BBC guidelines to life in a way that makes them practical and straightforward to apply.
We worked in the Mohive tool, which we’ve used on many projects for clients including the BBC and BP. Mohive is a very flexible tool to work in – but doesn’t provide a fully accessible version out of the box, so we also developed a fully accessible HTML version of the module, while incorporating many accessible elements in the Mohive version.
From the outset, we all wanted the course to have a strong personality. We were fortunate to secure the talents of Mat Fraser to be the module’s presenter and interviewer, which gave the overall module a breezy, TV news magazine feel.
The E-learning Age case study sets out five key design approaches taken in the module:
1. Set the context and challenge assumptions
As mentioned above, many designers or project managers can come to a subject like accessibility with pre-conceived notions. Mat Fraser introduced a myth busting introduction to challenge those ideas; to reveal (for example) that almost 12 million adults and children in the UK have a disability – a considerable proportion of the BBC’s audience. We also dispelled the myth that you can’t make flash accessible, by showing examples of where the BBC has done this, for example, in the design of iPlayer.
2. Make it real
We were keen to include real examples of learners discussing how accessibility is important for them. All designers work better if they have a clear idea of the persona of their target audience, so we worked to develop real profiles of users. We created a ‘Meet the Audience’ section, which features video interviews with real website users, sometimes expressing their frustration at sites not designed for their needs. We introduce the user and give some background; then the learner can hear directly from the user in a vox pop video clip (with captions):
In the screens above, we meet Zak, who has Cerebral Palsy. Zak explains his frustration at over-designed sites that don’t take users with motor disabilities into account: “When it gets really busy I just get upset and start giving up, or I get really frustrated and want to smash the computer up”.
Through a series of case studies and video interviews like this one, the module aims to bring home to designers the real practical challenges that people face in using inaccessible sites – and link to the next section, which shows you how to improve your design to address these issues.
3. Offer tips for guideline implementation
The BBC already had detailed guidelines on accessibility. Our aim in this module was to focus and give practical how-to steps for key changes that will make a big difference. Through a scoping task, we focused on a top 10 set of steps any designer can take to improve accessibility of a website. The aim was to convey the essence of each point, and link to further detail so designers could take them further. Here’s an example of one of the tips: being sensible about the use of colour on the site.
4. Show how it can work with a case study
Fortunately, there are many great examples of websites at the BBC that score very highly on accessibility and creativity. We focused on the highly popular Merlin site (www.bbc.co.uk/merlin) as an example. Our host Mat Fraser interviews the technical project manager for the site, and we show various parts of the site in action and what lessons he learned in making it happen – primarily about good planning from the start.
5. Call for action – give help and support
There’s no denying that there’s a lot of detail to consider when setting out to create an accessible site. It was a key aim in this module to provide people with links to where they can find more help, via the BBC guidelines, and also to give them support in interpreting them, via the Future Media and Technology team.
Initial feedback, as cited in the E-learning Age Article, has been very positive about the module. Here are some example quotes from users:
“It’s a great course…really great to be able to see the people that these issues affect and learn about their experiences of using the web.” (web designer, BBC Children’s)
“I’ve just done the course and found it extremely useful. Well done to all on putting it together.” (content producer, BBC Future Media and Technology Team)
We’re grateful to the BBC and Designs on Learning for the opportunity to partner on this project, which we believe gets across the value, and practical points of accessible design in a friendly and engaging way.