BBC OlympicsAn accessibility case study

Al Duggin and Henny Swan

CSUN 2013

BBC Olympics Introduction

> About the Project> Accessibility at the BBC> Challenges> Desktop and Tablet> Video> Mobile> Lessons Learnt

About the Project

BBC Olympics About the Project

The first truly digital Olympics. Never miss a moment

The most ambitious and comprehensive BBC digital project to dateLive and catch-up video at the heart of the BBC’s online coverage24 high definition live streams2500 hours of video coverageDelivered to mobile, tablet, PC, and Connected TVThe first truly digital Olympics where the public would be able to never miss a moment

“Our aspiration was that just as the Coronation did for TV in 1953, the Olympics would do for digital in 2012Phil Fearnley, General Manager, News & Knowledge at BBC

BBC Olympics About the Project

Built around the sports domain

AthleteUsain Bolt

EventMen’s 100m

SportAthletics

VenueOlympic Stadium

CountryJamaica

Interconnected nodesAthlete - e.g Usain BoltCountry - e.g JamaicaSport - e.g AthleticsEvent - e.g Men’s 100mVenue - Olympic Stadium

BBC Olympics About the Project

> 10, 000 Athlete> 205 Countries> 36 Sports> 304 Medal Winning Events> 30 Venues

A page per domain item

... all interconnected

Page composed of components, including:Facts and FiguresNewsVideo MedalsScheduleResults

BBC Olympics About the Project

Lots of other components

Make the experience as rich, engaging and interactive as possible.

Top trump style comparison components for countries athletesTwitter modulesComponents to promote live video streamsCarousel of to promote athletes and results

Each page type had an index page.Countries.

Athletes - and the ability to filter by sport, event

Venues

Sports

An event index for each sport

2 versions of a fully comprehensive schedule - a grid and a list view - providing alternative ways to get to the schedule information that you wanted.

The schedule grid view provided an easily scannable visual interface

The schedule list view provided a more accessible text interface

The schedule allowed users to dig in and browse by sport

or by day

We also had Interactive medal tables. That allowed users to browser medals by country

medal by sport

And medals by athlete

These pages were dynamically updated in real time using data from the Olympics Broadcasting Service.

Other features included the interactive video player to watch live and on-demand video

A results section, providing by a 3rd Party, that contained details of every heat of every event.

And of course the sport news sections with content created by journalists.

This was an existing part of the website that we just added branding to.

Article pages

Video clips

Image galleries

Live event commentary

Lots of this was also available on mobile

And all video and medals were available on connected TV

Tens of thousands of pages ...

possibly hundreds....

BBC Olympics About the Project

Usage and Stats

> 37 million UK browsers> 66% UK online adult population> 57m global browses> 111m video requests across all platforms

> 9.2 million mobile browsers> 1.9m downloads of our Olympics smartphone app> 12m requests for video from mobile devices> 34% of all daily browsing by mobile

We knew the website was going to be popular - but I don’t think anyone imagined it would be quite the success it was.

Accessibility at the BBC

BBC Olympics Accessibility

Accessibility at the BBC

> BBC Trust and Charter> Lead by example> License fee

“The BBC is paid for by everyone and therefore must be accessible to everyone otherwise the BBC is not the BBC.Micheal Grade, Director General BBC, 2004-6

BBC Olympics Accessibility

Challenges

BBC Olympics Challenges

Accessibility consultant challenges ...

> Size - web, mobile, video> Standards and guidelines> Training> Ownership and responsibility

BBC Olympics Challenges

Developer challenges ...

> Size of project> Immovable deadline> 17 day event> Huge audience> High Profile> Real-time data> Up front design> Lots of javascript> Multiple teams

Huge amount of effort going into to making it available on many platforms.

On the desktop we wanted to make sure it was accessible to all - irrespective of people’s device or ability. First project I’ve worked on where this was made a clear priority right from the very top. Easier said than done.

Desktop and Tablet

BBC Olympics Desktop and Tablet

The Development approach

