How the iPad Can Save Accessibility

How the iPad can save Accessibility

Marty DeAngelo#iPada11y

1

2

3

Last year’s SxSW got me thinking about how mobile could HELP the disabled

4

Accessibility is an under-utilized aspect of design

5

6

Can’t access Flash content

Content presented without backups

Small text

Small click areas

Hover/mouse required

7

17%

Sources: American Federation for the Blind, Congressional Committee findings for ADA

8

17%24M 2M

DEAF

21.5M 1.3M

LEGALLY BLIND

120K

TOTALLY BLIND

26M

HEARING ISSUES

VISION ISSUES

MOTOR SKIILS ISSUES

Sources: American Federation for the Blind, Congressional Committee findings for ADA

9

What we have here is a failure to communicate

Trying to Solvethe Problem

10

But despite all of the improvements in UX, accessibility continued to lag behind…

Not that there weren’t many advocates out there…

11

While everyone has some issues with the web, the disabled have some more significant ones.

• Video without audio/textual backup• Audio without a visual/textual backup

• Images sans textual backup• Content that can’t be accessed without a mouse

It’s about ACCESS to the contentbeing denied

12

The Problem

Issues Found by the Disabled

13

Issue Vision Hearing Motor Skills

Structurally unsound markup/format

Flash-only content

Image-content without backups

Video content without audio backup

Video/audio content without text backup

Content with hover states

Content only accessed with a mouse

Small text sizes

Small click/link target sizes

Auto-play video/audio

Long content without ways to skip

Insufficient contrast between text/background

Inability to zoom text/page

Lack of noticeable link text

14

With mobile,the gap got wider

15

Web accessibility is getting worse –there’s an increasing gap between innovation and accessibility.

-- Jared SmithChanging the Web Accessibility Game Plan, SxSW 2011

“.”

16

Usability Issues

Mobile Issues

Vision-Impaired Mobility-ImpairedHearing-Impaired Non-Disabled

Web Issues

How much do the following issues impact your use of the web?

Source: Accessibility survey conducted on Wufoo 2012http://martytdx.com/ux/2011/12/sxsw-accessibility-survey/

17

The Issues

Issues Found with Early Mobile Phones

18

Issue Disabled Non-Disabled

Structurally unsound markup/format

Formatting issues

Reliance on images for content

Small Text Size

Mouse-based events

Small click areas

Scripts unavailable

Flash unavailable

Slow/unreliable loading

Difficulty with long pages

19http://www.flickr.com/photos/odephoto/4446928898/lightbox/

20Source: AlltheMost.comhttp://www.allthemost.com/fastest-mobile-browser

21

22

23

Issues Found by the Disabled

24

Issue Vision Hearing Motor Skills MOBILE

Structurally unsound markup/format

Flash-only content

Image-content without backups

Video content without audio backup

Video/audio content without text backup

Content with hover states

Content only accessed with a mouse

Small text sizes

Small click/link target sizes

Auto-play video/audio

Long content without ways to skip

Insufficient contrast between text/background

Inability to zoom text/page

Lack of noticeable link text

25

Even as the mobile web got betteraccessibility lagged…

Smartphone Issues

26

Issue Disabled Non-Disabled

Structurally unsound markup/format

Formatting issues

Reliance on images for content

Small Text Size

Mouse-based events

Small click areas

Scripts unavailable

Flash unavailable

Slow/unreliable loading

Difficulty with long pages

Touchscreens provide no tactile input (eg keyboard)

27

Mobile Issues = Disabled Issues

but no one did anything

28

Web accessibility is extremely important. If a website or information or app is not accessible it can make anyone feel disabled.

“.”

Source: Accessibility survey conducted on Wufoo 2012http://martytdx.com/ux/2011/12/sxsw-accessibility-survey/

29

• People’s expectations of the mobile web were lower – partially based on previous experience and partially because the small screen wasn’t optimal for extensive web browsing.

• Designers saw the iPhone (and early Android) as a size issue – that they just had to fit the width of the screen.

30

Put Your Content in My Pocket, Parts 1 & 2by CRAIG HOCKENBERRY

• http://www.alistapart.com/articles/putyourcontentinmypocket• http://www.alistapart.com/articles/putyourcontentinmypocketpart2

“…you can begin to make some simple changes

that adapt your content to the iPhone. Finally, you may

wish to make a version of your site that

is targeted directly at the iPhone: a site fully optimized

for the device.”

31

“

.”Source: Christopher Schmidt - iPhone-specific Web Development Misguided (9-11-2007)http://christopherschmitt.com/2007/09/11/iphone-specific-web-development-misguided/

32

Tablet Issues

33

