Usability has come a long way since the dark days before "Designing with Web Standards". Now nearly all companies see the value of UX in their digital designs. But despite heightened focus on the user and a growing awareness of accessibility concerns, implementation of accessibility standards have often fallen victim to time pressures and obsolete design practices. Disabled users struggle through sites missing alt tags, keyboard inputs or text alternatives. Enter devices like the iPhone & Android … and the iPad. With the proliferation of non-desktop devices and browsers like tablets and gestural smartphones, suddenly more people are finding that the web isn't as nice and clean as they remembered: broken formatting, too small text, hover functionality that doesn’t work, and entire swaths of the web rendered as Flash-based wastelands that millions can’t access. We've now discovered that by solving for many of the issues that iOS and other mobile users face, we can also solve for the most prevalent accessibility issues. Through combinations of better markup, HTML5 and CSS3 functionality and better scripting, we can serve two masters at once. Better yet, in some cases, we can take advantage of the accessibility capabilities built into newer mobile devices to make the digital experience even better than they would get on the 'old web'.

1. How the iPad can save Accessibility
Marty DeAngelo
#iPada11y
1

2. 2

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

4. Accessibility is an
under-utilized
aspect of design
4

5. 5

6. Can’t access Flash content
Content presented without backups
Small text
Small click areas
Hover/mouse required
6

7. 17%
Sources: American Federation for the Blind, Congressional Committee findings for ADA
7

8. 17%
24M 2
HEARING ISSUES
M
DEAF
21 .5M 1.3M 120K
VISION ISSUES LEGALLY BLIND TOTALLY BLIND
26M
MOTOR SKIILS
ISSUES
Sources: American Federation for the Blind, Congressional Committee findings for ADA
8

9. What we have here is a
failure to communicate
9

10. Trying to Solve
the Problem
Not that there weren’t many advocates out there…
But despite all of the improvements in UX, accessibility
continued to lag behind…
10

11. 11

12. The Problem
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 content
being denied
12

13. Issues Found by the
Disabled
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
13

14. With mobile,
the gap got wider
14

15. “ Web accessibility is getting worse –
there’s an increasing gap between
”
innovation and accessibility.
-- Jared Smith
.
Changing the Web Accessibility Game Plan, SxSW 2011
15

16. Vision-Impaired Mobility-Impaired
Usability Issues Hearing-Impaired Non-Disabled
Web Issues
How much do the following issues impact your use of the web?
Mobile Issues
Source: Accessibility survey conducted on Wufoo 2012
http://martytdx.com/ux/2011/12/sxsw-accessibility-survey/ 16

17. The Issues
17

18. Issues Found with Early
Mobile Phones
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  
18

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

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

21. 21

22. 22

23. 23

24. Issues Found by the Disabled
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
24

25. Even as the mobile
web got better
accessibility lagged…
25

26. Smartphone Issues
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)  
26

27. Mobile Issues =
Disabled Issues
but no one did
anything
27

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 2012
http://martytdx.com/ux/2011/12/sxsw-accessibility-survey/ 28

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.
29

30. “…you can begin to make
some simple changes
that adapt your content to
the iPhone. Finally, you may
wish to make a version of Put Your Content in My Pocket,
your site that Parts 1 & 2
by CRAIG HOCKENBERRY
is targeted directly at the
iPhone: a site fully optimized
for the device.”
• http://www.alistapart.com/articles/putyourcontentinmypocket
• http://www.alistapart.com/articles/putyourcontentinmypocketpart2
30

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

32. 32

33. Tablet Issues
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)  
33

34. The
ANGRY MOBILE
USERS
effect
34

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.
35

36. And guess what?
The fixes they
made helped
accessibility
36

37. 37

38. Impact on Accessibility
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
38

39. But there is still a
ways to go
39

40. Do you experience issues with the
Strongly Disagree Neutral Strongly Agree
following aspects of the mobile web?
1 2 3 4 5
Inaccessible
Flash content
Content not
accessible
Content
without
alternatives
Controls not
The more accessible
things Broken page
change… formats
Text contrast
issues
Vision-Impaired
Hearing-Impaired Site can't be
Mobility-Impaired zoomed
Non-Disabled
Can't enlarge /
zoom site text
Small click
areas
Auto-play
content
Bad content
hierarchy
Site requires
hover/ mouse
events
40

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

42. HTML5
42
Source (image): TheChive.com

43. •
•
•
•
•
43

44. •
•
•
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>
45

46. 46

47. <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>
Source (image): CamenDesign.com
http://camendesign.com/code/video_for_everybody 47

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>
48

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 Sharp
http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/ 49

