Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The Mobile Accessibility Stack
Steve Lee
Full Measure
OSS Watch
Developing for the Mobile Web – Bristol
27 Oct 2010
Copyri...
Why make my mobile web app
accessible?
●More users
●
●Ageing population
●
●Mainstream devices not 'special'
●
●Synergy with mobile + a11y
How do I achieve accessibility?
Use W3C standards
All – not just a11y
Follow good practice
Beware bad code cut n paste
Toolkits
Tools
Testing
Don't make assumptionsDon't make assumptions
Involve real users
What is the a11y Stack?
Keyboard / touch only access
Switch input access
Good colours (using CSS)
Non visual access
Assistive Technology (AT)
Provides adapted interaction
* Screen readers
- IOS Voice Over
- Android Talk Back
* Scanning on...
Your stuff
HTML
CSS
Javascript
DOM + BOM + Platform API
The big picture
Web App
Network
Browser
Accessibility API
Assistive Technology
User
Need a direct path
from app markup
to AT user
Mind the [mobile] gap
* Accessibility APIs
* Alternative input
- touch only
- switch
●Tech you should know / use
●
●WAI-ARIA
●
●Enhanced Markup
●
●Part of HTML5
●
●Enhanced Markup
●Docs and apps
●
●Part of HTML5
●
●Enhanced Markup
●
●Part of HTML5
●
●Semantic Structure
●
●Notifications
●
●Focus Management
●Progressive Enhancement
●
●Handle a wide range of
●
●* Users
●
●* Devices
HTML - content
CSS - presentation
Javascript - behaviour
HTML – content
CSS – presentation
Javascript - behaviour
●JQuery Mobile
●Declarative
●
●Built in Prog Enhanc
●
●Much more goodness
●HTML5
●+ Standard widget UIs
●
●<audio>
●<video>
●- Incomplete, in flux
●
●- Canvas == a11y black hole
●+ Use SVG for graphics
Other stuff to keep an eye on
* W3C Widgets Wookie server
* W3C API WG + WAC (was BONDI)
* Webinos
* Firefox a11y esp. Fir...
@SteveALee
http://fullmeasure.co.uk
http://oss-watch.ac.uk
Mobile a11y stack
Upcoming SlideShare
Loading in …5
×

Mobile a11y stack

987 views

Published on

Quick introduction to the accessibility stack for mobile web apps

Published in: Technology, Business
  • Be the first to comment

Mobile a11y stack

  1. 1. The Mobile Accessibility Stack Steve Lee Full Measure OSS Watch Developing for the Mobile Web – Bristol 27 Oct 2010 Copyright © 2010 Full Measure Licensed under the Creative Commons Attribution-ShareAlike 2.0
  2. 2. Why make my mobile web app accessible?
  3. 3. ●More users ● ●Ageing population ● ●Mainstream devices not 'special' ● ●Synergy with mobile + a11y
  4. 4. How do I achieve accessibility?
  5. 5. Use W3C standards All – not just a11y Follow good practice Beware bad code cut n paste
  6. 6. Toolkits Tools Testing
  7. 7. Don't make assumptionsDon't make assumptions
  8. 8. Involve real users
  9. 9. What is the a11y Stack?
  10. 10. Keyboard / touch only access Switch input access Good colours (using CSS) Non visual access
  11. 11. Assistive Technology (AT) Provides adapted interaction * Screen readers - IOS Voice Over - Android Talk Back * Scanning on screen keyboards
  12. 12. Your stuff HTML CSS Javascript DOM + BOM + Platform API
  13. 13. The big picture Web App Network Browser Accessibility API Assistive Technology User
  14. 14. Need a direct path from app markup to AT user
  15. 15. Mind the [mobile] gap * Accessibility APIs * Alternative input - touch only - switch
  16. 16. ●Tech you should know / use ●
  17. 17. ●WAI-ARIA ●
  18. 18. ●Enhanced Markup ● ●Part of HTML5 ● ●Enhanced Markup ●Docs and apps ● ●Part of HTML5 ●
  19. 19. ●Enhanced Markup ● ●Part of HTML5 ● ●Semantic Structure ● ●Notifications ● ●Focus Management
  20. 20. ●Progressive Enhancement ●
  21. 21. ●Handle a wide range of ● ●* Users ● ●* Devices
  22. 22. HTML - content CSS - presentation Javascript - behaviour
  23. 23. HTML – content CSS – presentation Javascript - behaviour
  24. 24. ●JQuery Mobile
  25. 25. ●Declarative ● ●Built in Prog Enhanc ● ●Much more goodness
  26. 26. ●HTML5
  27. 27. ●+ Standard widget UIs ● ●<audio> ●<video>
  28. 28. ●- Incomplete, in flux ● ●- Canvas == a11y black hole ●+ Use SVG for graphics
  29. 29. Other stuff to keep an eye on * W3C Widgets Wookie server * W3C API WG + WAC (was BONDI) * Webinos * Firefox a11y esp. Firebug – accessfirefox.org * NVDA screen reader – smoke test * OSS Watch openaccessibility.xml document * REALISE open innovation in accessibility
  30. 30. @SteveALee http://fullmeasure.co.uk http://oss-watch.ac.uk

×