Making your mobile web app accessible
summary
Firefox OS apps use only HTML/CSS/JS and platform web APIs to access sensors, so accessibility must be baked into the DOM and events. Use native controls when possible and add ARIA only as a fallback; prefer input type=checkbox styled to a div with role checkbox. For transitions hide with CSS visibility:hidden (not opacity) or display none after transition ends. Keep DOM order logical for screen readers, mark modals with role=dialog/aria-modal so the virtual cursor moves, and ensure click targets have correct roles because delegated click handlers often fail.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 2:41Firefox OS foundation
- 5:50Native mobile accessibility
- 7:16Why accessibility matters
- 10:15Universal design
- 12:43Web accessibility principles
- 16:57ARIA roles and widgets
- 19:51ARIA mobile challenges
- 21:14Screen reader visibility
- 27:01Hiding elements correctly
- 28:24Modal dialogues focus
- 30:16Screen reader demo
- 33:40Input events handling
- 35:25Gestures alternatives
- 37:53Q&A
related talks
55mHTML for Mobile Web and Firefox OS
35mAccelerating accessibility in web
48mRadically Accessible Internet Applications 💯
52mMaking Single Page Apps Accessible: It's easier than you think
39mHow to win at mobile accessibility
45mA Web for Anyone, Anywhere, Anytime
30mAccessible.JS
41mTechnologic (Human After All): Accessibility remix