How do you make a website as ambitious as the BBC Olympics accessible? This presentation shares the challenges faced, approaches used and lessons learned. Alistair Duggin, Lead Front-end Developer, BBC Henny Swan, Senior Accessibility Specialist, BBC A video and transcript of a shorter 10 minute version of the presentation is available at: http://alistairduggin.co.uk/blog/presentation-olympics-accessibility-bbc-fusion

1. BBC Olympics
An accessibility case study
Al Duggin and Henny Swan
CSUN 2013

2. BBC Olympics Introduction
> About the Project
> Accessibility at the BBC
> Challenges
> Desktop and Tablet
> Video
> Mobile
> Lessons Learnt

3. About the Project

4. BBC Olympics About the Project
The first truly digital Olympics.
Never miss a moment
The most ambitious and comprehensive BBC digital project to date
Live and catch-up video at the heart of the BBC’s online coverage
24 high definition live streams
2500 hours of video coverage
Delivered to mobile, tablet, PC, and Connected TV
The first truly digital Olympics where the public would be able to 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 the sports domain
Athlete Country
Usain Bolt Jamaica
Event Venue
Men’s 100m Olympic Stadium
Sport
Athletics
Interconnected nodes
Athlete - e.g Usain Bolt
Country - e.g Jamaica
Sport - e.g Athletics
Event - e.g Men’s 100m
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

8. Page composed of components, including:
Facts and Figures
News
Video
Medals
Schedule
Results

9. 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 athletes
Twitter modules
Components to promote live video streams
Carousel of to promote athletes and results

10. Each page type had an index page.
Countries.

11. Athletes - and the ability to filter by sport, event

12. Venues

13. Sports

14. An event index for each
sport

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

16. The schedule list view provided a more accessible text interface

17. The schedule allowed users to dig in and browse by sport

18. or by day

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

20. medal by
sport

21. And medals by
athlete

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

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

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

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

26. Article
pages

27. Video
clips

28. Image
galleries

29. Live event commentary

30. Lots of this was also available on mobile

31. And all video and medals were available on connected TV

32. Tens of thousands of pages ...
possibly hundreds....

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

34. Accessibility at the BBC

35. BBC Olympics Accessibility
Accessibility at the BBC
> BBC Trust and Charter
> Lead by example
> License fee

36. BBC Olympics Accessibility
“
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

37. Challenges

38. BBC Olympics Challenges
Accessibility consultant challenges ...
> Size - web, mobile, video
> Standards and guidelines
> Training
> Ownership and responsibility

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

40. Desktop and Tablet

41. 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 AbilityNet
Aria, javascript and HTML5 training with The Paciello Group - based around upcoming components
Support forum for a month - to answer questions
Work with milestones: test early, test often

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

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

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

45. BBC Olympics Desktop and Tablet
Open standards and Content
Progressive Enhancement 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

46. BBC Olympics Desktop and Tablet
Content
> Add content in logical order
> Alt text for images that need it Content
> Captions for tables HTML & WAI-ARIA
> Full text for abbreviations CSS
> Inline img or bg css
JavaScript & HTML
CSS for Javascript
WAI-ARIA for Javascript

47. BBC Olympics Desktop and Tablet
HTML
> Add hierarchical heading structure
>
Content
Use most appropriate elements
> Use HTML5 elements with care HTML & WAI-ARIA
> Don’t duplicate links CSS
> Alt text but don’t duplicate
JavaScript & HTML
> Links make sense out of context
> Code tables correctly CSS for Javascript
> Code forms correctly WAI-ARIA for Javascript
> ARIA roles & attributes where useful
> If visual state make sure it’s also read out
> Validate
Semantically structured
HTML

48. BBC Olympics Desktop and Tablet
CSS
> Take care with display:none
>
Content
Focus aswell as hover - no outline:0
> Font size +2 HTML & WAI-ARIA
> Don’t use !important CSS
> Implement non-js layout
JavaScript & HTML
> Check for colour contrast
> Check with images off CSS for Javascript
WAI-ARIA for Javascript
Take care to not implement barriers with CSS

49. BBC Olympics Desktop and Tablet
JavaScript
> Feature detection
>
Content
Valid JS generated HTML
> Update state labels - open/close HTML & WAI-ARIA
> Hijax - http before ajax CSS
> Update screenreader virtual buffer
JavaScript & HTML
> Keyboard access to all conent
> No keyboard traps CSS for Javascript
WAI-ARIA for Javascript

50. BBC Olympics Desktop and Tablet
CSS for Javascript
> Contextual CSS body=”js”
Content
> Prevent flicker as js loads
HTML & WAI-ARIA
CSS
JavaScript & HTML
CSS for Javascript
WAI-ARIA for Javascript

51. BBC Olympics Desktop and Tablet
WAI-ARIA for Javascript
> Keep users informed
>
Content
Manage focus
> Implement keyboard controls HTML & WAI-ARIA
> Provide hidden instructions CSS
> Use WAI-ARIA attributes where
JavaScript & HTML
appropriate
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

52. Sometimes not possible to have a non-js version
- schedule module
- favourites tray
That’s fine - you need to be pragmatic!

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

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

55. BBC Olympics Desktop and Tablet
Fixed: Colour contrast
Problem - Design/CSS
Failed colour contrast test
Fix:
Changed colours

