Cross Device Accessibility
Upcoming SlideShare
Loading in...5
×
 

Cross Device Accessibility

on

  • 2,903 views

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

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.

Statistics

Views

Total Views
2,903
Views on SlideShare
2,858
Embed Views
45

Actions

Likes
0
Downloads
30
Comments
0

7 Embeds 45

http://onwebdev.blogspot.com 29
http://www.slideshare.net 6
http://onwebdev.blogspot.com.es 4
http://onwebdev.blogspot.it 2
http://blog.gabrieleromanato.com 2
file:// 1
http://onwebdev.blogspot.gr 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Cross Device Accessibility Cross Device Accessibility Presentation Transcript

  • Opera Software Cross-device accessibility: Is it for real? Chris Mills, Web Evangelist, Opera Software Creative Commons Attribution Non-Commercial Share Alike 3.0
  • Opera Software Slides available At my.opera.com/ODIN
  • 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...
  • 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
  • Opera Software Extending it to cross-device How well do web apps work across devices? What opportunities do new technologies offer us?
  • Opera Software a11y as universal design Not just about people w/ disabilities Improves things for everyone Also considers mobile users, slow connection speeds, etc.
  • 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
  • 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
  • Opera Software What devices? Smartphones Featurephones Tablets, PDAs TVs Games consoles...
  • Opera Software Oh my!
  • Opera Software Smartphones: iPhone iPhone paved the way for good UX Browser has great standards support
  • Opera Software Smartphones: iPhone
  • Opera Software Smartphones: iPhone Screenreader support: voiceover, only on 3Gs WAI-ARIA support? Getting there
  • Opera Software Smartphones: Opera Mobile Opera Mobile also great Great UX/standards support
  • Opera Software Smartphones: Opera Mobile Normal SSR on
  • Opera Software Smartphones: Opera Mobile Screenreader support/WAI-ARIA: Not on the platforms Op Mob runs on (Windows mobile/S60/UIQ)
  • 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/)
  • Opera Software Smartphones: Mobile IE
  • Opera Software Smartphones: Android Again, good standards/UX! Opera Mini just released, Opera Mobile announced, default WebKit browser good
  • Opera Software Smartphones: Android Screenreader support/WAI-ARIA: Android has built-in screenreader — TalkBack; doesn't support browsers yet
  • 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)
  • Opera Software Smartphones: S60 default
  • Opera Software Smartphones: Others “ Talks” Screen reader on Symbian?
  • Opera Software Featurephones The most common phones outside the wealthy west Low-spec, crappy default browsers
  • 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...
  • Opera Software Featurephones: Opera Mini
  • Opera Software Featurephones Although again: WAI-ARIA/Screenreaders? Nope JS problematic full-stop
  • 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
  • Opera Software Other devices: Wii Wii browser based on Opera 9.3/9.4 Standards support is good But again, WAI-ARIA, screenreaders? Nah
  • Opera Software Other devices: Wii
  • Opera Software Other devices: Wii
  • Opera Software Other devices: TV, other? Most use Webkit or Opera SDK Standards support generally good WAI-ARIA, screenreaders? Bleergh
  • Opera Software Pattern? Yes ;-) Somewhat!
  • 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
  • Opera Software There's a lack of AT... ...but there are other issues as well
  • Opera Software Browser standards support varies Some are good Some are poor Some are proxy-based (eg Opera Mini)
  • Opera Software Screen size
  • Opera Software Memory/Processing power Low on a lot of devices Some can't handle heavy scripting Or lots of image downloads
  • Opera Software Fonts, colours, design Limited on mobile devices You thought design on desktop sucked? Links/form fields hard to select Controls vary
  • 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
  • Opera Software Complete pain in the ass
  • 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
  • Opera Software Back to the old school
  • Opera Software ARIA/JS not widely supported... ...across devices, so provide fallbacks.
  • Opera Software The old ways... ...suddenly become really important again Good clean semantic HTML Graceful degradation/Progressive enhancement
  • Opera Software Graceful degradation Create a good experience Make sure core content is still accessible where support is lacking Eg simple tabbed interface
  • Opera Software Progressive enhancement Create a baseline of content, accessible without JS Test for support: feature detection Build in enhancements if they are supported
  • Opera Software Examples: Ajax updates Submitting data via Ajax/Hijax Using extra server-cycles if xhr is not available
  • 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
  • Opera Software Separate mobile sites? Don't abuse them Graded support, not on/off Give users a choice
  • 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)
  • 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
  • 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
  • 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)
  • Opera Software Design by context UX needn't be identical across all devices, as long as it is appropriate to the context
  • 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
  • Opera Software Media queries Take media types further Great for optimizing layout on browsers that support them
  • Opera Software Media queries @media all and (max-width: 550px), (max-device-width: 550px) { body { font-size: 70%; } }
  • Opera Software HTML5 better semantics
  • Opera Software HTML5 blog structure
  • Opera Software HTML5 better semantics HTML5 elements analogous to WAI aria, eg <header> versus role=”banner”
  • Opera Software HTML5 forms Previously called “Web forms 2.0” More powerful form elements Built-in validation Better semantics
  • Opera Software Range slider <input type=range>
  • 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>
  • 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
  • Opera Software <video> captioning Built-in captioning? Currently not ;-( You can build a workaround though
  • 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>
  • 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>
  • 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>
  • Opera Software <video> captions #4 function timeupdate() { var v = document.querySelector('video'); var now = v.currentTime; … } <video width=600 src=synergy.ogv ontimeupdate=timeupdate()>
  • 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
  • Opera Software Thanks! [email_address] @chrisdavidmills Try Opera: www.opera.com