Testing Accessibility on Mobile Applications with Flip Cameras and more

Accessibility TestingNate Ebrahimoon

Ted DrakeYahoo! Accessibility Lab

* Tweet #w2eAccess with your app for live testing *

Thursday, October 13, 2011

define accessibility: giving access to people with disaccessibility at Yahoo!: making sure every Yahoo! product is accessible. whether you’re blind, deaf, paralyzed etc. we make sure you can use Yahoo! products

Why accessibility testing is important

What we use Flip cams and screen captures for

How we do it

Live Demo



Today we’re going take a look at 4 main points:conclude with live demo where we’re asking you, our audience, to submit your company or personal built app and we’ll do a live accessibility testing demo Walk away from session knowing: Who people with disabilities are and why they matter, How PWD access the web, and some new easy ways to make old stuff better using flip and screen cap

Why this is important?

Deaf child with Pretty Eyes Some rights reserved by miszpinay


We are the premiere digital media company.

Every month we attract more than half a billion consumers, Many of whom are disabled.

Just to get a perspective, According to the World Health Organiza3on, there are 1 Billion people with disabili3es in the world

Common misconcep3on = peeps w/dis are poor cap in hand beggers = false. People with disabilities are active consumers. In US alone, annual aggregate income of $1 Trillion... that’s a huge untapped market!

we want to make sure we reach this market thus we create accessible products. We are a small team. As a small team, we’ve found that media recordings have allowed us to work to scale

http://www.flickr.com/photos/dorkiee/5268226624/


http://creativecommons.org/licenses/by-nc-nd/2.0/


http://www.flickr.com/photos/dorkiee/




500 Million come to Yahoo!
















1 Billion People w/disability
















1 Billion People w/disability

$1,000,000,000,000















How we do it

Live Demo



Which brings us to the purpose this session. How we use flip cams and screen captures to increase productivity. Let’s first take a look at some use cases.

Köln / Cologne: disabled musician... Some rights reserved by wwwuppertal

Archiving Projects


problem: Lots of stuff doesn’t live long online so what do we do if we want to save that stuff permanently solution: We’ve found that Screen Captures and Flip cam are an easy and great solution

http://www.flickr.com/photos/wwwuppertal/6169563592/in/pool-49918967@N00/

http://www.flickr.com/photos/wwwuppertal/6169563592/in/pool-49918967@N00/

http://creativecommons.org/licenses/by-nc/2.0/

http://creativecommons.org/licenses/by-nc/2.0/

http://www.flickr.com/photos/wwwuppertal/

http://www.flickr.com/photos/wwwuppertal/

Accessible Ads


Last year on the 20th anniversary of Americans with Disability Act we featured our first accessible ad. In doing so we had to contact 3rd party ad agencies, as yahoo ads are mostly 3rd party, and talk them through how to make an ad accessible. As we all know Ads are constantly changing and have temp life. but we needed a way to show other ads agency’s what an accessible ad looks like (without having to explain) / celebrate accomplishment... so we used screen captures

Open Captioned ‘Grown Ups’ AdThursday, October 13, 2011

Yahoo Search ad with open captions... by including captions people who are deaf can now experience the ad.

Interviews


Flip cams are small and easy... Look at ted he made this interview happen on the spot on the fly with no problems. Last year we attended the CSUN disability and technology conference. as we were Walking around EXPO we ran into several people who could potentially bring significant value to our org and users. But we can’t take these people physically home with us... or can we? Convenience of Flip Cam allowed us to record,edit, and share our experiences in no time.


http://youtu.be/P7Dz6IWrCfE

Tutorials


Somethings are unexplainable in text and Let’s face it! No One reads Manuals anymore. Text just doesn’t work... People want/need to hear and see how something works to fully grasp it. So we’ve recorded many tutorials with a flip camera and the use of screenflow. In doing so, we draw in recognition to our team and traffic to our sites.

Single Switch TutorialThursday, October 13, 2011

http://youtu.be/FpJCJsP3BMc

Customer Support


Yahoo! Mail launched as most accessible App on the web. In doing so, the app pioneered many features that have never been used on the web. For instance, the use of toolbars, tab sets, etc. But these meant nothing to our users unless we had an effective way to communicate how to use the new Yahoo! Mail. Traditionally customer support has been in text help pages, but that’s no fun... videos / media is fun. So we delivered on screen demonstration tutorials and have seen terrific response.

Yahoo! MailThursday, October 13, 2011

http://youtu.be/yhpoTxn08O0

Chicago-SOBCon 046 Some rights reserved by bjmccray

Mobile Testing

Thursday, October 13, 2011Sportacular... start by using the app just like any user... no pre use / practice. Then we follow up with additional videos on specific problems

http://www.flickr.com/photos/bjmccray/4568175553/in/photostream/

http://www.flickr.com/photos/bjmccray/4568175553/in/photostream/



http://www.flickr.com/photos/bjmccray/

http://www.flickr.com/photos/bjmccray/

Yahoo! Sportacular iPad AppThursday, October 13, 2011

MarketDash AdsThursday, October 13, 2011



How we do it

Live Demo



Tools


Screenflow (mac) and Captivate (PC) for capturing onscreen movements and soundsAudacity + SoundFlower (mac) for capturing audioFlip CameraiMovie (Final Cut)

Tools• Screen Capture:

• ScreenFlow (mac)

• Captivate (PC)





• Captivate (PC)

• Audio Capture:

• Audacity + SoundFlower (mac)

• External Microphone





• Captivate (PC)

• Audio Capture:



• Video:

• Flip Camera





• Captivate (PC)

• Audio Capture:



• Video:

• Flip Camera

• Editing:

• iMovie (Final Cut)Thursday, October 13, 2011


Helpful Hints


clean the device before filmingflips do not have good audio, you may need to do secondary source recordingskeep device near facewatch for glareUse open captions for screen reader voice, advice

Helpful Hints

•Clean the device before filming



Helpful Hints


•Flip cameras have bad audi



Helpful Hints



•Keep device near face



Helpful Hints




•Watch for glare



Helpful Hints




•Watch for glare

•Use open captions for screen reader voice, advice



Common Problems

Thursday, October 13, 2011common problems identified with videos:unlabeled buttonscustom gestures conflicting with voiceoverimages without alt attributeunlabeled formsbad table markupiframes without labelsimproper use of isAccessible on webview

Common Problems• Unlabeled buttons



• Custom gestures conflicting with voiceover




• Images without alternate text





• Unlabeled forms





• Unlabeled forms

• Bad HTML markup. Mobile doesn’t justify tag soup





• Unlabeled forms


• Iframes without labels





• Unlabeled forms


• Iframes without labels

• Focus control


Success Stories


As Yahoo was transitioning to the Microsoft Bing search index there was a confusion about alt attributes on images. The image url was placed in the alt and title attribute, causing a horrible experience for screen reader users. After showing them a video of the experience we were able to meet with product managers to discuss the misunderstanding and fix the problem.


Yahoo moving from our index to bing

Publications


• Blog: accessibility.yahoo.com

• YouTube: /YahooAccessibility

• Twitter: @YahooAccess

• Facebook: /YahooAccessibility

• Flickr: /YAccessLab


blog, youtube, internal repository when these go on youtube they are captioned



How we do it

Live Demo



Yahoo! Accessibility LabAccessibility.Yahoo.Com


Testing Accessibility on Mobile Applications with Flip Cameras and more

Technology

Transcript of Testing Accessibility on Mobile Applications with Flip Cameras and more