56. BBC Olympics Desktop and Tablet
Fixed: Over complicated markup
PROBLEM: HTML
Aural clutter - headings inside lists
FIX:
Refactor HTML

57. BBC Olympics Desktop and Tablet
Fixed: Broken navigation when resized
Problem - Design/CSS
Failed colour contrast test
Fix:
Changed colours

58. BBC Olympics Desktop and Tablet
Fixed: Favourite Button
Problem: HTML generated by JS
span used instead of div
Fix:
Feedback issue - got them to use a button

59. BBC Olympics Desktop and Tablet
Fixed: Keyboard inaccessible video clips
Problem: JS generating span instead of link
Unable to play video with keyboard as span used instead of button
Fix:
Added in a link to control video

60. BBC Olympics Desktop and Tablet
Fixed: Unexpected keyboard controls
Problem: JS
keyboard events attached to arrow keys
Fix:
Removed keyboard event

61. BBC Olympics Desktop and Tablet
Fixed: Keyboard trap
Problem: JS
Infinite scroll resulted in keyboard trap

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

63. BBC Olympics Desktop and Tablet
Compromise: Colour only medals
Problem: medal communicated by colour only
If colour blind won’t know what medal
Why not fixed:
Design didn’t want to change

64. BBC Olympics Desktop and Tablet
Compromise: Country page content order
Problem: Design/logical content order
Design meant not in logical order
Fix:
Designers didn’t want to change design

65. BBC Olympics Desktop and Tablet
Compromise: Indistinguishable Links
Problem: Design/CSS
Can’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.

66. BBC Olympics Desktop and Tablet
Compromise: Info graphics
<img src=”rivals.jpg”
alt=”Bolt graphic” />
Problem: adequate alternate text not provided
Lots of information in graphic - editorial didn’t include adequate descriptive alt text

67. BBC Olympics Desktop and Tablet
Compromise: Auto Suggest not read out
Problem: Javascript
Suggested athletes not read out
Why not fixed:
Not part of stable release of jquery ui. Ran out of time.

68. BBC Olympics Desktop and Tablet
Compromise: Auto refresh
Problem: JS
Can’t turn off auto-refresh
Completely unusable by screen reader user
Use of non-semantic markup
Why not fixed:
Built by an3rd Party. Fed back issues but they didn’t have time/inclination to fix

69. Video

70. BBC Olympics Video
The Interactive Media Player
> BBC Sole rights holder
> 24 live streams
> Flash player
> Fully immersive ‘lean back’ experience

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

72. Pause and rewind live streams

73. Jump to key
moments

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

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

76. When in full screen you could access alternative video streams
Fully immersive

77. 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 Guidelines
BBC S&G – not enough, needed to be project specific which lead to
In depth requirements & UAC
Also commissioned user testing

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

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

84. BBC Olympics Video
Choice
“
Noun: An act of selecting or making a decision
when faced with two or more possibilities.
Oxford English Dictionary
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 issues
We wanteed to offer a choice of player rather than ghetto-ise disabled users

85. BBC Olympics Video
An additional player, not an alternative player
Tender – referenced BBCS&G, Flash Media player and screen reader support Guidelines
BBC S&G – not enough, needed to be project specific which lead to
In depth requirements & UAC
Also commissioned user testing
ZoomText Windows XP

86. HTML player – Flash playback, HTML controls
Drawback – no controls in full screen

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

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

89. h2
Accessible tooltips:
<span>Watch with extra features in the page</span>
Visible on mouseover and focus
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

90. h2
Accessible tooltips:
<span>Watch with extra features in the page</span>
Visible on mouseover and focus
Help link further described what the differences were

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

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

93. Escape to access controls
Set 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.

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

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

96. Mobile

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

98. BBC Olympics Access services
The challenge …
> Expertise & experience
> Standards & guidelines
> Testing & evaluation

99. BBC Olympics Access services
BBC Mobile Accessibility Guidelines …
> Technology agnostic standards and guidelines
> HTML, iOS and Android techniques
> Evaluation criteria

100. BBC Olympics Access services
Approach …
> Use standard not custom components
> Progressive enhancement
> Follow platform specific guidelines

101. BBC Olympics Access services
Structure …
> H1 – H6
> Landmarks
> Data tables

102. BBC Olympics Access services
Alternatives …
> HTML: alt
> Android: contentDescription
> iOS:
> UIAccessibilityLabel
> UIAccessibilityTrait
> UIAccessibilityHint

103. BBC Olympics Access services
Changes of state i.e.
> Tab panel
> Open / close
Announce changes ...
> Update the alternative
> Visible change

104. BBC Olympics Access services
Compromises …
> Pinch zoom
> Assets – arrows
> 3rd party content

105. BBC Olympics Video
BBC Sports App
“
This is extremely accessible with VoiceOver,
and there is plenty to indicate this is by
design rather than chance.
Applevis
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 issues
We wanteed to offer a choice of player rather than ghetto-ise disabled users

106. Lessons Learnt

107. BBC Olympics Access services
Lessons Learnt
> Documentation
> Sign off at UX
> A variety of testing
> Progressive Enhancement is key
> Easy to introduce issues at all levels
> 100% accessible not realistic - need to prioritise
You don’t need to compromise design for accessibility

108. Alistair Duggin
http://alistairduggin.co.uk/
@dugboticus
Henny Swan
http://iheni.com/
@iheni