> Accessibile from the start> Speak to specialists early> Training - screen readers, WAI-ARIA> Research best practices> Set up a support network> Front-end developers create UI before integration> Brainstorm multiple solutions / Prototype / Iterate> Feedback issues early> Agile build and test> Component library> Progressive Enhancement

Screen reader training with AbilityNetAria, javascript and HTML5 training with The Paciello Group - based around upcoming componentsSupport forum for a month - to answer questions

Work with milestones: test early, test often

One of the first things we did when was analyse the designs looking for common styles and patterns that could be abstracted out into reusable code.

This helps you build things faster.

Also helps a consistency of implementation which is better for users

The other thing we did was build each component in such a way that it could be dropped into any page.Much quicker to build a site from reusable components. Having a library also promotes reuse and consistency of implementation.

This started as just a static library (HTML and CSS) - but evolved into components that used mock data. This meant we could get components to load different variation of expected data so we could confirm that they worked for all expected scenarios.

This helped hugely with testing. Could point testers to a page and get them to confirm that they worked as expected. Also meant that we could ask Henny to test things as soon as they were built - rather than having to wait for the components to appear on web pages that were being driven by test data.

BBC Olympics Desktop and Tablet

> HTML5 doctype> Lang attribute> Skips links > Unique title> Unique h1> WAI-ARIA landmark roles

Page Templates

BBC Olympics Desktop and Tablet

Open standards and Progressive Enhancement

Content

HTML & WAI-ARIA

CSS

JavaScript & HTML

CSS for Javascript

WAI-ARIA for Javascript

Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page

BBC Olympics Desktop and Tablet

> Add content in logical order> Alt text for images that need it> Captions for tables> Full text for abbreviations > Inline img or bg css

Content

Content

HTML & WAI-ARIA

CSS

JavaScript & HTML

CSS for Javascript

WAI-ARIA for Javascript

BBC Olympics Desktop and Tablet

> Add hierarchical heading structure> Use most appropriate elements> Use HTML5 elements with care> Don’t duplicate links> Alt text but don’t duplicate> Links make sense out of context> Code tables correctly> Code forms correctly> ARIA roles & attributes where useful> If visual state make sure it’s also read out> Validate

HTML

Content

HTML & WAI-ARIA

CSS

JavaScript & HTML

CSS for Javascript

WAI-ARIA for Javascript

Semantically structured HTML

BBC Olympics Desktop and Tablet

> Take care with display:none> Focus aswell as hover - no outline:0> Font size +2> Don’t use !important> Implement non-js layout> Check for colour contrast> Check with images off

CSS

Content

HTML & WAI-ARIA

CSS

JavaScript & HTML

CSS for Javascript

WAI-ARIA for Javascript

Take care to not implement barriers with CSS

BBC Olympics Desktop and Tablet

> Feature detection> Valid JS generated HTML> Update state labels - open/close> Hijax - http before ajax> Update screenreader virtual buffer> Keyboard access to all conent> No keyboard traps

JavaScript

Content

HTML & WAI-ARIA

CSS

JavaScript & HTML

CSS for Javascript

WAI-ARIA for Javascript

BBC Olympics Desktop and Tablet

> Contextual CSS body=”js”> Prevent flicker as js loads

CSS for Javascript

Content

HTML & WAI-ARIA

CSS

JavaScript & HTML

CSS for Javascript

WAI-ARIA for Javascript

BBC Olympics Desktop and Tablet

> Keep users informed> Manage focus> Implement keyboard controls> Provide hidden instructions> Use WAI-ARIA attributes where

appropriate

WAI-ARIA for Javascript

Content

HTML & WAI-ARIA

CSS

JavaScript & HTML

CSS for Javascript

WAI-ARIA for Javascript

Keep users informed - loading, new content

Treat aria as an enhancement - not widespread support or familiarity by users

Sometimes not possible to have a non-js version- schedule module- favourites tray

That’s fine - you need to be pragmatic!

