Transcript Marco Zehe, presentation, powerpoint

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/enUS/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