BBC Olympics: An accessibility case study

26,313 views

Published on

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

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

No Downloads
Views
Total views
26,313
On SlideShare
0
From Embeds
0
Number of Embeds
598
Actions
Shares
0
Downloads
58
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

BBC Olympics: An accessibility case study

  1. 1. BBC OlympicsAn accessibility case study Al Duggin and Henny Swan CSUN 2013
  2. 2. BBC Olympics Introduction > About the Project > Accessibility at the BBC > Challenges > Desktop and Tablet > Video > Mobile > Lessons Learnt
  3. 3. About the Project
  4. 4. BBC Olympics About the Project The first truly digital Olympics. Never miss a momentThe most ambitious and comprehensive BBC digital project to dateLive and catch-up video at the heart of the BBC’s online coverage24 high definition live streams2500 hours of video coverageDelivered to mobile, tablet, PC, and Connected TVThe first truly digital Olympics where the public would be able to never miss a moment
  5. 5. “Our aspiration was that just as the Coronation did for TV in1953, the Olympics would do for digital in 2012Phil Fearnley, General Manager, News & Knowledge at BBC
  6. 6. BBC Olympics About the Project Built around the sports domain Athlete Country Usain Bolt Jamaica Event Venue Men’s 100m Olympic Stadium Sport AthleticsInterconnected nodesAthlete - e.g Usain BoltCountry - e.g JamaicaSport - e.g AthleticsEvent - e.g Men’s 100mVenue - Olympic Stadium
  7. 7. BBC Olympics About the ProjectA page per domain item > 10, 000 Athlete > 205 Countries > 36 Sports > 304 Medal Winning Events > 30 Venues... all interconnected
  8. 8. Page composed of components, including:Facts and FiguresNewsVideoMedalsScheduleResults
  9. 9. BBC Olympics About the Project Lots of other componentsMake the experience as rich, engaging and interactive as possible.Top trump style comparison components for countries athletesTwitter modulesComponents to promote live video streamsCarousel of to promote athletes and results
  10. 10. Each page type had an index page.Countries.
  11. 11. Athletes - and the ability to filter by sport, event
  12. 12. Venues
  13. 13. Sports
  14. 14. An event index for eachsport
  15. 15. 2 versions of a fully comprehensive schedule - a grid and a list view - providing alternative ways to get to the schedule informationthat you wanted.The schedule grid view provided an easily scannable visual interface
  16. 16. The schedule list view provided a more accessible text interface
  17. 17. The schedule allowed users to dig in and browse by sport
  18. 18. or by day
  19. 19. We also had Interactive medal tables.That allowed users to browser medals by country
  20. 20. medal bysport
  21. 21. And medals byathlete
  22. 22. These pages were dynamically updated in real timeusing data from the Olympics Broadcasting Service.
  23. 23. Other features included the interactive video player to watch live and on-demand video
  24. 24. A results section, providing by a 3rd Party, that contained details of every heat of every event.
  25. 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. 26. Articlepages
  27. 27. Videoclips
  28. 28. Imagegalleries
  29. 29. Live event commentary
  30. 30. Lots of this was also available on mobile
  31. 31. And all video and medals were available on connected TV
  32. 32. Tens of thousands of pages ...possibly hundreds....
  33. 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 mobileWe knew the website was going to be popular - but I don’t think anyone imagined it would be quite the success it was.
  34. 34. Accessibility at the BBC
  35. 35. BBC Olympics AccessibilityAccessibility at the BBC > BBC Trust and Charter > Lead by example > License fee
  36. 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. 37. Challenges
  38. 38. BBC Olympics ChallengesAccessibility consultant challenges ... > Size - web, mobile, video > Standards and guidelines > Training > Ownership and responsibility
  39. 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 teamsHuge 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 workedon where this was made a clear priority right from the very top. Easier said than done.
  40. 40. Desktop and Tablet
  41. 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 EnhancementScreen reader training with AbilityNetAria, javascript and HTML5 training with The Paciello Group - based around upcoming componentsSupport forum for a month - to answer questionsWork with milestones: test early, test often
  42. 42. One of the first things we did when was analyse the designs looking for common styles and patterns that could be abstracted outinto reusable code.This helps you build things faster.Also helps a consistency of implementation which is better for users
  43. 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 getcomponents 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 meantthat we could ask Henny to test things as soon as they were built - rather than having to wait for the components to appear on webpages that were being driven by test data.
  44. 44. BBC Olympics Desktop and TabletPage Templates > HTML5 doctype > Lang attribute > Skips links > Unique title > Unique h1 > WAI-ARIA landmark roles
  45. 45. BBC Olympics Desktop and Tablet Open standards and Content Progressive Enhancement HTML & WAI-ARIA CSS JavaScript & HTML CSS for Javascript WAI-ARIA for JavascriptProgressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a webpage
  46. 46. BBC Olympics Desktop and TabletContent > 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. 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 > ValidateSemantically structuredHTML
  48. 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 JavascriptTake care to not implement barriers with CSS
  49. 49. BBC Olympics Desktop and TabletJavaScript > 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. 50. BBC Olympics Desktop and TabletCSS 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. 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 JavascriptKeep users informed - loading, new contentTreat aria as an enhancement - not widespread support or familiarity by users
  52. 52. Sometimes not possible to have a non-js version- schedule module- favourites trayThat’s fine - you need to be pragmatic!
  53. 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. 54. BBC Olympics Desktop and TabletIssues we fixed...
  55. 55. BBC Olympics Desktop and Tablet Fixed: Colour contrastProblem - Design/CSSFailed colour contrast testFix:Changed colours
  56. 56. BBC Olympics Desktop and Tablet Fixed: Over complicated markupPROBLEM: HTMLAural clutter - headings inside listsFIX:Refactor HTML
  57. 57. BBC Olympics Desktop and Tablet Fixed: Broken navigation when resizedProblem - Design/CSSFailed colour contrast testFix:Changed colours
  58. 58. BBC Olympics Desktop and Tablet Fixed: Favourite ButtonProblem: HTML generated by JSspan used instead of divFix:Feedback issue - got them to use a button
  59. 59. BBC Olympics Desktop and Tablet Fixed: Keyboard inaccessible video clipsProblem: JS generating span instead of linkUnable to play video with keyboard as span used instead of buttonFix:Added in a link to control video
  60. 60. BBC Olympics Desktop and Tablet Fixed: Unexpected keyboard controlsProblem: JSkeyboard events attached to arrow keysFix:Removed keyboard event
  61. 61. BBC Olympics Desktop and Tablet Fixed: Keyboard trapProblem: JSInfinite scroll resulted in keyboard trap
  62. 62. BBC Olympics Desktop and TabletIssues that got released...
  63. 63. BBC Olympics Desktop and Tablet Compromise: Colour only medalsProblem: medal communicated by colour onlyIf colour blind won’t know what medalWhy not fixed:Design didn’t want to change
  64. 64. BBC Olympics Desktop and Tablet Compromise: Country page content orderProblem: Design/logical content orderDesign meant not in logical orderFix:Designers didn’t want to change design
  65. 65. BBC Olympics Desktop and Tablet Compromise: Indistinguishable LinksProblem: Design/CSSCan’t see links until you roll over themWhy not fixed:Changed by another team due to request from design. Ran out of time to chase up.
  66. 66. BBC Olympics Desktop and Tablet Compromise: Info graphics <img src=”rivals.jpg” alt=”Bolt graphic” />Problem: adequate alternate text not providedLots of information in graphic - editorial didn’t include adequate descriptive alt text
  67. 67. BBC Olympics Desktop and Tablet Compromise: Auto Suggest not read outProblem: JavascriptSuggested athletes not read outWhy not fixed:Not part of stable release of jquery ui. Ran out of time.
  68. 68. BBC Olympics Desktop and Tablet Compromise: Auto refreshProblem: JSCan’t turn off auto-refreshCompletely unusable by screen reader userUse of non-semantic markupWhy not fixed:Built by an3rd Party. Fed back issues but they didn’t have time/inclination to fix
  69. 69. Video
  70. 70. BBC Olympics VideoThe Interactive Media Player > BBC Sole rights holder > 24 live streams > Flash player > Fully immersive ‘lean back’ experience
  71. 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. 72. Pause and rewind live streams
  73. 73. Jump to keymoments
  74. 74. Switch between live streams, with video still playing in the background
  75. 75. Switch between live streams, with video still playing in the background
  76. 76. When in full screen you could access alternative video streamsFully immersive
  77. 77. BBC Olympics Video Approach … > Tender & Contract > BBC Standards & Guidelines > Requirements & User Acceptance Criteria > In house testing > User testing with disabled usersTender – referenced BBCS&G, Flash Media player and screen reader support GuidelinesBBC S&G – not enough, needed to be project specific which lead toIn depth requirements & UACAlso commissioned user testing
  78. 78. 150 page document outlining tab order, labels, tooltips and logic of the video player for sighted keyboard only users and screen reader users
  79. 79. BBC Olympics Video Requirements … > No autoplay > No background image interference > No flashing > Contrast > Text sizeAutoplay loved by some ZoomText users but a showstopper for Jaws users with no sight
  80. 80. BBC Olympics Video Choice “ Noun: An act of selecting or making a decision when faced with two or more possibilities. Oxford English DictionaryHowever 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, peoplewith cognitive issuesWe wanteed to offer a choice of player rather than ghetto-ise disabled users
  81. 81. BBC Olympics Video An additional player, not an alternative playerTender – referenced BBCS&G, Flash Media player and screen reader support GuidelinesBBC S&G – not enough, needed to be project specific which lead toIn depth requirements & UACAlso commissioned user testingZoomText Windows XP
  82. 82. HTML player – Flash playback, HTML controlsDrawback – no controls in full screen
  83. 83. User testing – NB ‘Accessible version’ and ‘Default version’ was used-Labels not well understood-Participants didn’t think ‘Accessible version’ was for them
  84. 84. h2IVP option links were not easily found – Added as H2 to ‘Choose how you watch
  85. 85. h2 Accessible tooltips: <span>Watch with extra features in the page</span> Visible on mouseover and focusUser testing – NB ‘Accessible version’ and ‘Default version’ was used-Labels not well understood-Participants didn’t think ‘Accessible version’ was for themFor this audience, it is better to describe the functionality of alternative versions rather than the people it is for
  86. 86. h2 Accessible tooltips: <span>Watch with extra features in the page</span> Visible on mouseover and focusHelp link further described what the differences were
  87. 87. 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 wesettled for 1.
  88. 88. Icons were well received – big and clear.We did go through various iterations to see what would be best however
  89. 89. Escape to access controls Set focus to Play/PauseIcons 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 wesettled for 1.
  90. 90. BBC Olympics VideoAccess 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
  91. 91. BBC Olympics Video Compromises … > IVP not as accessible as planned > Immovable deadline > Decided not to promote it as accessibleIn user testing the majority of testers preferred the default version and ability to use full screen. Most were not expecting extrasand were happy to sit back and watch the video.
  92. 92. Mobile
  93. 93. BBC Olympics Access servicesWe offered … > Mobile website > Apps: Android 2.2 + and iOS 5 + > Offline storage >Personalisation > Shortcut on Blackberry > Live and catch up video
  94. 94. BBC Olympics Access servicesThe challenge … > Expertise & experience > Standards & guidelines > Testing & evaluation
  95. 95. BBC Olympics Access servicesBBC Mobile Accessibility Guidelines … > Technology agnostic standards and guidelines > HTML, iOS and Android techniques > Evaluation criteria
  96. 96. BBC Olympics Access servicesApproach … > Use standard not custom components > Progressive enhancement > Follow platform specific guidelines
  97. 97. BBC Olympics Access servicesStructure … > H1 – H6 > Landmarks > Data tables
  98. 98. BBC Olympics Access servicesAlternatives … > HTML: alt > Android: contentDescription > iOS: > UIAccessibilityLabel > UIAccessibilityTrait > UIAccessibilityHint
  99. 99. BBC Olympics Access servicesChanges of state i.e. > Tab panel > Open / closeAnnounce changes ... > Update the alternative > Visible change
  100. 100. BBC Olympics Access servicesCompromises … > Pinch zoom > Assets – arrows > 3rd party content
  101. 101. 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. ApplevisHowever 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, peoplewith cognitive issuesWe wanteed to offer a choice of player rather than ghetto-ise disabled users
  102. 102. Lessons Learnt
  103. 103. 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 prioritiseYou don’t need to compromise design for accessibility
  104. 104. Alistair Dugginhttp://alistairduggin.co.uk/@dugboticusHenny Swanhttp://iheni.com/@iheni

×