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 likely 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 all, regardless of ability. The challenge is in raising awareness amongst those who commission and develop content to 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.

Challenge

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

Approach

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 intro to challenge those, 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 persona of who their target audience is, 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 overdesigned 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 users 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.

Here the colour palette animates as the voiceover explains where some users may have difficulties with colours that don’t have a sufficient contrast.  We use this approach to introduce other practical guidelines including use of Flash and JavaScript, links and other key areas where taking a few simple steps can greatly improve accessibility.  We then put the learner in the position of someone who is colourblind by getting them to change colour on graphs, and see how difficult it is to discern contrast if you don’t make the right choices for accessible design.

4.  Show how it can work with a case study

Fortunately, there’s no end of great examples at the BBC of websites 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 doing 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 key in this module to provide people with links to where they can find more help, via the BBC guidelines, and support in interpreting them, via the Future Media and Technology team.

Feedback

Initial feedback, as cited in the E-learning Age Article, has been very positive about the module, 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.