The document discusses the importance of cross-device accessibility in web applications, highlighting the need for designs that cater to various devices including smartphones, feature phones, and gaming consoles. It evaluates the challenges posed by different devices, such as varied browser standards and limited processing power, while emphasizing the significance of universal design for accessibility. It also suggests best practices, including utilizing HTML5 features and building responsive layouts, to enhance user experiences across diverse platforms.

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 UX Browser 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 Normal SSR 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 I’ve 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 <header> 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 <input type=range>

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. 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. Opera Software <video> captioning Built-in captioning? Currently not ;-( You can build a workaround though

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. 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. 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. 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. 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