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!
!
Top Related