Tipps on accessibility in apps

Making your web apps accessible for Firefox OS and others

Marco Zehe

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

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

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“

Test in the screen reader simulator

• Get the add-on from 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

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?

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!

Test in Firefox for Android

• Turn on TalkBack in Accessibility settings• Install your app• App uses Firefox as runtime• Use TalkBack gestures to control

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

Contact

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