This presentation was given by the Yahoo Accessibility Lab at the Web 2.0 Expo in New York to show how we've been using Flip cameras, screen capturing software, and more to do accessibility testing and education.

1. Accessibility Testing
Nate Ebrahimoon
Ted Drake
Yahoo! Accessibility Lab
* Tweet #w2eAccess with your app for live testing *
Thursday, October 13, 2011
define accessibility: giving access to people with dis
accessibility at Yahoo!: making sure every Yahoo! product is accessible.
whether you’re blind, deaf, paralyzed etc. we make sure you can use Yahoo! products

2. Why accessibility testing
is important
What we use Flip cams
and screen captures for
How we do it
Live Demo
* Tweet #w2eAccess with your app for live testing *
Thursday, October 13, 2011
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

3. Why this is important?
Deaf child with Pretty Eyes Some rights reserved by miszpinay
Thursday, October 13, 2011
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

4. Why this is important?
500 Million come to Yahoo!
Deaf child with Pretty Eyes Some rights reserved by miszpinay
Thursday, October 13, 2011
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

5. Why this is important?
500 Million come to Yahoo!
1 Billion People w/disability
Deaf child with Pretty Eyes Some rights reserved by miszpinay
Thursday, October 13, 2011
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

6. Why this is important?
500 Million come to Yahoo!
1 Billion People w/disability
$1,000,000,000,000
Deaf child with Pretty Eyes Some rights reserved by miszpinay
Thursday, October 13, 2011
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

7. Why this is important?
Deaf child with Pretty Eyes Some rights reserved by miszpinay
Thursday, October 13, 2011
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

8. Why accessibility testing
is important
What we use Flip cams
and screen captures for
How we do it
Live Demo
* Tweet #w2eAccess with your app for live testing *
Thursday, October 13, 2011
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.

9. Archiving Projects
Köln / Cologne: disabled musician... Some rights reserved by wwwuppertal
Thursday, October 13, 2011
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

10. Accessible
Ads
Thursday, October 13, 2011
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

11. Open Captioned ‘Grown Ups’ Ad
Thursday, October 13, 2011
Yahoo Search ad with open captions... by including captions people who are deaf can now
experience the ad.

12. Interviews
Thursday, October 13, 2011
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.

13. Thursday, October 13, 2011
http://youtu.be/P7Dz6IWrCfE

14. Tutorials
Thursday, October 13, 2011
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.

15. Single Switch Tutorial
Thursday, October 13, 2011
http://youtu.be/FpJCJsP3BMc

16. Customer Support
Thursday, October 13, 2011
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.

17. Yahoo! Mail
Thursday, October 13, 2011
http://youtu.be/yhpoTxn08O0

18. Mobile Testing
Chicago-SOBCon 046 Some rights reserved by bjmccray
Thursday, October 13, 2011
Sportacular... start by using the app just like any user... no pre use / practice.
Then we follow up with additional videos on specific problems

19. Yahoo! Sportacular iPad App
Thursday, October 13, 2011

20. MarketDash Ads
Thursday, October 13, 2011

21. Why accessibility testing
is important
What we use Flip cams
and screen captures for
How we do it
Live Demo
* Tweet #w2eAccess with your app for live testing *
Thursday, October 13, 2011

22. Tools
Thursday, October 13, 2011
Screenflow (mac) and Captivate (PC) for capturing onscreen movements and sounds
Audacity + SoundFlower (mac) for capturing audio
Flip Camera
iMovie (Final Cut)

23. Tools
• Screen Capture:
• ScreenFlow (mac)
• Captivate (PC)
Thursday, October 13, 2011
Screenflow (mac) and Captivate (PC) for capturing onscreen movements and sounds
Audacity + SoundFlower (mac) for capturing audio
Flip Camera
iMovie (Final Cut)

24. Tools
• Screen Capture:
• ScreenFlow (mac)
• Captivate (PC)
• Audio Capture:
• Audacity + SoundFlower (mac)
• External Microphone
Thursday, October 13, 2011
Screenflow (mac) and Captivate (PC) for capturing onscreen movements and sounds
Audacity + SoundFlower (mac) for capturing audio
Flip Camera
iMovie (Final Cut)

25. Tools
• Screen Capture:
• ScreenFlow (mac)
• Captivate (PC)
• Audio Capture:
• Audacity + SoundFlower (mac)
• External Microphone
• Video:
• Flip Camera
Thursday, October 13, 2011
Screenflow (mac) and Captivate (PC) for capturing onscreen movements and sounds
Audacity + SoundFlower (mac) for capturing audio
Flip Camera
iMovie (Final Cut)

26. Tools
• Screen Capture:
• ScreenFlow (mac)
• Captivate (PC)
• Audio Capture:
• Audacity + SoundFlower (mac)
• External Microphone
• Video:
• Flip Camera
• Editing:
Thursday, October 13, 2011
• iMovie (Final Cut)
Screenflow (mac) and Captivate (PC) for capturing onscreen movements and sounds
Audacity + SoundFlower (mac) for capturing audio
Flip Camera
iMovie (Final Cut)

27. Helpful Hints
Thursday, October 13, 2011
clean the device before filming
flips do not have good audio, you may need to do secondary source recordings
keep device near face
watch for glare
Use open captions for screen reader voice, advice

