cross device accessibility
TRANSCRIPT
- 1. Opera Software Cross-device accessibility: Is it for real? Chris Mills, Web Evangelist,Opera Software Creative Commons Attribution Non-Commercial Share Alike 3.0
- 2. Opera Software Slides available At my.opera.com/ODIN
- 3. Opera Software The story so far... ...it is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil galactic empire...No, wait...
- 4. Opera Software The REAL story so far... We care about accessibility We have the HTML smarts Sharron and Rich took this further Becky and Patrick dissected accessible JavaScript
- 5. Opera Software Extending it to cross-device How well do web apps work across devices? What opportunities do new technologies offer us?
- 6. Opera Software a11y as universal design Not just about people w/ disabilities Improves things for everyone Also considers mobile users, slow connection speeds, etc.
- 7. Opera Software What I'll cover What devices have to offer The problem with devices... Back to the old school Further ideas for x-device a11y
- 8. Opera Software What devices have to offer What devices have to offer The problem with devices Back to the old school Further ideas for x-device a11y
- 9. Opera Software What devices? Smartphones Featurephones Tablets, PDAs TVs Games consoles...
- 10. Opera Software Oh my!
- 11. Opera Software Smartphones: iPhone iPhone paved the way for good UXBrowser has great standards support
- 12. Opera Software Smartphones: iPhone
- 13. Opera Software Smartphones: iPhone Screenreader support: voiceover, only on 3Gs WAI-ARIA support? Getting there
- 14. Opera Software Smartphones: Opera Mobile Opera Mobile also great Great UX/standards support
- 15. Opera Software Smartphones: Opera Mobile NormalSSR on
- 16. Opera Software Smartphones: Opera Mobile Screenreader support/WAI-ARIA:Not on the platforms Op Mob runs on (Windows mobile/S60/UIQ)
- 17. Opera Software Smartphones: Mobile IE Dubious standards support. CSS engine based on IE6 (http://www.brucelawson.co.uk/2008/ie-6-mobile-standards-compliance-tests/)
- 18. Opera Software Smartphones: Mobile IE
- 19. Opera Software Smartphones: Android Again, good standards/UX! Opera Mini just released, Opera Mobile announced, default WebKit browser good
- 20. Opera Software Smartphones: Android Screenreader support/WAI-ARIA:Android has built-in screenreader TalkBack; doesn't support browsers yet
- 21. Opera Software Smartphones: Others Some other good browsers Most of them based on Webkit! All 10 mobile WebKits Ive identified so far are subtly or wildly different.--PPK, (http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html)
- 22. Opera Software Smartphones: S60 default
- 23. Opera Software Smartphones: Others Talks Screen reader on Symbian?
- 24. Opera Software Featurephones The most common phones outside the wealthy west Low-spec, crappy default browsers
- 25. Opera Software Featurephones are important Featurephones outnumber smartphones 4 billion phones in the world, 100 million smartphones --(www.opera.com/smw) We are not the same as our users...
- 26. Opera Software Featurephones: Opera Mini
- 27. Opera Software Featurephones Although again: WAI-ARIA/Screenreaders? Nope JS problematic full-stop
- 28. Opera Software How does Opera Mini work? Mini sends request Server farm retrieves/formats page Compressed page (up to 90%) sent back to browser Mini displays page
- 29. Opera Software Other devices: Wii Wii browser based on Opera 9.3/9.4 Standards support is good But again, WAI-ARIA, screenreaders? Nah
- 30. Opera Software Other devices: Wii
- 31. Opera Software Other devices: Wii
- 32. Opera Software Other devices: TV, other? Most use Webkit or Opera SDK Standards support generally good WAI-ARIA, screenreaders? Bleergh
- 33. Opera Software Pattern? Yes ;-) Somewhat!
- 34. Opera Software The problem with devices What devices have to offer The problem with devices Back to the old school Further ideas for x-device a11y
- 35. Opera Software There's a lack of AT... ...but there are other issues as well
- 36. Opera Software Browser standards support varies Some are good Some are poor Some are proxy-based (eg Opera Mini)
- 37. Opera Software Screen size
- 38. Opera Software Memory/Processing power Low on a lot of devices Some can't handle heavy scripting Or lots of image downloads
- 39. Opera Software Fonts, colours, design Limited on mobile devices You thought design on desktop sucked? Links/form fields hard to select Controls vary
- 40. Opera Software Flash/plugin support FlashLite on some phones Flash not on some platforms, eg iPhone/iPad most notably Flash has a11y problems anyway Roll on HTML5
- 41. Opera Software Complete pain in the ass
- 42. Opera Software Back to the old school What devices have to offer The problem with devices Back to the old school Further ideas for x-device a11y
- 43. Opera Software Back to the old school
- 44. Opera Software ARIA/JS not widely supported... ...across devices, so provide fallbacks.
- 45. Opera Software The old ways... ...suddenly become really important again Good clean semantic HTML Graceful degradation/Progressive enhancement
- 46. Opera Software Graceful degradation Create a good experience Make sure core content is still accessible where support is lacking Eg simple tabbed interface
- 47. Opera Software Progressive enhancement Create a baseline of content,accessible without JS Test for support: feature detection Build in enhancements if they are supported
- 48. Opera Software Examples: Ajax updates Submitting data via Ajax/Hijax Using extra server-cycles if xhr is not available
- 49. Opera Software Fallback example: video/audio transcripts Showing a video + transcript A transcript will help deaf people But it will also help people on mobile, or without sound available, or in noisy environments, or without support for the video
- 50. Opera Software Separate mobile sites? Don't abuse them Graded support, not on/off Give users a choice
- 51. Opera Software Separate mobile sites? Don't code for one device (eg iPhone) remove iPhone from ass --PPK (http://www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html)
- 52. Opera Software Optimizing is better: design Fluid layouts Keep graphics to a minimum KISS Keep data entry to a minimum Test on a variety of devices
- 53. Opera Software Optimizing: server load Keep HTTP requests to a minimum Put your stuff in less files Use CSS sprites/data URLs Serve mobile/minified/reduced JS libraries for mobiles
- 54. Opera Software Mobile best practices http://www.w3.org/TR/mobile-bp/ Analogous to WCAG in many ways: http://www.w3.org/TR/mwbp-wcag/ (eg keyboard accessibility/alt text)
- 55. Opera Software Design by context UX needn't be identical across all devices, as long as it is appropriate to the context
- 56. Opera Software Further ideas for x-device a11y What devices have to offer The problem with devices Back to the old school Further ideas for x-device a11y
- 57. Opera Software Media queries Take media types further Great for optimizing layout on browsers that support them
- 58. Opera Software Media queries @media all and (max-width: 550px), (max-device-width: 550px) { body { font-size: 70%; } }
- 59. Opera Software HTML5 better semantics
- 60. Opera Software HTML5 blog structure
- 61. Opera Software HTML5 better semantics HTML5 elements analogous to WAI aria, eg versus role=banner
- 62. Opera Software HTML5 forms Previously called Web forms 2.0 More powerful form elements Built-in validation Better semantics
- 63. Opera Software Range slider
- 64. Opera Software HTML5 (& ) New tags, plus new API for controlling audio and video! ...include fallback content here...
- 65. Opera Software Native is awesome Works well with open standards Built-in keyboard accessibility API for customising controls, etc. DOESN'T require plugins Circumvents EOLAS patent BS
- 66. Opera Software captioning Built-in captioning? Currently not ;-( You can build a workaround though
- 67. Opera Software captions #1
Hello, Good Evening and Welcome
Tonight on the Jeremy Kyle show ...
.... - 68. Opera Software captions #2
Hello, Good Evening and Welcome.
Tonight on the Oprah Winfrey show ...
.... - 69. Opera Software captions #3
Hello, Good Evening and Welcome.
- 70. Opera Software captions #4 function timeupdate() {var v = document.querySelector('video');var now = v.currentTime; }
- 71. Opera Software Location-aware a11y Build applications that discover your location, and find places of interest eg Hearing aid loops in venues Accessible restaurants Child-friendly restaurants
- 72. Opera Software Thanks! [email_address] @chrisdavidmills Try Opera: www.opera.com