1

Accessibility

IS 403: User Interface Design

Shaun Kane

2

Admin

• Today: Catch up on accessibility

3

Today

• What is accessibility?• Who needs accessibility?• Designing for accessibility• Verifying accessibility

4

Accessibility

Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.

http://www.w3.org/WAI/intro/accessibility.php

5

Why make websites accessible?

• Good for business– Reach a large audience

• Support social inclusion– Participation from a diverse group is good

• Follow the law– Access to information is a basic human right

6

Legal support for accessibility

• 1990: Americans with Disabilities Act (ADA)

• 1998: Rehabilitation Act (section 508)• 2006: Individuals with Disabilities

Education Act (IDEA)

• http://webaim.org/articles/laws/usa/

7

Legal Cases• 1996 ADA complaint vs. City of San Jose, CA

– Use of PDF inaccessible to city commissioner – Web sites are a “service” and thus subject to the ADA– Led to S. J. Web Page Disability Access Standard

• 1999 National Federation of the Blind vs. AOL– Based on the interpretation of the Web as a place of public

accommodation (ADA)– Settled out of court– 2000: AOL agreed to make its browser accessible

• 2006 NFB vs. Target– ADA as applied to Target’s web site– Settled for US $6 million

8

Who is affected?

• People with disabilities (visual, hearing, motor, cognitive, reading)– About 1 in 5 adults (webaim.org/intro)

• Older adults – up to 50% of computer users may benefit from accessibility features (http://www.microsoft.com/enable/research/)

• “Situational impairments” – mobile device users, temporarily injured people

• Sometimes it’s just convenient – reading transcripts vs. watching a video

9

Designing for accessibility

• User involvement is key

• Use personas to guide design

• Follow design guidelines for specific disabilities

10

Categories of Impairments• Cognitive (Learning Disability,

memory, reading)• Mobility (Physical)• Hearing• Speech• Visual

11

Considerations for Cognitive Impairments

• Short term memory storage: 7+- 2– Don’t rely on your user to remember large

amounts of information, or complex steps

• Distraction / Task Decomposition– Consider users who have difficulty

focusing• Make tasks shorter, simplify designs

• Socialization– Some children with autism may not be

comfortable looking at faces

12

Considerations for Mobility Impairments

• Keyboard accessibility– Users can access and activate

everything on the page with solely the keyboard

• Speech recognition compatibility– Proper code structure is a must

• Provide ample time for tasks• Provide shortcuts

– “Skip Navigation” links

13

Considerations for Hearing Impairments

O Use structured pagesO Use headings and subheadingsO Use bulleted lists

O Write clearlyO Keep language short, simple, and to the pointO Write in active voiceO Avoid jargon and/or provide definitions

O Provide alternatives to audioO Text, captions, or even sign language

interpretersO TTY-enabled customer service lines

14

Considerations forSpeech Impairments

• Provide alternatives to speech– Chat rooms and email as well as

telephone numbers for customer service (at the same level of service)

• Provide cues to get people started– May be able to speak, but have

difficulty constructing freeform text

16

17

18

19

Color blindness

• Affects 10% of males• Multiple variations

D. Flatla et al

20

Considerations forVisual Impairments

• Use text instead of images of text– Use CSS to style text (Logos are

exceptions)

• Keyboard accessibility– Don’t override keystrokes– Users can access and activate

everything on the page with solely the keyboard

• Skip navigation links

21

Considerations forVisual Impairments

O Have alternatives to colorO Required fields in redO * denotes required fields

O Provide sufficient color contrast

22

Considerations forVisual Impairments

• Provide ample time for tasks

• Provide shortcuts

23

WCAG: Web Content Accessibility Guidelines• Perceivable

– Provide text alternatives for non-text content and provide captions and alternatives for audio and video content.

– Make content adaptable; and make it available to assistive technologies.

– Use sufficient contrast to make things easy to see and hear.• Operable

– Help users find content and make everything keyboard accessible.– Give users enough time to read and use content.– Do not use content that causes seizures.

• Understandable– Make text and content understandable, and readable– Make content operate in predictable ways. and help users avoid

and correct mistakes.• Robust

– Maximize compatibility with current and future technologies.

http://www.w3.org/WAI/intro/wcag.php

24

Effects of assistive devices

• People with disabilities may use technology that affects how technology is used

• Visual: Screen readers, magnifiers• Motor: alternative input devices, styli• Hearing: hearing aid, interpreters

25

Examples of AT use

• Louise, cerebral palsy– http://www.youtube.com/watch?v=KtAHzRu1OF0

• Ben, head pointer– http://www.youtube.com/watch?v=p9NsV39nq8U

• University of Washington DO-IT – http://www.washington.edu/doit/Video/

26

Verifying accessibility

• User testing is the best way

• Heuristic evaluation can help– http://webaim.org/intro/#principles– http://webaim.org/standards/wcag/checklist

• Simulating disability– http://vischeck.com/– http://firevox.clcworld.net/– http://www.chromevox.com/

27

Accessibility personas activity

• Break into pairs• Make a persona for a user with

accessibility needs when viewing Amazon.com– Who they are– Why they use amazon– Some problem that they have– What they do about it

28

Accessibility experience activity

• Try some accessible technology and report back

• Use ChromeVox or http://webanywhere.cs.washington.edu/beta/

• Try to learn about a new academic program at http://umbc.edu (not IS)– What’s difficult?– What’s surprising?

29

WebAnywhere demo