Issue Disabled Non-Disabled

Structurally unsound markup/format

Formatting issues

Reliance on images for content

Small Text Size

Mouse-based events

Small click areas

Scripts unavailable

Flash unavailable

Slow/unreliable loading

Difficulty with long pages

Touchscreens provide no tactile input (eg keyboard)

34

The

ANGRY MOBILE USERSeffect

35

• People’s gradually improving experiences on the mobile web set the bar higher

• The larger screen set expectations for a ‘normal’ web experience.

• Mobile sites as a second-class experience was no longer acceptable.

36

And guess what?The fixes they made helped accessibility

37

Impact on Accessibility

38

Issue Status

Formatting Issues Somewhat fixed

Reliance on images for content Fixed

Mouse-based events (not touch-friendly) Mostly fixed

Small click areas Fixed

Scripts unavailable Fixed

Flash unavailable Somewhat fixed

Slow/unreliable Mostly fixed

Font size Mostly fixed

Touch screens give no tactile response Limited fixes

39

But there is still a ways to go

The more things change…

40

1 2 3 4 5

Inaccessible

Flash content

Content not

accessible

Content

without

alternatives

Controls not

accessible

Broken page

formats

Text contrast

issues

Site can't be

zoomed

Can't enlarge /

zoom site text

Small click

areas

Auto-play

content

Bad content

hierarchy

Site requires

hover/ mouse

events

Vision-ImpairedHearing-ImpairedMobility-ImpairedNon-Disabled

Do you experience issues with the following aspects of the mobile web? Strongly Disagree Neutral Strongly Agree

41

How can we fix it ?„ HTML 5„ CSS 3„ Mobile First„ Responsive Design„ Future developments

42

HTML5

Source (image): TheChive.com

•

•

•

•

•

43

•

•

•

44

45

<body>

<nav role=”navigation”>

<ul role=”menubar”>

<li role=”menuitem”><a href=”nav1.htm”>navigation item 1</li> ...

<li role=”menuitem”><a href=”nav3.htm”>navigation item 5</li>

</ul>

</nav>

<section id=”main” role=”section”>

<h1>Page Title</h1>

Donec lobortis, enim non blandit aliquet, velit enim rhoncus odio, nec mattis odio risus

non sem. Donec faucibus odio et tortor semper lacinia. Nullam pretium neque.

<h2>Section Title</h2>

Sed turpis nulla, pharetra luctus vulputate eu, fringilla id arcu. Suspendisse ultrices,

velit id varius fringilla, velit erat viverra enim, non sollicitudin mauris felis ac turpis.

<aside class="illustration">

<img src="heart_tissue.png” alt=”heart tissue sample” title=”Example of

diseased heart tissue” />

<caption="Figure1: Heart tissue displaying degradation of cardiac cell types” />

</aside>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus venenatis

metus ac volutpat. In sollicitudin condimentum justo, at egestas purus aliquet sit

amet. Proin ut enim ac tortor sodales mattis ac in odio. Proin vitae gravida dui duis

congue facilisis sollicitudin.

</section>

</body>

46

47Source (image): CamenDesign.comhttp://camendesign.com/code/video_for_everybody

<video controls>

<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>

<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,

mp4a.40.2"„>

<source src="video.swf" type='flash; codecs="avc1.42E01E, mp4a.40.2"'>

<embed src="http://blip.tv/play/gcMVgcmBAgA%2Em4v"

type="application/x-shockwave-flash" width="1024" height="798"

allowscriptaccess="always" allowfullscreen="true"></embed>

video not supported

</video>

48

<audio controls>

<source src="audio.mp3" type='audio/mp4; codecs="avc1.42E01E,

mp4a.40.5"'>

<source src=“audio.ogg" type=„audio/ogg; codecs="theora, vorbis"„>

audio not supported

</audio>

49

You can tell the browser to play the video or audio automatically, but you almost certainly shouldn’t, as many users (and particularly those using assistive technology, such as a screen reader) will find it highly intrusive. Users on mobile devices probably won’t want you using their bandwidth without them explicitly asking for the video.

…Providing controls is approximately 764 percent better than auto-playing your video.

“ .

”Source: HTML5 Audio and Video: What you Must Know (10/25/2010) - Bruce Lawson and Remy Sharphttp://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/

50

•

•

•

51Source: Opera synchronized captions demohttp://people.opera.com/brucel/demo/video/multilingual-synergy.html

52Source: Sorrowind Studioshttp://sorrowind.net/vilify/

53

“ .

”Source: Accessibility survey conducted on Wufoo 2012http://martytdx.com/ux/2011/12/sxsw-accessibility-survey/

