Quick introduction to the accessibility stack for mobile web apps

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. Why make my mobile web app
accessible?

3. ●More users
●
●Ageing population
●
●Mainstream devices not 'special'
●
●Synergy with mobile + a11y

5. How do I achieve accessibility?

6. Use W3C standards
All – not just a11y
Follow good practice
Beware bad code cut n paste

7. Toolkits
Tools
Testing

8. Don't make assumptionsDon't make assumptions

9. Involve real users

10. What is the a11y Stack?

11. Keyboard / touch only access
Switch input access
Good colours (using CSS)
Non visual access

12. Assistive Technology (AT)
Provides adapted interaction
* Screen readers
- IOS Voice Over
- Android Talk Back
* Scanning on screen keyboards

13. Your stuff
HTML
CSS
Javascript
DOM + BOM + Platform API

14. The big picture
Web App
Network
Browser
Accessibility API
Assistive Technology
User

15. Need a direct path
from app markup
to AT user

16. Mind the [mobile] gap
* Accessibility APIs
* Alternative input
- touch only
- switch

17. ●Tech you should know / use
●

18. ●WAI-ARIA
●

19. ●Enhanced Markup
●
●Part of HTML5
●
●Enhanced Markup
●Docs and apps
●
●Part of HTML5
●

20. ●Enhanced Markup
●
●Part of HTML5
●
●Semantic Structure
●
●Notifications
●
●Focus Management

21. ●Progressive Enhancement
●

22. ●Handle a wide range of
●
●* Users
●
●* Devices

23. HTML - content
CSS - presentation
Javascript - behaviour

24. HTML – content
CSS – presentation
Javascript - behaviour

25. ●JQuery Mobile

26. ●Declarative
●
●Built in Prog Enhanc
●
●Much more goodness

27. ●HTML5

28. ●+ Standard widget UIs
●
●<audio>
●<video>

29. ●- Incomplete, in flux
●
●- Canvas == a11y black hole
●+ Use SVG for graphics

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

31. @SteveALee
http://fullmeasure.co.uk
http://oss-watch.ac.uk