37 million reasons to give a damn about the disabled

52
37 Million Reasons to give a damn about the disabled Chris Merkel User Experience Designer/Architect Computech Inc.

Upload: chris-merkel

Post on 20-Jan-2015

21.190 views

Category:

Design


2 download

DESCRIPTION

Chris Merkel talks us through the hows and whys of accessibility design for websites. During his presentation you'll learn what types of devices the disabled use to access the web, and see videos of real people using them. You'll learn practical tips for how to make our websites and apps more accessible and learn how to try out a screen reader for yourself.

TRANSCRIPT

Page 1: 37 million reasons to give a damn about the disabled

37 Million Reasonsto give a damn about the disabled

Chris MerkelUser Experience Designer/Architect

Computech Inc.

Page 2: 37 million reasons to give a damn about the disabled

Who is this "Chris" guy?

Page 3: 37 million reasons to give a damn about the disabled

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 

Page 4: 37 million reasons to give a damn about the disabled

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

Page 5: 37 million reasons to give a damn about the disabled

Why bother?

A common question from my past

Page 6: 37 million reasons to give a damn about the disabled

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

Page 7: 37 million reasons to give a damn about the disabled

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/

Page 8: 37 million reasons to give a damn about the disabled

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

Page 9: 37 million reasons to give a damn about the disabled

Have some Empathy

Try using a screen reader yourself…

Is your site accessible?

Page 10: 37 million reasons to give a damn about the disabled

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

Page 11: 37 million reasons to give a damn about the disabled

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

Page 12: 37 million reasons to give a damn about the disabled

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

Page 13: 37 million reasons to give a damn about the disabled

Disabilities and Devices

How different folks use different strokes

Page 14: 37 million reasons to give a damn about the disabled

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

Page 15: 37 million reasons to give a damn about the disabled

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/

Page 16: 37 million reasons to give a damn about the disabled

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/

Page 17: 37 million reasons to give a damn about the disabled

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/

Page 18: 37 million reasons to give a damn about the disabled

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

Page 19: 37 million reasons to give a damn about the disabled

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/

Page 20: 37 million reasons to give a damn about the disabled

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

Page 21: 37 million reasons to give a damn about the disabled

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

Page 22: 37 million reasons to give a damn about the disabled

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/

Page 23: 37 million reasons to give a damn about the disabled

Disability Laws & Guidelines

Introducing 508, WCAG, ARIA, and other horrible, horrible animals

Page 24: 37 million reasons to give a damn about the disabled

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

Page 25: 37 million reasons to give a damn about the disabled

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)

Page 26: 37 million reasons to give a damn about the disabled

Major Accessibility Fail

Or: This Could Be You

Page 27: 37 million reasons to give a damn about the disabled

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

Page 28: 37 million reasons to give a damn about the disabled

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

Page 30: 37 million reasons to give a damn about the disabled

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

Page 31: 37 million reasons to give a damn about the disabled

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/

Page 32: 37 million reasons to give a damn about the disabled

What's a guy to do?

Practical tips and checklists

Page 33: 37 million reasons to give a damn about the disabled

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/

Page 34: 37 million reasons to give a damn about the disabled

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

Page 35: 37 million reasons to give a damn about the disabled

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

Page 36: 37 million reasons to give a damn about the disabled

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/

Page 37: 37 million reasons to give a damn about the disabled

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

Page 38: 37 million reasons to give a damn about the disabled

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

Page 39: 37 million reasons to give a damn about the disabled

JavaScript examples from YUI

Modal dialog

Each shows management of focus, properties

Tabbed section

Page 40: 37 million reasons to give a damn about the disabled

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/

Page 41: 37 million reasons to give a damn about the disabled

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

Page 42: 37 million reasons to give a damn about the disabled

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”

Page 43: 37 million reasons to give a damn about the disabled

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>

Page 44: 37 million reasons to give a damn about the disabled

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

Page 45: 37 million reasons to give a damn about the disabled

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/

Page 46: 37 million reasons to give a damn about the disabled

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

Page 47: 37 million reasons to give a damn about the disabled

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

Page 48: 37 million reasons to give a damn about the disabled

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

Page 49: 37 million reasons to give a damn about the disabled

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 

Page 51: 37 million reasons to give a damn about the disabled

Fire away with any questions

Image: Shirtoid.com at http://shirtoid.com/4809/the-spanish-inquisition/