1 / 10

Tipps on accessibility in apps

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.

nerita
Download Presentation

Tipps on accessibility in apps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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/ • 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.de • Twitter: @MarcoInEnglish • LinkedIn, Facebook also available • E-Mail: mzehe (at) mozilla (dot) com

More Related