1. Tipps on accessibility in apps Making your web apps accessible for Firefox OS and others

2. Marco Zehe Mozilla‘s accessibility QA engineer & evangelist At Mozilla since December 2007 Worked at Freedom Scientific before Blind from birth

3. Making web apps accessible Not much difference to web sites Headings, proper form field labeling, alt text for images, Use buttons or links, not clickable divs or spans Use tables as usual

4. Manage foreground screens Hide inactive screens properly Use display: none; or visibility: hidden; Just moving out of viewport will not hide content from screen reader Negative z-axis doesn‘t work, either Last resort: aria-hidden=„true“

5. Test in the screen reader simulator Get the add-on from https://addons.mozilla.org/en- US/firefox/addon/screen-reader-simulator/https://addons.mozilla.org/en- US/firefox/addon/screen-reader-simulator/ Uses same engine used in FF OS and FF Android Navigate left and right through UI Watch what gets spoken Activate items to navigate to other screens

6. Things you can test Does the screen reader go where it shouldn‘t? Do elements get spoken correctly? Do items activate? Is focus always managed?

7. Test on a device Turn on screen reader in Accessibility Settings Turn on Accessibility Settings from Developer Settings Turn on Developer Settings from Device Info 1.4+: press up, then down volume three times, hear speech, press up, then down 3 more times Same to turn off. Learn the gestures!

8. Test in Firefox for Android Turn on TalkBack in Accessibility settings Install your app App uses Firefox as runtime Use TalkBack gestures to control

9. Firefox OS gestures Drag finger to explore, spoken item gets highlighted Swipe left and right to go sequentially Double-tap to activate highlighted item Swipe left, right, up, down with 2 fingers to scroll screens

10. Contact Blog: http://www.marcozehe.dehttp://www.marcozehe.de Twitter: @MarcoInEnglish LinkedIn, Facebook also available E-Mail: mzehe (at) mozilla (dot) com