Tips on Making Web Apps Accessible for Firefox OS and Others

Slide Note

Learn how to make your web apps accessible for users of Firefox OS and other platforms through proper labeling, use of alt text, managing foreground screens, testing with a screen reader simulator, and utilizing gestures for accessibility testing on devices like Firefox for Android.

geovannaw Follow

Uploaded on Nov 25, 2024 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript

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