BBC Olympics: An accessibility case study

1,496 views
1,412 views

Published on

Presented at London Web Standards September 16th 2013

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

No Downloads
Views
Total views
1,496
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
11
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • 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 streams2500 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
  • Interconnected nodes Athlete - e.g Usain BoltCountry - e.g JamaicaSport - e.g AthleticsEvent - e.g Men’s 100mVenue - Olympic Stadium
  • Page composed of components, including: Facts and Figures News Video Medals Schedule Results
  • 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
  • Each page type had an index page. Countries.
  • Athletes - and the ability to filter by sport, event
  • Venues
  • Sports
  • An event index for each sport
  • 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
  • The schedule list view provided a more accessible text interface
  • The schedule allowed users to dig in and browse by sport
  • or by day
  • We also had Interactive medal tables. That allowed users to browser medals by country
  • medal by sport
  • And medals by athlete
  • Other features included the interactive video player to watch live and on-demand video
  • A results section, providing by a 3rd Party, that contained details of every heat of every event.
  • 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.
  • Article pages
  • Video clips
  • Image galleries
  • Live event commentary
  • Lots of this was also available on mobile
  • And all video and medals were available on connected TV 24 high definition live streams2500 hours of video coverage
  • possibly hundreds....
  • We knew the website was going to be popular - but I don’t think anyone imagined it would be quite the success it was.
  • 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. Australian olympics website had been sued in 2004 for being inaccessible. Easier said than done.
  • Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities - irrespective of the device they are using
  • 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
  • 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
  • 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.
  • Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page
  • Semantically structured HTML
  • Take care to not implement barriers with CSS
  • Keep users informed - loading, new content Treat aria as an enhancement - not widespread support or familiarity by users
  • Sometimes not possible to have a non-js version- schedule module- favourites tray That’s fine - you need to be pragmatic! Follow as similar approach though - content in logical order, semantic and valid markup, avoid css gotchas, manage keyboard focus etc
  • 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
  • Problem - Design/CSS Failed colour contrast test Fix: Changed colours
  • PROBLEM: HTML Aural clutter - headings inside lists FIX: Refactor HTML
  • Problem - Design/CSS Failed colour contrast test Fix: Changed colours
  • Problem: HTML generated by JS span used instead of div - can’t receive keyboard focus Fix: Feedback issue - got them to use a button
  • 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
  • Problem: JS Infinite scroll resulted in keyboard trap
  • Problem: medal communicated by colour only If colour blind won’t know what medal Why not fixed: Design didn’t want to change
  • Problem: Design/logical content order Design meant not in logical order Fix: Designers didn’t want to change design
  • 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.
  • Problem: adequate alternate text not provided Lots of information in graphic - editorial didn’t include adequate descriptive alt text
  • Problem: Javascript Suggested athletes not read out Why not fixed: Not part of stable release of jquery ui. Ran out of time.
  • 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
  • You don’t need to compromise design for accessibility
  • BBC Olympics: An accessibility case study

    1. 1. BBC Olympics An accessibility case study Alistair Duggin London Web Standards - September 2013 Tuesday, 17 September 13
    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 Tuesday, 17 September 13
    3. 3. About the Project Tuesday, 17 September 13
    4. 4. BBC Olympics About the Project The first truly digital Olympics. Never miss a moment Tuesday, 17 September 13 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. 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 Tuesday, 17 September 13
    6. 6. BBC Olympics About the Project Built around the sports domain Athlete Usain Bolt Event Men’s 100m Sport Athletics Venue Olympic Stadium Country Jamaica Tuesday, 17 September 13 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. 7. BBC Olympics About the Project > 10, 000 Athlete > 205 Countries > 36 Sports > 304 Medal Winning Events > 30Venues A page per domain item ... all interconnected Tuesday, 17 September 13
    8. 8. Tuesday, 17 September 13 Page composed of components, including: Facts and Figures News Video Medals Schedule Results
    9. 9. BBC Olympics About the Project Lots of other components Tuesday, 17 September 13 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. 10. Tuesday, 17 September 13 Each page type had an index page. Countries.
    11. 11. Tuesday, 17 September 13 Athletes - and the ability to filter by sport, event
    12. 12. Tuesday, 17 September 13 Venues
    13. 13. Tuesday, 17 September 13 Sports
    14. 14. Tuesday, 17 September 13 An event index for each sport
    15. 15. Tuesday, 17 September 13 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. 16. Tuesday, 17 September 13 The schedule list view provided a more accessible text interface
    17. 17. Tuesday, 17 September 13 The schedule allowed users to dig in and browse by sport
    18. 18. Tuesday, 17 September 13 or by day
    19. 19. Tuesday, 17 September 13 We also had Interactive medal tables. That allowed users to browser medals by country
    20. 20. Tuesday, 17 September 13 medal by sport
    21. 21. Tuesday, 17 September 13 And medals by athlete
    22. 22. These pages were dynamically updated in real time using data from the Olympics Broadcasting Service. Tuesday, 17 September 13
    23. 23. Tuesday, 17 September 13 Other features included the interactive video player to watch live and on-demand video
    24. 24. Tuesday, 17 September 13 A results section, providing by a 3rd Party, that contained details of every heat of every event.
    25. 25. Tuesday, 17 September 13 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. Tuesday, 17 September 13 Article pages
    27. 27. Tuesday, 17 September 13 Video clips
    28. 28. Tuesday, 17 September 13 Image galleries
    29. 29. Tuesday, 17 September 13 Live event commentary
    30. 30. Tuesday, 17 September 13 Lots of this was also available on mobile
    31. 31. Tuesday, 17 September 13 And all video and medals were available on connected TV 24 high definition live streams 2500 hours of video coverage
    32. 32. Tens of thousands of pages ... Tuesday, 17 September 13 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 Tuesday, 17 September 13 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. 34. Challenges Tuesday, 17 September 13
    35. 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 Tuesday, 17 September 13 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. Australian olympics website had been sued in 2004 for being inaccessible. Easier said than done.
    36. 36. BBC Olympics Challenges What is accessibility? A range of capabilities > Visual > Auditory > Motor > Cognitive Characteristics of accessibility > Perceivable > Operable > Understandable > Robust Tuesday, 17 September 13 Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities - irrespective of the device they are using
    37. 37. Desktop and Tablet Tuesday, 17 September 13
    38. 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 Tuesday, 17 September 13 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
    39. 39. Tuesday, 17 September 13 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
    40. 40. Tuesday, 17 September 13 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.
    41. 41. BBC Olympics Desktop and Tablet > HTML5 doctype > Lang attribute > Skips links > Unique title > Unique h1 > WAI-ARIA landmark roles Page Templates Tuesday, 17 September 13
    42. 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 Tuesday, 17 September 13 Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page
    43. 43. 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 Tuesday, 17 September 13
    44. 44. 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 Tuesday, 17 September 13 Semantically structured HTML
    45. 45. 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 Tuesday, 17 September 13 Take care to not implement barriers with CSS
    46. 46. 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 Tuesday, 17 September 13
    47. 47. 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 Tuesday, 17 September 13
    48. 48. 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 Tuesday, 17 September 13 Keep users informed - loading, new content Treat aria as an enhancement - not widespread support or familiarity by users
    49. 49. Tuesday, 17 September 13 Sometimes not possible to have a non-js version - schedule module - favourites tray That’s fine - you need to be pragmatic! Follow as similar approach though - content in logical order, semantic and valid markup, avoid css gotchas, manage keyboard focus etc
    50. 50. Tuesday, 17 September 13 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
    51. 51. BBC Olympics Desktop and Tablet Issues we fixed... Tuesday, 17 September 13
    52. 52. BBC Olympics Desktop and Tablet Fixed: Colour contrast Tuesday, 17 September 13 Problem - Design/CSS Failed colour contrast test Fix: Changed colours
    53. 53. BBC Olympics Desktop and Tablet Fixed: Over complicated markup Tuesday, 17 September 13 PROBLEM: HTML Aural clutter - headings inside lists FIX: Refactor HTML
    54. 54. BBC Olympics Desktop and Tablet Fixed: Broken navigation when resized Tuesday, 17 September 13 Problem - Design/CSS Failed colour contrast test Fix: Changed colours
    55. 55. BBC Olympics Desktop and Tablet Fixed: Favourite Button Tuesday, 17 September 13 Problem: HTML generated by JS span used instead of div - can’t receive keyboard focus Fix: Feedback issue - got them to use a button
    56. 56. BBC Olympics Desktop and Tablet Fixed: Keyboard inaccessible video clips Tuesday, 17 September 13 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
    57. 57. BBC Olympics Desktop and Tablet Fixed: Keyboard trap Tuesday, 17 September 13 Problem: JS Infinite scroll resulted in keyboard trap
    58. 58. BBC Olympics Desktop and Tablet Issues that got released... Tuesday, 17 September 13
    59. 59. BBC Olympics Desktop and Tablet Compromise: Colour only medals Tuesday, 17 September 13 Problem: medal communicated by colour only If colour blind won’t know what medal Why not fixed: Design didn’t want to change
    60. 60. BBC Olympics Desktop and Tablet Compromise: Country page content order Tuesday, 17 September 13 Problem: Design/logical content order Design meant not in logical order Fix: Designers didn’t want to change design
    61. 61. BBC Olympics Desktop and Tablet Compromise: Indistinguishable Links Tuesday, 17 September 13 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.
    62. 62. BBC Olympics Desktop and Tablet Compromise: Info graphics <img src=”rivals.jpg” alt=”Bolt graphic” /> Tuesday, 17 September 13 Problem: adequate alternate text not provided Lots of information in graphic - editorial didn’t include adequate descriptive alt text
    63. 63. BBC Olympics Desktop and Tablet Compromise: Auto Suggest not read out Tuesday, 17 September 13 Problem: Javascript Suggested athletes not read out Why not fixed: Not part of stable release of jquery ui. Ran out of time.
    64. 64. BBC Olympics Desktop and Tablet Compromise: Auto refresh Tuesday, 17 September 13 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
    65. 65. Lessons Learnt Tuesday, 17 September 13
    66. 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 Tuesday, 17 September 13 You don’t need to compromise design for accessibility
    67. 67. Alistair Duggin http://alistairduggin.co.uk/ @dugboticus Tuesday, 17 September 13
    68. 68. Tuesday, 17 September 13

    ×