Your SlideShare is downloading. ×
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

BBC Olympics: An Accessibility Study

829

Published on

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

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
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
829
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 8. BBC Olympics About the Project Lots of other components
  • 9. These pages were dynamically updated in real time using data from the Olympics Broadcasting Service.
  • 10. Tens of thousands of pages ...
  • 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. Challenges
  • 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. BBC Olympics Challenges What is accessibility? A range of capabilities > Visual > Auditory > Motor > Cognitive Characteristics of accessibility > Perceivable > Operable > Understandable > Robust
  • 15. Desktop and Tablet
  • 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. BBC Olympics Desktop and Tablet Page Templates > > > > > > HTML5 doctype Lang attribute Skips links Unique title Unique h1 WAI-ARIA landmark roles
  • 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. 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. 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. 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. 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. 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. 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. BBC Olympics Desktop and Tablet Issues we fixed...
  • 26. BBC Olympics Desktop and Tablet Fixed: Colour contrast
  • 27. BBC Olympics Desktop and Tablet Fixed: Over complicated markup
  • 28. BBC Olympics Desktop and Tablet Fixed: Broken navigation when resized
  • 29. BBC Olympics Desktop and Tablet Fixed: Favourite Button
  • 30. BBC Olympics Desktop and Tablet Fixed: Keyboard inaccessible video clips
  • 31. BBC Olympics Desktop and Tablet Fixed: Keyboard trap
  • 32. BBC Olympics Desktop and Tablet Issues that got released...
  • 33. BBC Olympics Desktop and Tablet Compromise: Colour only medals
  • 34. BBC Olympics Desktop and Tablet Compromise: Country page content order
  • 35. BBC Olympics Desktop and Tablet Compromise: Indistinguishable Links
  • 36. BBC Olympics Desktop and Tablet Compromise: Info graphics <img src=”rivals.jpg” alt=”Bolt graphic” />
  • 37. BBC Olympics Desktop and Tablet Compromise: Auto Suggest not read out
  • 38. BBC Olympics Desktop and Tablet Compromise: Auto refresh
  • 39. Lessons Learnt
  • 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. Alistair Duggin http://alistairduggin.co.uk/ @dugboticus ! !

×