Mobile a11y stack

856 views
809 views

Published on

Quick introduction to the accessibility stack for mobile web apps

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
856
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×