Cross Device Accessibility


Published on

SXSW 2010 presentation: Does the one-size-fits-all approach of "One Web" meet the needs of all groups of web users, as web content becomes more complicated? We will discuss strategies for improving accessibility across different devices, covering current issues with mobile accessibility, and potential solutions such as geolocation and CSS3 media queries.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Cross Device Accessibility

  1. 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. 2. Opera Software Slides available At
  3. 3. Opera Software The story so far... 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. 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. 5. Opera Software Extending it to cross-device How well do web apps work across devices? What opportunities do new technologies offer us?
  6. 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. 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. 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. 9. Opera Software What devices? Smartphones Featurephones Tablets, PDAs TVs Games consoles...
  10. 10. Opera Software Oh my!
  11. 11. Opera Software Smartphones: iPhone iPhone paved the way for good UX Browser has great standards support
  12. 12. Opera Software Smartphones: iPhone
  13. 13. Opera Software Smartphones: iPhone Screenreader support: voiceover, only on 3Gs WAI-ARIA support? Getting there
  14. 14. Opera Software Smartphones: Opera Mobile Opera Mobile also great Great UX/standards support
  15. 15. Opera Software Smartphones: Opera Mobile Normal SSR on
  16. 16. Opera Software Smartphones: Opera Mobile Screenreader support/WAI-ARIA: Not on the platforms Op Mob runs on (Windows mobile/S60/UIQ)
  17. 17. Opera Software Smartphones: Mobile IE Dubious standards support. CSS engine based on IE6 (
  18. 18. Opera Software Smartphones: Mobile IE
  19. 19. Opera Software Smartphones: Android Again, good standards/UX! Opera Mini just released, Opera Mobile announced, default WebKit browser good
  20. 20. Opera Software Smartphones: Android Screenreader support/WAI-ARIA: Android has built-in screenreader — TalkBack; doesn't support browsers yet
  21. 21. Opera Software Smartphones: Others Some other good browsers Most of them based on Webkit! “All 10 mobile WebKits I’ve identified so far are subtly or wildly different.” --PPK, (
  22. 22. Opera Software Smartphones: S60 default
  23. 23. Opera Software Smartphones: Others “ Talks” Screen reader on Symbian?
  24. 24. Opera Software Featurephones The most common phones outside the wealthy west Low-spec, crappy default browsers
  25. 25. Opera Software Featurephones are important Featurephones outnumber smartphones “4 billion phones in the world, 100 million smartphones” --( We are not the same as our users...
  26. 26. Opera Software Featurephones: Opera Mini
  27. 27. Opera Software Featurephones Although again: WAI-ARIA/Screenreaders? Nope JS problematic full-stop
  28. 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. 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. 30. Opera Software Other devices: Wii
  31. 31. Opera Software Other devices: Wii
  32. 32. Opera Software Other devices: TV, other? Most use Webkit or Opera SDK Standards support generally good WAI-ARIA, screenreaders? Bleergh
  33. 33. Opera Software Pattern? Yes ;-) Somewhat!
  34. 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. 35. Opera Software There's a lack of AT... ...but there are other issues as well
  36. 36. Opera Software Browser standards support varies Some are good Some are poor Some are proxy-based (eg Opera Mini)
  37. 37. Opera Software Screen size
  38. 38. Opera Software Memory/Processing power Low on a lot of devices Some can't handle heavy scripting Or lots of image downloads
  39. 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. 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. 41. Opera Software Complete pain in the ass
  42. 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. 43. Opera Software Back to the old school
  44. 44. Opera Software ARIA/JS not widely supported... ...across devices, so provide fallbacks.
  45. 45. Opera Software The old ways... ...suddenly become really important again Good clean semantic HTML Graceful degradation/Progressive enhancement
  46. 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. 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. 48. Opera Software Examples: Ajax updates Submitting data via Ajax/Hijax Using extra server-cycles if xhr is not available
  49. 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. 50. Opera Software Separate mobile sites? Don't abuse them Graded support, not on/off Give users a choice
  51. 51. Opera Software Separate mobile sites? Don't code for one device (eg iPhone) “remove iPhone from ass” --PPK (
  52. 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. 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. 54. Opera Software Mobile best practices Analogous to WCAG in many ways: (eg keyboard accessibility/alt text)
  55. 55. Opera Software Design by context UX needn't be identical across all devices, as long as it is appropriate to the context
  56. 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. 57. Opera Software Media queries Take media types further Great for optimizing layout on browsers that support them
  58. 58. Opera Software Media queries @media all and (max-width: 550px), (max-device-width: 550px) { body { font-size: 70%; } }
  59. 59. Opera Software HTML5 better semantics
  60. 60. Opera Software HTML5 blog structure
  61. 61. Opera Software HTML5 better semantics HTML5 elements analogous to WAI aria, eg <header> versus role=”banner”
  62. 62. Opera Software HTML5 forms Previously called “Web forms 2.0” More powerful form elements Built-in validation Better semantics
  63. 63. Opera Software Range slider <input type=range>
  64. 64. Opera Software HTML5 <video> (& <audio>) New tags, plus new API for controlling audio and video! <video controls width=&quot;640&quot; height=&quot;360&quot; id=&quot;player&quot;> <source src=&quot;elva.ogv&quot; type=&quot;video/ogg&quot; /> ...include fallback content here... </video>
  65. 65. Opera Software Native <video> 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. 66. Opera Software <video> captioning Built-in captioning? Currently not ;-( You can build a workaround though
  67. 67. Opera Software <video> captions #1 <video></video> <div class=transcript> <p>Hello, Good Evening and Welcome</p> <p>Tonight on the Jeremy Kyle show ...</p> .... </div>
  68. 68. Opera Software <video> captions #2 <div class=”transcript”> <p> <span>Hello, Good Evening</span> <span> and Welcome.</span> </p> <p> <span>Tonight on the Oprah Winfrey show ...</span> </p> .... </div>
  69. 69. Opera Software <video> captions #3 <p> <span data-begin=1 data-end=2.4 >Hello, Good Evening</span> <span data-begin=3 data-end=3.6 > and Welcome.</span> </p>
  70. 70. Opera Software <video> captions #4 function timeupdate() { var v = document.querySelector('video'); var now = v.currentTime; … } <video width=600 src=synergy.ogv ontimeupdate=timeupdate()>
  71. 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. 72. Opera Software Thanks! [email_address] @chrisdavidmills Try Opera: