/
Tipps on accessibility in apps Tipps on accessibility in apps

Tipps on accessibility in apps - PowerPoint Presentation

phoebe-click
phoebe-click . @phoebe-click
Follow
396 views
Uploaded On 2016-06-21

Tipps on accessibility in apps - PPT Presentation

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

firefox turn screen accessibility turn firefox accessibility screen settings reader test screens web left spoken activate gestures apps mozilla

Share:

Link:

Embed:

Download Presentation from below link

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.


Presentation Transcript

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