Mobile a11y stack
3 likes•566 views
The document discusses the mobile accessibility stack and how to develop mobile web apps that are accessible. It recommends following W3C standards and best practices, using ARIA, semantic HTML5, and progressive enhancement. Key technologies mentioned include screen readers, switching input, jQuery Mobile, HTML5, and keeping an eye on emerging standards. The goal is to provide a direct path for app markup to be accessed by assistive technologies and users with disabilities.
![Mind the [mobile] gap
* Accessibility APIs
* Alternative input
- touch only
- switch](https://image.slidesharecdn.com/mobilea11ystack-101027092631-phpapp02/85/Mobile-a11y-stack-16-320.jpg)
Mobile a11y stack
- 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
- 8. Don't make assumptionsDon't make assumptions
- 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
- 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