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.
Boost Fertility New Invention Ups Success Rates.pdf
Cross Device Accessibility
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
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...
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/)
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)
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...
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
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
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%; } }
64. Opera Software HTML5 <video> (& <audio>) New tags, plus new API for controlling audio and video! <video controls width="640" height="360" id="player"> <source src="elva.ogv" type="video/ogg" /> ...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