Upload
martytdx
View
2.714
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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'.
Citation preview
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
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
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