BBC VOICES RECORDINGS€¦ · BBC Voices Recordings) ) ) ) ‘’ -”) ” (‘)) ) ) *) , , , , ] , ,
BBC Olympics: An Accessibility Study
-
Upload
nomensa -
Category
Technology
-
view
828 -
download
0
description
Transcript of BBC Olympics: An Accessibility Study
![Page 1: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/1.jpg)
BBC Olympics An accessibility case study
!
!
!
!Alistair Duggin
!World Usability Day 2013 Bristol - November 2013
![Page 2: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/2.jpg)
BBC Olympics Introduction
Alistair Duggin, Lead Front End Developer, BBC Sport Olympics Desktop Website !
> About the Project > Challenges > Desktop and Tablet > Lessons Learnt
![Page 3: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/3.jpg)
About the Project
![Page 4: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/4.jpg)
BBC Olympics About the Project
The first truly digital Olympics. Never miss a moment
![Page 5: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/5.jpg)
“Our aspiration was that just as the Coronation did for TV in 1953, the Olympics would do for digital in 2012Phil Fearnley, General Manager, News & Knowledge at BBC
![Page 6: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/6.jpg)
BBC Olympics About the Project
Built around a sports ontology
AthleteUsain Bolt
EventMen’s 100m
SportAthletics
VenueOlympic Stadium
CountryJamaica
![Page 7: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/7.jpg)
BBC Olympics About the Project
> 10, 000 Athlete > 205 Countries > 36 Sports > 304 Medal Winning Events > 30 Venues
A page per domain item
... all interconnected
![Page 8: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/8.jpg)
![Page 9: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/9.jpg)
BBC Olympics About the Project
Lots of other components
![Page 10: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/10.jpg)
![Page 11: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/11.jpg)
![Page 12: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/12.jpg)
![Page 13: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/13.jpg)
![Page 14: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/14.jpg)
![Page 15: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/15.jpg)
![Page 16: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/16.jpg)
![Page 17: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/17.jpg)
![Page 18: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/18.jpg)
![Page 19: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/19.jpg)
![Page 20: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/20.jpg)
![Page 21: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/21.jpg)
![Page 22: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/22.jpg)
These pages were dynamically updated in real time using data from the Olympics Broadcasting Service.
![Page 23: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/23.jpg)
![Page 24: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/24.jpg)
![Page 25: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/25.jpg)
![Page 26: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/26.jpg)
![Page 27: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/27.jpg)
![Page 28: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/28.jpg)
![Page 29: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/29.jpg)
![Page 30: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/30.jpg)
![Page 31: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/31.jpg)
![Page 32: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/32.jpg)
Tens of thousands of pages ...
![Page 33: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/33.jpg)
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
![Page 34: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/34.jpg)
Challenges
![Page 35: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/35.jpg)
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
![Page 36: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/36.jpg)
BBC Olympics Challenges
What is accessibility?
A range of capabilities > Visual > Auditory > Motor > Cognitive
Characteristics of accessibility > Perceivable > Operable > Understandable > Robust
![Page 37: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/37.jpg)
Desktop and Tablet
![Page 38: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/38.jpg)
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
!
![Page 39: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/39.jpg)
![Page 40: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/40.jpg)
![Page 41: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/41.jpg)
BBC Olympics Desktop and Tablet
> HTML5 doctype > Lang attribute > Skips links > Unique title > Unique h1 > WAI-ARIA landmark roles
Page Templates
![Page 42: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/42.jpg)
BBC Olympics Desktop and Tablet
Web standards and Progressive Enhancement
Content
HTML & WAI-ARIA
CSS
JavaScript & HTML
CSS for Javascript
WAI-ARIA for Javascript
![Page 43: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/43.jpg)
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
![Page 44: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/44.jpg)
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
![Page 45: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/45.jpg)
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
![Page 46: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/46.jpg)
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
![Page 47: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/47.jpg)
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
![Page 48: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/48.jpg)
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
![Page 49: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/49.jpg)
![Page 50: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/50.jpg)
![Page 51: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/51.jpg)
BBC Olympics Desktop and Tablet
Issues we fixed...
![Page 52: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/52.jpg)
BBC Olympics Desktop and Tablet
Fixed: Colour contrast
![Page 53: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/53.jpg)
BBC Olympics Desktop and Tablet
Fixed: Over complicated markup
![Page 54: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/54.jpg)
BBC Olympics Desktop and Tablet
Fixed: Broken navigation when resized
![Page 55: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/55.jpg)
BBC Olympics Desktop and Tablet
Fixed: Favourite Button
![Page 56: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/56.jpg)
BBC Olympics Desktop and Tablet
Fixed: Keyboard inaccessible video clips
![Page 57: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/57.jpg)
BBC Olympics Desktop and Tablet
Fixed: Keyboard trap
![Page 58: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/58.jpg)
BBC Olympics Desktop and Tablet
Issues that got released...
![Page 59: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/59.jpg)
BBC Olympics Desktop and Tablet
Compromise: Colour only medals
![Page 60: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/60.jpg)
BBC Olympics Desktop and Tablet
Compromise: Country page content order
![Page 61: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/61.jpg)
BBC Olympics Desktop and Tablet
Compromise: Indistinguishable Links
![Page 62: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/62.jpg)
BBC Olympics Desktop and Tablet
Compromise: Info graphics
<img src=”rivals.jpg” alt=”Bolt graphic” />
![Page 63: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/63.jpg)
BBC Olympics Desktop and Tablet
Compromise: Auto Suggest not read out
![Page 64: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/64.jpg)
BBC Olympics Desktop and Tablet
Compromise: Auto refresh
![Page 65: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/65.jpg)
Lessons Learnt
![Page 66: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/66.jpg)
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
![Page 67: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/67.jpg)
Alistair Duggin http://alistairduggin.co.uk/@dugboticus!
!
![Page 68: BBC Olympics: An Accessibility Study](https://reader036.fdocuments.net/reader036/viewer/2022062513/554ba1c5b4c905b8618b4b23/html5/thumbnails/68.jpg)