hands on (& eyes & ears) accessibility workshop

26
Hands-On (& Eyes & Ears) Accessibility November M. Samnee Manager, New Product Development Thomson Reuters July 12, 2012

Upload: november-samnee

Post on 08-May-2015

394 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Hands On (& Eyes & Ears) Accessibility Workshop

Hands-On (& Eyes & Ears) Accessibility

November M. SamneeManager, New Product DevelopmentThomson Reuters

July 12, 2012

Page 2: Hands On (& Eyes & Ears) Accessibility Workshop

Why Should We Care?2

CC Image courtesy of eszter on Flickr

Page 3: Hands On (& Eyes & Ears) Accessibility Workshop

Statistics – U.S.

20% of US pop have reading

difficulties

27 Million Disabled

5 MillionDisabled employed

3

Page 4: Hands On (& Eyes & Ears) Accessibility Workshop

Financial Impact

4

US disabled spend $1 trillion each year

$200B of that is discretionary spending

CC Image courtesy of 401K 2012 on Flickr

Page 5: Hands On (& Eyes & Ears) Accessibility Workshop

Risks & Opportunities

• Risks:– Inability to sell to federal/state

agencies, academic markets

– Lawsuits

– Bad PR

• Opportunities– Ethical obligation to be inclusive

– Enhancements for disabled often enhance experience for everyone

5

CC Image courtesy of avyfain on Flickr

Page 6: Hands On (& Eyes & Ears) Accessibility Workshop

Retrofit vs. Accessibility From the Start

• Retrofitting for the web can be more expensive– Accessibility in the beginning increases development

costs by no more than 10%

– Retrofitting accessibility may cost 2 to 3 times more

6CC Image courtesy of verseguru on Flickr

Page 7: Hands On (& Eyes & Ears) Accessibility Workshop

How persons with disabilities access the web

7

CC Image courtesy of Rolling F-Stop on Flickr

Page 8: Hands On (& Eyes & Ears) Accessibility Workshop

Types of DisabilitiesVisual – Vision Loss, Blindness, Color-

Blindness

Hearing – Diminished or partial hearing, Deafness

Mobility – Muscle fatigue/weakness, fine motor control, paralysis

Cognitive – Dyslexia, Autism, ADD/ADHD8

Page 9: Hands On (& Eyes & Ears) Accessibility Workshop

Assistive Technologies Used• No Vision/Blindness:

– Typically use a screen reader

– May use a refreshable Braille display

9

Page 10: Hands On (& Eyes & Ears) Accessibility Workshop

Assistive Technologies Used• Low vision or partial

vision loss: – Screen Magnifiers

(commercial or come with the OS)

– High-contrast mode

– May use a high-contrast keyboard

10

Page 11: Hands On (& Eyes & Ears) Accessibility Workshop

Assistive Technologies Used

• Mobility impairments– May use voice

recognition software

– May use different keyboards or mice

• Hearing impairments or Deafness:– Need captioned

videos and may prefer contact via email or chat

11

Page 12: Hands On (& Eyes & Ears) Accessibility Workshop

Assistive Technologies Used

• Cognitive– May use voice

recognition or screen reading software

– May use custom CSS to control web page presentation

12

Page 13: Hands On (& Eyes & Ears) Accessibility Workshop

13

Hands-On Time!

The Task: Search the Commerce Bank website for “CD rates”.

Page 14: Hands On (& Eyes & Ears) Accessibility Workshop

14

CC

Ima

ge

cou

rtesy o

f L.e

.e o

n F

lickr

Issues We Found

Page 15: Hands On (& Eyes & Ears) Accessibility Workshop

Issues we saw today

• Consider Reading Order

• Use True Text Whenever Possible

• Design Accessible Form Controls

• Design a “Skip to Main Content” Link (maybe)

15

Page 16: Hands On (& Eyes & Ears) Accessibility Workshop

Standards & Guidelines

16

CC Image courtesy of P1r on Flickr

Page 17: Hands On (& Eyes & Ears) Accessibility Workshop

Main Web Accessibility Standards

17

*Web Content Accessibility Guidelines (WCAG)

Internet access is a human right.

How do we implement accessibility?

WCAG* 2.0-Model Accessibility Guideline from the World Wide Web Consortium (W3C). Current version; replaces WCAG 1.0. WCAG* 1.0 – mostly extinct.

Sec 508-USA-specific law. Currently undergoing review to update.-Federal agencies require a VPAT as part of RFP process

Page 18: Hands On (& Eyes & Ears) Accessibility Workshop

Standards - WCAG 2.0, Level AA*

Content must be:1.Perceivable – Content is made available to the senses

– sight, hearing and/or touch.2.Operable – Interface forms, controls and navigation are operable.

3. Understandable – Content and interface are understandable.

4. Robust – Content can be used reliably by a wide variety of user agents, including assistive technologies.

18

* http://www.w3.org/TR/WCAG/

Page 19: Hands On (& Eyes & Ears) Accessibility Workshop

from the WebAim flyer

• Plan Heading Structure Early

• Consider Reading Order

• Provide Good Contrast

• Use True Text Whenever Possible

• Use Adequate Font Size

• Remember Line Length

• Make Sure Links are Recognizable

19

• Design Link Focus Indicators

• Design a "Skip to Main Content" Link

• Ensure Link Text Makes Sense on Its Own

• Use Animation, Video, and Audio Carefully

• Don't Rely on Color Alone

• Design Accessible Form Controls

Page 20: Hands On (& Eyes & Ears) Accessibility Workshop

Resources

20

CC Image courtesy of zzpza on Flickr

Page 21: Hands On (& Eyes & Ears) Accessibility Workshop

Tools

• Free Assistive Technologies – Windows:

• NVDA

• Windows Magnifier & High Contrast mode

– Apple• VoiceOver

• Zoom & High Contrast

– Unplug your mouse!

• Free Development & Testing Tools– WAVE Firefox toolbar

– Color Contrast Analyzer & other

Firefox plug-ins

– Magpie

21

Page 22: Hands On (& Eyes & Ears) Accessibility Workshop

22

Page 23: Hands On (& Eyes & Ears) Accessibility Workshop

23

Page 24: Hands On (& Eyes & Ears) Accessibility Workshop

24

Page 25: Hands On (& Eyes & Ears) Accessibility Workshop

Design & Development Techniques

• Web Accessibility Initiative (WAI)*

• WebAim – resources and e-mail discussion list**

• The Paciello Group’s Resources***

• Simply Accessible****

• Deque*****

25

* http://www.w3.org/WAI/** http://webaim.org*** http://www.paciellogroup.com**** http://simplyaccessible.com***** http://deque.com

Page 26: Hands On (& Eyes & Ears) Accessibility Workshop

Go forth and prosper!

Feel free to reach out for further discussion:

[email protected]

@novie

26