BBC Olympics An accessibility case study

!

!

!

!Alistair Duggin

!World Usability Day 2013 Bristol - November 2013

BBC Olympics Introduction

Alistair Duggin, Lead Front End Developer, BBC Sport Olympics Desktop Website !

> About the Project > Challenges > Desktop and Tablet > Lessons Learnt

About the Project

BBC Olympics About the Project

The first truly digital Olympics. 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 a sports ontology

AthleteUsain Bolt

EventMen’s 100m

SportAthletics

VenueOlympic Stadium

CountryJamaica

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

BBC Olympics About the Project

Lots of other components

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

Tens of thousands of pages ...

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

Challenges

BBC Olympics Challenges

Developer challenges ...

Accessible to all > Size of project > Immovable deadline > 17 day event > Huge audience > High Profile > Real-time data > Up front design > Lots of javascript > Multiple teams > Mixed knowledge of accessibility on teams

BBC Olympics Challenges

What is accessibility?

A range of capabilities > Visual > Auditory > Motor > Cognitive

Characteristics of accessibility > Perceivable > Operable > Understandable > Robust

Desktop and Tablet

BBC Olympics Desktop and Tablet

The Development approach

> Build with accessibility in mind - from the start > Speak to specialists early > Training - screen readers, WAI-ARIA > Set up a support network and share best practices > Front-end developers create UI before integration > Brainstorm multiple solutions and seek feedback > Agile > Test thoroughly > Component library > Web Standards and Progressive Enhancement

!

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

Web standards and Progressive Enhancement

Content

HTML & WAI-ARIA

CSS

JavaScript & HTML

CSS for Javascript

WAI-ARIA for Javascript

BBC Olympics Desktop and Tablet

> Add content in logical order > Alt text for images that need it > Captions for tables > Full text for abbreviations

!

Content

Content

HTML & WAI-ARIA

CSS

JavaScript & HTML

CSS for Javascript

WAI-ARIA for Javascript

BBC Olympics Desktop and Tablet

> Use most appropriate elements > Add hierarchical heading structure > Add content images > Don’t duplicate links > Links make sense out of context > Code tables correctly > Code forms correctly > ARIA roles & attributes where useful > Validate !

Core functionality available through links and forms

HTML

Content

HTML & WAI-ARIA

CSS

JavaScript & HTML

CSS for Javascript

WAI-ARIA for Javascript

BBC Olympics Desktop and Tablet

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

layer

CSS

Content

HTML & WAI-ARIA

CSS

JavaScript & HTML

CSS for Javascript

WAI-ARIA for Javascript

BBC Olympics Desktop and Tablet

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

content > Check 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 (live regions) > Manage focus (tabindex 0 and -1) > Implement keyboard controls > Use appropriate WAI-ARIA

attributes - roles, states and properties

> Provide hidden instructions

WAI-ARIA for Javascript

Content

HTML & WAI-ARIA

CSS

JavaScript & HTML

CSS for Javascript

WAI-ARIA for Javascript

BBC Olympics Desktop and Tablet

Issues we fixed...

BBC Olympics Desktop and Tablet

Fixed: Colour contrast

BBC Olympics Desktop and Tablet

Fixed: Over complicated markup

BBC Olympics Desktop and Tablet

Fixed: Broken navigation when resized

BBC Olympics Desktop and Tablet

Fixed: Favourite Button

BBC Olympics Desktop and Tablet

Fixed: Keyboard inaccessible video clips

BBC Olympics Desktop and Tablet

Fixed: Keyboard trap

BBC Olympics Desktop and Tablet

Issues that got released...

BBC Olympics Desktop and Tablet

Compromise: Colour only medals

BBC Olympics Desktop and Tablet

Compromise: Country page content order

BBC Olympics Desktop and Tablet

Compromise: Indistinguishable Links

BBC Olympics Desktop and Tablet

Compromise: Info graphics

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

BBC Olympics Desktop and Tablet

Compromise: Auto Suggest not read out

BBC Olympics Desktop and Tablet

Compromise: Auto refresh

Lessons Learnt

BBC Olympics Access services

Lessons Learnt

> Team effort - every role has a responsibility > Easy to introduce issues at all levels > Collaborate > Seek help from specialists > Progressive Enhancement is good > Test early and often > 100% accessible not realistic - need to prioritise > Accessibility does not have to compromise design

Alistair Duggin http://alistairduggin.co.uk/@dugboticus!

!