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