Interactive Medal Tables* Built to work without javascript. * deliver something quickly. * real pages that you can bookmark and email * if there is an error it will still work* Logical Content order - go to any page without javascript and the content is in logical order.* Most appropriate markup - th for countries, caption and summary* Identify which content is selected in content layer as well as visual layer.* Alt for medal images* Visible active state for keyboard users* Keyboard short cuts* Inform users that content is loading* Users taken to loaded content* Use Browser API so back button still works

BBC Olympics Desktop and Tablet

Issues we fixed...

BBC Olympics Desktop and Tablet

Fixed: Colour contrast

Problem - Design/CSSFailed colour contrast test

Fix:Changed colours

BBC Olympics Desktop and Tablet

Fixed: Over complicated markup

PROBLEM: HTMLAural clutter - headings inside lists

FIX:Refactor HTML

BBC Olympics Desktop and Tablet

Fixed: Broken navigation when resized

Problem - Design/CSSFailed colour contrast test

Fix:Changed colours

BBC Olympics Desktop and Tablet

Fixed: Favourite Button

Problem: HTML generated by JSspan used instead of div

Fix:Feedback issue - got them to use a button

BBC Olympics Desktop and Tablet

Fixed: Keyboard inaccessible video clips

Problem: JS generating span instead of linkUnable to play video with keyboard as span used instead of button

Fix:Added in a link to control video

BBC Olympics Desktop and Tablet

Fixed: Unexpected keyboard controls

Problem: JSkeyboard events attached to arrow keys

Fix:Removed keyboard event

BBC Olympics Desktop and Tablet

Fixed: Keyboard trap

Problem: JSInfinite scroll resulted in keyboard trap

BBC Olympics Desktop and Tablet

Issues that got released...

BBC Olympics Desktop and Tablet

Compromise: Colour only medals

Problem: medal communicated by colour onlyIf colour blind won’t know what medal

Why not fixed:Design didn’t want to change

BBC Olympics Desktop and Tablet

Compromise: Country page content order

Problem: Design/logical content orderDesign meant not in logical order

Fix:Designers didn’t want to change design

BBC Olympics Desktop and Tablet

Compromise: Indistinguishable Links

Problem: Design/CSSCan’t see links until you roll over them

Why not fixed:Changed by another team due to request from design. Ran out of time to chase up.

BBC Olympics Desktop and Tablet

Compromise: Info graphics

<img src=”rivals.jpg” alt=”Bolt graphic” />

Problem: adequate alternate text not providedLots of information in graphic - editorial didn’t include adequate descriptive alt text

BBC Olympics Desktop and Tablet

Compromise: Auto Suggest not read out

Problem: JavascriptSuggested athletes not read out

Why not fixed:Not part of stable release of jquery ui. Ran out of time.

BBC Olympics Desktop and Tablet

Compromise: Auto refresh

Problem: JSCan’t turn off auto-refreshCompletely unusable by screen reader userUse of non-semantic markup

Why not fixed:Built by an3rd Party. Fed back issues but they didn’t have time/inclination to fix

Video

BBC Olympics Video

The Interactive Media Player

> BBC Sole rights holder> 24 live streams> Flash player> Fully immersive ‘lean back’ experience

Here’s the player in full screen. Standard player controls but also additional functionality that hadn’t been seen in say, iPlayer, before.

Pause and rewind live streams

Jump to key moments

Switch between live streams, with video still playing in the background

Switch between live streams, with video still playing in the background

When in full screen you could access alternative video streamsFully immersive

BBC Olympics Video

Approach …

> Tender & Contract> BBC Standards & Guidelines> Requirements & User Acceptance Criteria> In house testing> User testing with disabled users

Tender – referenced BBCS&G, Flash Media player and screen reader support GuidelinesBBC S&G – not enough, needed to be project specific which lead toIn depth requirements & UACAlso commissioned user testing

150 page document outlining tab order, labels, tooltips and logic of the video player for sighted keyboard only users and screen reader users

BBC Olympics Video

Requirements …

> No autoplay> No background image interference> No flashing> Contrast> Text size

Autoplay loved by some ZoomText users but a showstopper for Jaws users with no sight

“Noun: An act of selecting or making a decision when faced with two or more possibilities.Oxford English Dictionary

Choice

BBC Olympics Video