28. Helpful Hints
• Clean the device before filming
Thursday, October 13, 2011
clean the device before filming
flips do not have good audio, you may need to do secondary source recordings
keep device near face
watch for glare
Use open captions for screen reader voice, advice

29. Helpful Hints
• Clean the device before filming
• Flip cameras have bad audi
Thursday, October 13, 2011
clean the device before filming
flips do not have good audio, you may need to do secondary source recordings
keep device near face
watch for glare
Use open captions for screen reader voice, advice

30. Helpful Hints
• Clean the device before filming
• Flip cameras have bad audi
• Keep device near face
Thursday, October 13, 2011
clean the device before filming
flips do not have good audio, you may need to do secondary source recordings
keep device near face
watch for glare
Use open captions for screen reader voice, advice

31. Helpful Hints
• Clean the device before filming
• Flip cameras have bad audi
• Keep device near face
• Watch for glare
Thursday, October 13, 2011
clean the device before filming
flips do not have good audio, you may need to do secondary source recordings
keep device near face
watch for glare
Use open captions for screen reader voice, advice

32. Helpful Hints
• Clean the device before filming
• Flip cameras have bad audi
• Keep device near face
• Watch for glare
• Use open captions for screen
reader voice, advice
Thursday, October 13, 2011
clean the device before filming
flips do not have good audio, you may need to do secondary source recordings
keep device near face
watch for glare
Use open captions for screen reader voice, advice

33. Common Problems
Thursday, October 13, 2011
common problems identified with videos:
unlabeled buttons
custom gestures conflicting with voiceover
images without alt attribute
unlabeled forms
bad table markup
iframes without labels
improper use of isAccessible on webview

34. Common Problems
• Unlabeled buttons
Thursday, October 13, 2011
common problems identified with videos:
unlabeled buttons
custom gestures conflicting with voiceover
images without alt attribute
unlabeled forms
bad table markup
iframes without labels
improper use of isAccessible on webview

35. Common Problems
• Unlabeled buttons
• Custom gestures conflicting with voiceover
Thursday, October 13, 2011
common problems identified with videos:
unlabeled buttons
custom gestures conflicting with voiceover
images without alt attribute
unlabeled forms
bad table markup
iframes without labels
improper use of isAccessible on webview

36. Common Problems
• Unlabeled buttons
• Custom gestures conflicting with voiceover
• Images without alternate text
Thursday, October 13, 2011
common problems identified with videos:
unlabeled buttons
custom gestures conflicting with voiceover
images without alt attribute
unlabeled forms
bad table markup
iframes without labels
improper use of isAccessible on webview

37. Common Problems
• Unlabeled buttons
• Custom gestures conflicting with voiceover
• Images without alternate text
• Unlabeled forms
Thursday, October 13, 2011
common problems identified with videos:
unlabeled buttons
custom gestures conflicting with voiceover
images without alt attribute
unlabeled forms
bad table markup
iframes without labels
improper use of isAccessible on webview

38. Common Problems
• Unlabeled buttons
• Custom gestures conflicting with voiceover
• Images without alternate text
• Unlabeled forms
• Bad HTML markup. Mobile doesn’t justify tag soup
Thursday, October 13, 2011
common problems identified with videos:
unlabeled buttons
custom gestures conflicting with voiceover
images without alt attribute
unlabeled forms
bad table markup
iframes without labels
improper use of isAccessible on webview

39. Common Problems
• Unlabeled buttons
• Custom gestures conflicting with voiceover
• Images without alternate text
• Unlabeled forms
• Bad HTML markup. Mobile doesn’t justify tag soup
• Iframes without labels
Thursday, October 13, 2011
common problems identified with videos:
unlabeled buttons
custom gestures conflicting with voiceover
images without alt attribute
unlabeled forms
bad table markup
iframes without labels
improper use of isAccessible on webview

40. Common Problems
• Unlabeled buttons
• Custom gestures conflicting with voiceover
• Images without alternate text
• Unlabeled forms
• Bad HTML markup. Mobile doesn’t justify tag soup
• Iframes without labels
• Focus control
Thursday, October 13, 2011
common problems identified with videos:
unlabeled buttons
custom gestures conflicting with voiceover
images without alt attribute
unlabeled forms
bad table markup
iframes without labels
improper use of isAccessible on webview

41. Success Stories
Thursday, October 13, 2011
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.

42. Thursday, October 13, 2011
Yahoo moving from our index to bing

43. Publications
Thursday, October 13, 2011

44. • Blog: accessibility.yahoo.com
• YouTube: /YahooAccessibility
• Twitter: @YahooAccess
• Facebook: /YahooAccessibility
• Flickr: /YAccessLab
Thursday, October 13, 2011
blog, youtube, internal repository when these go on youtube they are captioned

45. Why accessibility testing
is important
What we use Flip cams
and screen captures for
How we do it
Live Demo
* Tweet #w2eAccess with your app for live testing *
Thursday, October 13, 2011

46. Thursday, October 13, 2011

47. Thursday, October 13, 2011

48. Yahoo! Accessibility Lab
Accessibility.Yahoo.Com
Thursday, October 13, 2011