54All images and text from “Star Wars” copyright Lucasfilm Ltd.

55

I prefer native closed captioning over auto-translation (ex. YouTube)

I prefer closed captioning over transcripts

I often use closed-captioning provided by video services (like YouTube)

I would use closed-captioning if provided on my device

I don’t use closed-captioning

4.2

4.2

3.3

4.0

2.5

Source: Accessibility survey conducted on Wufoo 2012http://martytdx.com/ux/2011/12/sxsw-accessibility-survey/

56Source: Basic HTML5, ARIA, and Screen Readers – Jason Kisshttp://www.accessibleculture.org/research-files/ozewai2011/basic-html5-aria-screenreaders-presentation.html

57

•

•

•

58REFERENCE: http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/

59

CSS3: Transitions, Tranforms & Animations (oh my)

•

•

•

•

•

•

61

Transforms can be used manipulate shapes by rotating, scaling, skewingand translating (moving in x-y coordinates).

Source (CSS Warp): http://csswarp.eleqtriq.com/Source (AT-AT): http://anthonycalzadilla.com/css3-ATAT/index.html

62Source: Tutorialzinehttp://tympanus.net/TipsTricks/CSS3MenuHoverEffect/

Transitions can be used to change over timed period Color, Size,

Opacity and styles (border-radius, drop-shadow, etc.).

63

Animations can create animated elements such as pulsing boxes.

However, support is less than transforms or transitions.

Source: Mozilla CSS DemoStudiohttps://developer.mozilla.org/en-US/demos/detail/css-tricks/launch

64

65Source: Tutorialzinehttp://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html

Animations

66

Typography

Source (top):TrentWalton.comhttp://trentwalton.com/bgclip/

Source (bottom):PG Web Designhttp://pgwebdesign.net/blog/3d-css-shadow-text-tutorial

67

But how do I know what features work NOW?

De

skto

pM

ob

ile

68

Tranforms Transitions Animations @Fontface

Google Chrome

Firefox

Internet Explorer (9 only)

Opera

Safari

Safari /iOS (>4.1)

Android 2.3 & Older

Android 3.0+ (4.0+)

Blackberry (6.0) (6.0) (6.0) (6.0+)

Blackberry (Tablet) mixed

Firefox

Opera (Mini –partial)

(Mini –No)

(Mini –No)

WebOS

Internet Explorer

69

HTML5Please.comCanIUse.com

QuirksmodeMobilehtml5.org/

findmebyip.com/litmus/

70

Rethink your mobile strategy -accessibly

As Luke Wroblewski says,

“…designing for mobile first not

only prepares you for the

explosive growth and new

opportunities on the mobile

internet, it forces you to focus

and enables you to innovate in

ways you previously couldn’t.”

– Mobile First

71

• Determine the most important

information you need/want to convey.

• Consider how users are going to

interact with your content.

• Understand in what context users are

likely to visit and use your site and

content.

Many of the things that we’ll

consider for our mobile users will

improve the experience for

disabled users.72

73

“…we need to practice responsive

web design. We can embrace the

flexibility inherent to the web,

without surrendering the control

we require as designers. All by

embedding standards-based

technologies in our work, and by

making a slight change in our

philosophy toward online design.”

– Ethan Marcotte, Responsive Web Design

74

More info: http://www.lukew.com/ff/entry.asp?1509

•

•

•

75

“”

Source: Responsive Design -- Peter Buihttp://magazine.joomla.org/issues/Issue-Nov-2011/item/594-Responsive-Design

76

77

•

•

•

•

78

Take advantage of better accessibility on the devices themselves

79

“.”

80

“

”Source: MobileFuture: Mobile Ability – The Transformational Impact of Wireless Innovation for People with Disabilitieshttp://www.mobilefuture.org/content/pages/mobile_ability/

81

82

83

84Source: Ars Technicahttp://static.arstechnica.com/apple/accessbility-settings-iphone-4.jpg

Accessibility Optionsin iOS3

85

Possibly the best suites of accessibility functions currently available on mobile.

iOS Functions

• VoiceOver• Zoom• Large Text• Speak Selection• Speak Auto-Text• Voice Activation (via Siri)• Vibration and badges

86

•

•

•

87Source: Crackberry.comhttp://crackberry.com/quick-tip-change-look-your-blackberry-using-accessibility-options

•

•

•

•

88

Windows Phone has among the fewest options for accessibility, limited to:

•

•

•

Text reading

Voice over text

Spoken auto-text (corrections, etc.)

Voice activation

Visual Voicemail

Zoom page

Text contrast

Functional buttonsSome

models

Physical keyboard

Auditory response

Tactile response

Screen Reader Support

Wireless Braille Display

