Date post: | 20-Jan-2015 |
Category: |
Design |
Upload: | chris-merkel |
View: | 21,190 times |
Download: | 2 times |
37 Million Reasonsto give a damn about the disabled
Chris MerkelUser Experience Designer/Architect
Computech Inc.
Who is this "Chris" guy?
About Chris
• Computech's User Experience Designerand Information Architect
• On contract with the FCC for a new licensing system
• Classically-trained designer • BFA 1996 from MICA
• Fled to the web in 1997
About Chris
• design for editorial and corporate clients in NC • moved to Silicon Valley
• from 1998, clients were Ask Jeeves, Intel, Yahoo!
Xerox, and Microsoft • back to the East in 2009
• 8 years of in-depth accessibility experience
Why bother?
A common question from my past
Why bother with accessibility?
Cost
Lawsuits
Hotline call volume
Government contracts
Audience appeal
SEO
Source: zgeek.com at http://www.zgeek.com/forum/gallery/files/1/0/8/simpsons_angry_mob.png
How the Disabled Use the Web, 1Introduction to the Screen Readerwith Neal Ewers of the Trace Research Center
A short 6 minute video demonstrating how screen readers assist people who are blind navigate the web, access the electronic page, and more.
More videos by UW-Madison at http://www.doit.wisc.edu/accessibility/video/
How the Disabled Use the Web, 2Head Designedwith Giesbert Nijhuis, graphic designer
A short 3 minute video demonstrating how mobility devices assist people with issues navigating and using applications we User Experience professionals take for granted.
More videos by AssistiveWare at http://www.assistiveware.com/videos.php
Have some Empathy
Try using a screen reader yourself…
Is your site accessible?
Available Screen Reader Software
Windows• Jaws from Freedom Scientific: the free demo
allows for 40 minutes at a time before rebooting
• WindowEyes, GW Micro: a fully functional demo is available for Windows but times out after 30 minutes.
• NVDA, NV Access: available in full for free
• Thunder: available for Vista or XP
• Narrator: built into Windows Vista and Windows 7
Available Screen Reader Software
Apple OSX• VoiceOver: Mac OSX includes VoiceOver, Apple’s
powerful and very successful screen-access technology– VoiceOver also included on the iPhone and the iPad
• Run Windows screen readers using Parallels, VMWare, Virtual PC , or Boot Camp
Available Screen Reader Software
Linux• Orca: available on Linux, free and open source
Browser-Based• Firevox: available in full for free on Windows and
Mac but only works with Firefox
• Fangs: this screen reader emulator is a Mozilla Firefox extension that displays a text representation of a web page similar to how a screen reader would read it
Disabilities and Devices
How different folks use different strokes
Percentage of Disabilities in the U.S.
Within ages 21-64, across any gender, race, and education: • 5.4% Mobility• 4.1% Cognitive • 2.3% Auditory• 1.9% Visual
299,852,800 Base U.S. population 2,949,415 Sample size
Source: 2008 Cornell University Disability Statistics, incl U.S. Census, American Community Survey, and other major studies
Mobility Disabilities
Conditions• Limited movement
and fine motor controls
• Complete or partial paralysis
Photo: by ngvn_tech at http://www.flickr.com/photos/21984458@N07/2281511627/
Mobility Access Solutions
Common solutions• Keyboard controls• Predictive type input• Easy to select &
manipulate switches, buttons, and other controls
Devices used• Headmouse• Wand• On-screen keyboard• Microphone and
dictation softwarePhoto: by Diane Bedard at http://www.flickr.com/photos/windsordi/4650884575/
Cognitive Disabilities
Conditions• Dyslexia• Memory deficit• Educational or cultural
disability• Computer settings
Photo: by M.V. Jantzen at http://www.flickr.com/photos/mvjantzen/2428033128/
Cognitive Disability Solutions
Common solutions• Consistent
design/layout• Simplified language• Predictable behavior • Redundant input such
as providing both an audio file and a transcript of a video
• Selectable languages• Sitemaps• Don’t disable browser
history
Devices used• Browser history• OS clipboard
OSX Finder
iTunes
Auditory Disabilities
Conditions• Full or complete inability to perceive
frequencies of sound• Computer or device settings
Photo: by laurenlemon at http://www.flickr.com/photos/renolauren/3290699773/
Auditory Disability Solutions
Common solutions• Captioned video and
audio transcripts• Text instructions• Blinking or (gently)
flashing error messages
Devices used• Audio captioning
Photo: fccdotgovvideo’s channel at http://www.youtube.com/user/fccdotgovvideo
Visual Disabilities
Conditions• Low vision, corrective
eyeware e.g.• Color blindness• Complete lack of sight
Image: Ishihara color test from http://commons.wikimedia.org/wiki/File:Ishihara_9.png
Visual Disabilities
Common solutions• Use of symbols and
shapes• Readable text size, or
control of text size
Devices used• Screen readers• Braille printers• Screen magnifiers• Dictation software
Photo 1: Covert Affairs, USA Network Photo 2: by Dan Hett at http://www.flickr.com/photos/turkboy/2341555716/
Disability Laws & Guidelines
Introducing 508, WCAG, ARIA, and other horrible, horrible animals
508 Compliance
What is it?
• 1997 update to an Amendment of the Rehabilitation Act of 1973
Impact on websites? • 16 provisions
of Sub-part B, 1194.22*
Who needs to meet it?
• All federal agencies(with some exceptions)
• State and local agencies
Who enforces it? • The United States
Access BoardMore info at Section508.govA complete, handy checklist is available at: webaim.org/standards/508/checklistOfficial federal standards are listed at: section508.gov/index.cfm?fuseAction=stdsdoc
Web Content Accessibility GuidelinesWhat is it?
• Recommendations published by W3C's Web Accessibility Initiative (WAI)
Impact on websites? • 3 levels of conformance:
A, AA, AAA• WCAG 1.0 created 1999• WCAG 2.0 updated in
2008
Who needs to meet it?
• Not required by law (yet)
• DOJ may soon enforce both public and private
Who enforces it? • 3rd parties such as
NFB• Private companies • DOJ may soon use
WCAG + 508 * More info at w3.org/TR/WCAG20/ (2008) and w3.org/TR/WCAG10/ (1999)
Major Accessibility Fail
Or: This Could Be You
One great example: NFB v. Target
National Federation of the Blind (NFB) v. Target Corporation Background: In a California state case, NFB sues Target for its commercial website's violation of 2 state and 1 federal civil rights acts. Result:Judge rules in favor of NFB, awarding $3,738,864.96 to the plaintiffs. That's 3.7 million reasons to give a damn.
More legal goodness on http://dralegal.org/ - Disabilities Rights Advocates
Another concern: the DOJ
July 26, 201020th anniversary of the Americans with Disabilities Act (ADA) The U.S. Department of Justice (DOJ) announces possible expansion of the ADA to cover some web sites: • Government sites • Corporate sites that provide “goods, services, and
programs to the public”, e.g. shopping and other publicly accessible e-commerce sites
USA Video Captioning Laws
Most recent bill - should be the one signed into law: • http://thomas.loc.gov/cgi-bin/query/z?c111:S.3304
Adobe's blog - on captioning implications:• http://
blogs.adobe.com/accessibility/2010/10/president-obama-signs-accessibility-act.html
Free subtitling tool: • http://universalsubtitles.org/
USA U.S. Plain-Language Law
The Plain Writing Act of 2010 • Signed into U.S. federal law October 13, 2010• Requires federal agencies to create documents
using plain language
Your Best Friends are Blind
Google, Bing, Yahoo, and their cousins can't see
Design for the sightless for best results in search engine optimization
Photo: by Caleb Sconosciuto from http://www.flickr.com/photos/seraphimc/513230222/
What's a guy to do?
Practical tips and checklists
Build Accessibility at the Start
Make accessibility a central concept from inception
Plugging access features in during development is much harder and expensive in the long term
Image: by Bryce Glass for Flickr at http://www.flickr.com/photos/bryce/58299511/
POUR it on
Plan to make the content, features and controls of your site or application...
1.Perceivableall senses, all states
2.Operableinputs, timing, recovery
3.Understandablemeaning, association
4.Robustall devices, future-proof
Photo: by Sam Agnew at http://www.flickr.com/photos/samagnew/3708407892//
For Websites
1. HTML 2. CSS 3. Javascript 4. WAI-ARIA (think of it like making a pizza w/toppings)
start with basic HTML for content and structure add visuals as extra presentation scripts add interactivity, esp. for rich apps ARIA gives screen elements more meaning
HTML tips
Content should make sense when linearized Use tags which help reinforce the meaning of elements Help users understand the structure of a screen
Provide text and non-text alternatives for multimediaImage: Wufoo user registration at https://secure.wufoo.com/signup/1/
CSS tips
display:none :hover, :focus
position:absolute
form labels
Color, contrast, size
padding, margin, positioning
hides content from screen readers, too making these states look the same helps content only for screen readers can help strengthen association of label:input:instructions in forms
help keep the level of visual contrast high
watch visual association b/w objects,
but help make click targets bigger
JavaScript tips
Use a libraryYUI, EXT, jQuery, etc. Do not use onchange for navigation
Do not enforce timing Use caution in movement, updating Manage focus carefully
For maintenance, robustness, extensive testing
Causes confusion in screen readers, esp. in menus
Impossible to tell how long users will stay on a part of a page Difficult for cognitive disorders, flashing 4 to 59/second = seizures
Start reading at the right place
JavaScript examples from YUI
Modal dialog
Each shows management of focus, properties
Tabbed section
WAI-ARIA to the Rescue
Web Accessibility Initiative for Accessible Rich Internet Applications Problem:Desktop is not dependent on server requests, has a far richer set of UI components Solution:ARIA allows developers to create rich web applications
Great intro on the Opera website: dev.opera.com/articles/view/introduction-to-wai-aria/
What Am I? ARIA Roles
Landmark roles(beyond tabindex)
Widget roles(extend ancient HTML tags)
Labelling & association(make instructions be read with field labels) Managing dynamic change(live regions and content/presentation updates)
Role = “banner”
Role = “navigation”
Role = “main” or
“application”
Role =
“complementary”
Role = “contentinfo”
Browser window
What Happened to Me? ARIA StatesValues(min, max, current) Required or Optional(better than the * character)
Labelled and Described(associate inputs/controls with instructions, info, errors)
Text Equivalents(for visual widgets like sliders)
aria-required=“true”aria-labelledby=“pword"
aria-describedby=“chars"
aria-role=“button”
HTML 5
New features in HTML:
• The canvas element • New video and audio
elements for media • Better support for local
offline storage • New content specific
elements • New form controls
Photo: Amazon.com
<article> <audio>
<canvas>
<footer> <header>
<nav>
HTML 5: Problems & OpportunitiesPros: • Good support in new,
popular mobile devices
• Degrades well in older
browsers • Tag itself describes its
purpose w/o extra markup
• Helps move the web
and devices forward
Cons: • Spotty support in
browsers • Potential conflicts with
ARIA roles • Disagreements about
video support • Accessibility issues
with canvas drawings
Test for the Disabled YourselvesTest with many different screen readers
Turn off your monitor
Switch your mouse hand
Ditch the mouse, use keyboard only
Bring in real users
Great article on setting up a screen reader test lab: iheni.com/screen-reader-testing/
Photo: by wbsercessa at http://www.flickr.com/photos/stasigh/2017218782/
Development Tools Available
WAVE toolbar (Firefox)From webaim.org
Web Developer Toolbar (Firefox and Chrome)From chrispederick.com
AIS Accessibility Toolbar (Internet Explorer)From visionaustralia.org.au
Photo: by Chris Merkel at http://merkelwerks.shutterfly.com/2008/601#602
Development Tools Available
FireEyes (Firefox)From deque.com
Accessibility Evaluation Toolbar (Firefox)From addons.mozilla.org
Fangs Screen Reader Emulator (Firefox)From addons.mozilla.org
Many more listed on W3C:w3.org/WAI/eval/selectingtools.html
Photo: by Chris Merkel at http://merkelwerks.shutterfly.com/2008/601#602
Checklists from Respected SourcesMany disability advocacy groups and large corporations provide great lists to follow. National Federation of the Blind:Criteria for Nonvisual Accessibility Certification Google Sites:Section 508 Compliance report
IBM Human Ability and Access:Web accessibility checklist
Federal Web Managers Council and the GSA:WebContent.gov
Further Research & Assistance
Government agencies• Federal Web Managers Council & GSA:
WebContent.gov• US Access Board: access-board.gov
Corporate and non-profit agencies• NFB: nfb.org• Even Grounds: evengrounds.com
Local accessibility groups and events• Accessibility DC: accessibilitydc.org • Meets locally at MLK Library, 901 G St NW in DC
Join the Conversation
@a11y - UK
@webaxe - Cupertino, CA USA
@w3c_wai
@AccessibilityDC
#axs
#a11y
Photo: by Michelle Wegner at http://www.flickr.com/photos/michellewegner/2874818735/
Fire away with any questions
Image: Shirtoid.com at http://shirtoid.com/4809/the-spanish-inquisition/
Thanks for watching
Chris Merkel is on:
Twitter@merkelwerks