Making your web apps accessible for Firefox OS and others Marco Zehe Mozillas accessibility QA engineer amp evangelist At Mozilla since December 2007 Worked at Freedom Scientific before Blind from birth ID: 372316
Download Presentation The PPT/PDF document "Tipps on accessibility in apps" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Tipps on accessibility in apps
Making your web apps accessible for Firefox OS and othersSlide2
Marco Zehe
Mozilla‘s accessibility QA engineer & evangelist
At
Mozilla since December 2007
Worked at Freedom Scientific before
Blind from birthSlide3
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 usualSlide4
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“Slide5
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 screensSlide6
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?Slide7
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!Slide8
Test in Firefox for Android
Turn on TalkBack in Accessibility settings
Install your app
App uses
Firefox as runtime
U
se
TalkBack gestures to controlSlide9
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 screensSlide10
Contact
Blog:
http://www.marcozehe.de
Twitter: @MarcoInEnglish
LinkedIn, Facebook also available
E-Mail: mzehe (at) mozilla (dot) com