Accessibility Apps

Making sense of the Mobile Accessibility

89

90

“.

”Source: Accessibility survey conducted on Wufoo 2012http://martytdx.com/ux/2011/12/sxsw-accessibility-survey/

91

“.

”Source: Accessibility survey conducted on Wufoo 2012http://martytdx.com/ux/2011/12/sxsw-accessibility-survey/

Don’t count out the devices themselves - apps

92Source: Disaboom.comhttp://www.disaboom.com/assistive-technology-general/smartphone-apps-provide-assistive-technology-for-disabled

Apps that scan bar codes and read the price, compare it to nearby stores and even read nutritional information.

93

App Revolutionizes Touch-Screen Tablets For the Blind ::

• Design Taxi: http://designtaxi.com/news/350936/App-Revolutionizes-Touch-Screen-Tablets-For-the-Blind/• Stanford.edu: http://news.stanford.edu/news/2011/october/touchscreen-braille-writer-100711.html

Apps have issues

94

•

•

•

•

Web App Standardization

95

The ringmark system rates web standards compliance into 3 rings:

•

•

•

96Source: Kindle – Amazon.com | Nook – BarnesandNoble.com

97

Mobile Issues (eReaders)

98

1 2 3

Text reading

Voice over text

Text reading speed settings

Larger text sizes (#) 6 8 8 8 6 6 8/5 5

Zoom page

Text contrast

Physical keyboard

Tactile response

Auditory response

Screen reader support

Wireless braille display

Voice activation

NotesTtS only on eBooks for

Kindle

Web only has 5 sizes

99

“.”

Source: Accessibility survey conducted on Wufoo 2012http://martytdx.com/ux/2011/12/sxsw-accessibility-survey/

100

Conclusion

Conclusion

101

•

•

•

•

•

•

•

THANK YOU

102

http://martytdx.com/ux/2011/12/sxsw-accessibility-survey/

Thanks to those who took my survey, and those who helped me promote it: Shawn Rhine Kalback, Robin Christopherson and Laura Mauldin

How the iPad Can Save Accessibilityhttp://www.slideshare.net/martytdx/how-the-ipad-can-save-accessibility

103

Image CreditsPage Source

11 http://www.canadianblindsports.ca/eng/images/NationalsPictures048.jpg

18 http://www.blogcdn.com/www.engadget.com/media/2007/10/centro_blazer.jpg

19 http://www.flickr.com/photos/odephoto/4446928898/

20 http://www.allthemost.com/fastest-mobile-browser

23 http://www.thechive.com

30 http://www.alistapart.com/articles/putyourcontentinmypocket

42 http://www.thechive.com

47 http://camendesign.com/code/video_for_everybody

50 http://people.opera.com/brucel/demo/video/multilingual-synergy.html

51 http://sorrowind.net/vilify/

58 http://www.accessibleculture.org/research-files/ozewai2011/images/html5AriaTestCase.png

59 http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/

61 http://csswarp.eleqtriq.com/

61 http://anthonycalzadilla.com/css3-ATAT/index.html

62 http://tympanus.net/TipsTricks/CSS3MenuHoverEffect/

63 https://developer.mozilla.org/en-US/demos/detail/css-tricks/launch

64 http://neography.com/experiment/circles/solarsystem/

104

Image CreditsPage Source

65 http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html

66 http://trentwalton.com/bgclip/

66 http://pgwebdesign.net/blog/3d-css-shadow-text-tutorial

84 http://static.arstechnica.com/apple/accessbility-settings-iphone-4.jpg

86 http://media1.android-apps.com/images/pname/c/com.pilot51.voicenotify/image1.png

87 http://crackberry.com/quick-tip-change-look-your-blackberry-using-accessibility-options

88 http://technomondo.com/2011/09/16/the-complete-guide-to-windows-8-metro-control-panel/

92 http://www.disaboom.com/assistive-technology-general/smartphone-apps-provide-assistive-

technology-for-disabled

93 http://editorial.designtaxi.com/news-blindtabletapp0311/2.jpg 101

95 http://reviews.cnet.com/8301-13970_7-57385707-78/facebook-aims-to-whip-the-mobile-web-into-shape/

96 Kindle DX - http://www.amazon.com/gp/product/B002GYWHSQ/ref=famstripe_kkdx

96 Kindle Fire - http://www.amazon.com/gp/product/B0051VVOB2/ref=famstripe_kf

96 Nook - http://www.barnesandnoble.com/p/nook-color-barnes-noble/1100437663

97 Pugilist - http://www.flashfictionfriday.com/wp-content/uploads/2011/04/pugilist.jpg

97 Knockout - http://www.depositphotos.com