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
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 2012

Phil Fear...
BBC Olympics About the Project

Built around a sports ontology
Athlete
Usain Bolt

Event
Men’s 100m

Sport
Athletics

Coun...
BBC Olympics About the Project

A page per domain item
>
>
>
>
>

10, 000 Athlete	

205 Countries	

36 Sports	

304 Medal ...
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 glo...
Challenges
BBC Olympics Challenges

Developer challenges ...
Accessible to all
> Size of project	

> Immovable deadline	

> 17 day ev...
BBC Olympics Challenges

What is accessibility?
A range of capabilities	

> Visual	

> Auditory	

> Motor	

> Cognitive
Ch...
Desktop and Tablet
BBC Olympics Desktop and Tablet

The Development approach
>
>
>
>
>
>
>
>
>
>

Build with accessibility in mind - from the...
BBC Olympics Desktop and Tablet

Page Templates
>
>
>
>
>
>

HTML5 doctype	

Lang attribute	

Skips links 	

Unique title	...
BBC Olympics Desktop and Tablet

Web standards and 

Progressive Enhancement

Content
HTML & WAI-ARIA
CSS
JavaScript & HTM...
BBC Olympics Desktop and Tablet

Content
>
>
>
>

Add content in logical order	

Alt text for images that need it	

Captio...
BBC Olympics Desktop and Tablet

HTML
>
>
>
>
>
>
>
>
>

Use most appropriate elements 	

Add hierarchical heading structu...
BBC Olympics Desktop and Tablet

CSS
>
>
>
>
>
>
>
>
>

Implement non-js layout 	

Take care with display:none	

Focus asw...
BBC Olympics Desktop and Tablet

JavaScript
>
>
>
>
>
>

Feature detection	

Valid JS generated HTML	

Update state labels...
BBC Olympics Desktop and Tablet

CSS for Javascript
body=”js”	

> Contextual CSS
> Prevent flicker as js loads

Content
HTM...
BBC Olympics Desktop and Tablet

WAI-ARIA for Javascript
>
>
>
>

Keep users informed (live regions)	

Manage focus (tabin...
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 intr...
Alistair Duggin
http://alistairduggin.co.uk/

@dugboticus

!
!
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
BBC Olympics: An Accessibility Study
Upcoming SlideShare
Loading in …5
×

BBC Olympics: An Accessibility Study

1,048
-1

Published on

Alistair Duggin speaks at World Usability Day 2013 Bristol on 14th November 2013.

How do you make a website as ambitious as the BBC Olympics accessible? This presentation shares the challenges faced, approaches used and lessons learned.

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,048
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

BBC Olympics: An Accessibility Study

  1. 1. BBC Olympics An accessibility case study ! ! ! ! Alistair Duggin ! World Usability Day 2013 Bristol - November 2013
  2. 2. BBC Olympics Introduction Alistair Duggin, Lead Front End Developer, BBC Sport Olympics Desktop Website ! > > > > About the Project Challenges Desktop and Tablet Lessons Learnt
  3. 3. About the Project
  4. 4. BBC Olympics About the Project The first truly digital Olympics. Never miss a moment
  5. 5. “ Our aspiration was that just as the Coronation did for TV in 1953, the Olympics would do for digital in 2012 Phil Fearnley, General Manager, News & Knowledge at BBC
  6. 6. BBC Olympics About the Project Built around a sports ontology Athlete Usain Bolt Event Men’s 100m Sport Athletics Country Jamaica Venue Olympic Stadium
  7. 7. BBC Olympics About the Project A page per domain item > > > > > 10, 000 Athlete 205 Countries 36 Sports 304 Medal Winning Events 30 Venues ... all interconnected
  8. 8. BBC Olympics About the Project Lots of other components
  9. 9. These pages were dynamically updated in real time using data from the Olympics Broadcasting Service.
  10. 10. Tens of thousands of pages ...
  11. 11. 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
  12. 12. Challenges
  13. 13. 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
  14. 14. BBC Olympics Challenges What is accessibility? A range of capabilities > Visual > Auditory > Motor > Cognitive Characteristics of accessibility > Perceivable > Operable > Understandable > Robust
  15. 15. Desktop and Tablet
  16. 16. 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 !
  17. 17. BBC Olympics Desktop and Tablet Page Templates > > > > > > HTML5 doctype Lang attribute Skips links Unique title Unique h1 WAI-ARIA landmark roles
  18. 18. BBC Olympics Desktop and Tablet Web standards and Progressive Enhancement Content HTML & WAI-ARIA CSS JavaScript & HTML CSS for Javascript WAI-ARIA for Javascript
  19. 19. BBC Olympics Desktop and Tablet Content > > > > Add content in logical order Alt text for images that need it Captions for tables Full text for abbreviations Content HTML & WAI-ARIA CSS ! JavaScript & HTML CSS for Javascript WAI-ARIA for Javascript
  20. 20. BBC Olympics Desktop and Tablet HTML > > > > > > > > > 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 Content HTML & WAI-ARIA CSS JavaScript & HTML CSS for Javascript WAI-ARIA for Javascript ! Core functionality available through links and forms

  21. 21. BBC Olympics Desktop and Tablet CSS > > > > > > > > > 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 Content HTML & WAI-ARIA CSS JavaScript & HTML CSS for Javascript WAI-ARIA for Javascript
  22. 22. BBC Olympics Desktop and Tablet JavaScript > > > > > > 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 Content HTML & WAI-ARIA CSS JavaScript & HTML CSS for Javascript WAI-ARIA for Javascript
  23. 23. BBC Olympics Desktop and Tablet CSS for Javascript body=”js” > Contextual CSS > Prevent flicker as js loads Content HTML & WAI-ARIA CSS JavaScript & HTML CSS for Javascript WAI-ARIA for Javascript
  24. 24. BBC Olympics Desktop and Tablet WAI-ARIA for Javascript > > > > 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 Content HTML & WAI-ARIA CSS JavaScript & HTML CSS for Javascript WAI-ARIA for Javascript
  25. 25. BBC Olympics Desktop and Tablet Issues we fixed...
  26. 26. BBC Olympics Desktop and Tablet Fixed: Colour contrast
  27. 27. BBC Olympics Desktop and Tablet Fixed: Over complicated markup
  28. 28. BBC Olympics Desktop and Tablet Fixed: Broken navigation when resized
  29. 29. BBC Olympics Desktop and Tablet Fixed: Favourite Button
  30. 30. BBC Olympics Desktop and Tablet Fixed: Keyboard inaccessible video clips
  31. 31. BBC Olympics Desktop and Tablet Fixed: Keyboard trap
  32. 32. BBC Olympics Desktop and Tablet Issues that got released...
  33. 33. BBC Olympics Desktop and Tablet Compromise: Colour only medals
  34. 34. BBC Olympics Desktop and Tablet Compromise: Country page content order
  35. 35. BBC Olympics Desktop and Tablet Compromise: Indistinguishable Links
  36. 36. BBC Olympics Desktop and Tablet Compromise: Info graphics <img src=”rivals.jpg” alt=”Bolt graphic” />
  37. 37. BBC Olympics Desktop and Tablet Compromise: Auto Suggest not read out
  38. 38. BBC Olympics Desktop and Tablet Compromise: Auto refresh
  39. 39. Lessons Learnt
  40. 40. 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
  41. 41. Alistair Duggin http://alistairduggin.co.uk/ @dugboticus ! !
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×