50. •
•
•
50

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

52. Source: Sorrowind Studios
http://sorrowind.net/vilify/ 52

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

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

55. I prefer native closed captioning
over auto-translation (ex. YouTube) 4.2
I often use closed-captioning provided
by video services (like YouTube) 3.3
I would use closed-captioning if
provided on my device
4.0
I prefer closed captioning over
transcripts 4.2
I don’t use closed-captioning 2.5
Source: Accessibility survey conducted on Wufoo 2012
http://martytdx.com/ux/2011/12/sxsw-accessibility-survey/ 55

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

57. •
•
•
57

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

59. CSS3: Transitions,
Tranforms &
Animations (oh my)
59

60. •
•
•
•
•
•

61. Transforms can be used manipulate
shapes by rotating, scaling, skewing
and translating (moving in x-y
coordinates).
Source (CSS Warp): http://csswarp.eleqtriq.com/
Source (AT-AT): http://anthonycalzadilla.com/css3-ATAT/index.html 61

62. Transitions can be used to change
over timed period Color, Size,
Opacity and styles (border-radius,
drop-shadow, etc.).
Source: Tutorialzine
http://tympanus.net/TipsTricks/CSS3MenuHoverEffect/ 62

63. Animations can create animated
elements such as pulsing boxes.
However, support is less than
transforms or transitions.
Source: Mozilla CSS DemoStudio
https://developer.mozilla.org/en-US/demos/detail/css-tricks/launch 63

64. 64

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

66. Typography
Source (top):TrentWalton.com Source (bottom):PG Web Design
http://trentwalton.com/bgclip/ http://pgwebdesign.net/blog/3d-css-shadow-text-tutorial 66

67. But how do I know
what features work
NOW?
67

68. Tranforms Transitions Animations @Fontface
Google Chrome
Firefox
Desktop
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+)
Mobile
Blackberry (Tablet) mixed
Firefox
Opera (Mini – (Mini – (Mini –
partial) No) No)
WebOS
Internet Explorer
68

69. CanIUse.com
HTML5Please.com
findmebyip.com/litmus/
Mobilehtml5.org/ Quirksmode
69

70. Rethink your
mobile strategy -
accessibly
70

71. 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

72. • 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
73

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

75. “
Source: Responsive Design -- Peter Bui
http://magazine.joomla.org/issues/Issue-Nov-2011/item/594-Responsive-Design
”
75

76. 76

77. •
•
•
•
77

78. Take advantage of
better accessibility
on the devices
themselves
78

79. “
. ”
79

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

81. 81

82. 82

83. 83

84. Accessibility Options
in iOS3
Source: Ars Technica
http://static.arstechnica.com/apple/accessbility-settings-iphone-4.jpg 84

85. iOS Functions
• VoiceOver
• Zoom
• Large Text
• Speak Selection
• Speak Auto-Text
• Voice Activation (via Siri)
• Vibration and badges
Possibly the best suites of accessibility
functions currently available on mobile.
85

86. •
•
•
86

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

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

89. Making sense of the Mobile Accessibility
Text reading
Voice over text
Spoken auto-text
(corrections, etc.)
Voice activation
Visual Voicemail
Zoom page
Text contrast
Some
Functional buttons
models
Physical keyboard
Auditory response
Tactile response
Screen Reader Support
Wireless Braille Display
Accessibility Apps
89

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

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

92. Don’t count out the devices themselves - apps
Apps that scan bar codes
and read the price, compare
it to nearby stores and even
read nutritional information.
Source: Disaboom.com
http://www.disaboom.com/assistive-technology-general/smartphone-apps-provide-assistive-technology-for-disabled 92

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
93

94. Apps have issues
•
•
•
•
94

95. Web App
Standardization
The ringmark system rates web
standards compliance into 3 rings:
•
•
•
95

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

97. 97

98. Mobile Issues (eReaders)
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
TtS only on
Web only
Notes eBooks for
has 5 sizes
Kindle
98

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

100. Conclusion
100

101. Conclusion
•
•
•
•
•
•
•
101

102. THANK YOU
How the iPad Can Save Accessibility
http://www.slideshare.net/martytdx/how-the-ipad-can-
save-accessibility
Thanks to those who took my survey, and those who helped me promote it:
Shawn Rhine Kalback, Robin Christopherson and Laura Mauldin
http://martytdx.com/ux/2011/12/sxsw-accessibility-survey/
102

103. Image Credits
Page 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/ 103

104. Image Credits
Page 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
104