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.

1. BBC Olympics
An accessibility case study
!
!
!
!
Alistair Duggin
!
World Usability Day 2013 Bristol - November 2013

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. About the Project

4. BBC Olympics About the Project
The first truly digital Olympics.
Never miss a moment

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

9. BBC Olympics About the Project
Lots of other components

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

32. Tens of thousands of pages ...

33. 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

34. Challenges

35. 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

36. BBC Olympics Challenges
What is accessibility?
A range of capabilities
> Visual
> Auditory
> Motor
> Cognitive
Characteristics of accessibility
> Perceivable
> Operable
> Understandable
> Robust

37. Desktop and Tablet

38. 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
!

41. BBC Olympics Desktop and Tablet
Page Templates
>
>
>
>
>
>
HTML5 doctype
Lang attribute
Skips links
Unique title
Unique h1
WAI-ARIA landmark roles

42. BBC Olympics Desktop and Tablet
Web standards and
Progressive Enhancement
Content
HTML & WAI-ARIA
CSS
JavaScript & HTML
CSS for Javascript
WAI-ARIA for Javascript

43. 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

44. 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

45. 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

46. 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

47. 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

48. 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

51. BBC Olympics Desktop and Tablet
Issues we fixed...

52. BBC Olympics Desktop and Tablet
Fixed: Colour contrast

53. BBC Olympics Desktop and Tablet
Fixed: Over complicated markup

54. BBC Olympics Desktop and Tablet
Fixed: Broken navigation when resized

55. BBC Olympics Desktop and Tablet
Fixed: Favourite Button

56. BBC Olympics Desktop and Tablet
Fixed: Keyboard inaccessible video clips

57. BBC Olympics Desktop and Tablet
Fixed: Keyboard trap

58. BBC Olympics Desktop and Tablet
Issues that got released...

59. BBC Olympics Desktop and Tablet
Compromise: Colour only medals

60. BBC Olympics Desktop and Tablet
Compromise: Country page content order

61. BBC Olympics Desktop and Tablet
Compromise: Indistinguishable Links

62. BBC Olympics Desktop and Tablet
Compromise: Info graphics
<img src=”rivals.jpg”
alt=”Bolt graphic” />

63. BBC Olympics Desktop and Tablet
Compromise: Auto Suggest not read out

64. BBC Olympics Desktop and Tablet
Compromise: Auto refresh

65. Lessons Learnt

66. 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

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