Successfully reported this slideshow.
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

981 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

×