However accessible the IVP we felt we couldn’t predict if people would like it, or find it easy to use – e.g screen reader users, people with cognitive issuesWe wanteed to offer a choice of player rather than ghetto-ise disabled users

BBC Olympics Video

An additional player, not an alternative player

Tender – referenced BBCS&G, Flash Media player and screen reader support GuidelinesBBC S&G – not enough, needed to be project specific which lead toIn depth requirements & UACAlso commissioned user testingZoomText Windows XP

HTML player – Flash playback, HTML controlsDrawback – no controls in full screen

User testing – NB ‘Accessible version’ and ‘Default version’ was used-Labels not well understood-Participants didn’t think ‘Accessible version’ was for them

h2

IVP option links were not easily found – Added as H2 to ‘Choose how you watch

Accessible tooltips:<span>Watch with extra features in the page</span>Visible on mouseover and focus

h2

User testing – NB ‘Accessible version’ and ‘Default version’ was used-Labels not well understood-Participants didn’t think ‘Accessible version’ was for them

For this audience, it is better to describe the functionality of alternative versions rather than the people it is for

Accessible tooltips:<span>Watch with extra features in the page</span>Visible on mouseover and focus

h2

Help link further described what the differences were

Icons were well received – big and clear.Toyed with separate Play/Pause – easier for users with cognitive problems but we couldn’t find a suitable selected state that in itself wasn’t confusing so we settled for 1.

Icons were well received – big and clear.We did go through various iterations to see what would be best however

Escape to access controlsSet focus to Play/Pause

Icons were well received – big and clear.Toyed with separate Play/Pause – easier for users with cognitive problems but we couldn’t find a suitable selected state that in itself wasn’t confusing so we settled for 1.

BBC Olympics Video

Access services …

> Live ‘enriched commentary’ for the Opening Ceremony

> Audio only on TV> Audio and video via the web

> Subtitles for BBC One, Two and Three> No controls over the other streams

BBC Olympics Video

Compromises …

> IVP not as accessible as planned> Immovable deadline> Decided not to promote it as accessible

In user testing the majority of testers preferred the default version and ability to use full screen. Most were not expecting extras and were happy to sit back and watch the video.

Mobile

BBC Olympics Access services

We offered …

> Mobile website> Apps: Android 2.2 + and iOS 5 +

> Offline storage >Personalisation

> Shortcut on Blackberry> Live and catch up video

BBC Olympics Access services

The challenge …

> Expertise & experience> Standards & guidelines> Testing & evaluation

BBC Olympics Access services

BBC Mobile Accessibility Guidelines …

> Technology agnostic standards and guidelines> HTML, iOS and Android techniques> Evaluation criteria

BBC Olympics Access services

Approach …

> Use standard not custom components> Progressive enhancement> Follow platform specific guidelines

BBC Olympics Access services

Structure …

> H1 – H6> Landmarks > Data tables

BBC Olympics Access services

Alternatives …

> HTML: alt> Android: contentDescription > iOS:

> UIAccessibilityLabel> UIAccessibilityTrait> UIAccessibilityHint

BBC Olympics Access services

Changes of state i.e.

> Tab panel> Open / close

Announce changes ...

> Update the alternative> Visible change

BBC Olympics Access services

Compromises …

> Pinch zoom> Assets – arrows> 3rd party content

“This is extremely accessible with VoiceOver, and there is plenty to indicate this is by design rather than chance.Applevis

BBC Sports App

BBC Olympics Video

However accessible the IVP we felt we couldn’t predict if people would like it, or find it easy to use – e.g screen reader users, people with cognitive issuesWe wanteed to offer a choice of player rather than ghetto-ise disabled users

Lessons Learnt

BBC Olympics Access services

Lessons Learnt

> Progressive Enhancement is key> Easy to introduce issues at all levels> 100% accessible not realistic - need to prioritise

> Documentation> Sign off at UX> A variety of testing

You don’t need to compromise design for accessibility

Alistair Dugginhttp://alistairduggin.co.uk/@dugboticus

Henny Swanhttp://iheni.com/@iheni