web accessibility for section 508

What is Section 508 ?

2

• Section 508 is an Amendment to the Workforce Rehabilitation Act of 1973, signed into law by President Clinton in 1998

• Section 508 requires information technology that is developed or purchased by the Federal Agencies be Accessible by people with disabilities

54 million Americans has a disability, that’s 10% of the population (2000 U.S. Census)

Among them

• 10 million Americans are Vision impaired

• 20 million Americans are Hearing impaired

Why Accessible is important

3

• Learning disabilities 45.7%• Mobility impairments 13.9%• Health impairments 11.6%• Mental illness 7.8%• Hearing impairments 5.6%• Vision impairments 4.4%• Speech impairments 0.9%

Disability Types

4

• Learning disabilities 45.7%• Mobility impairments 13.9%• Health impairments 11.6%• Mental illness 7.8%• Hearing impairments 5.6%• Vision impairments 4.4%• Speech impairments 0.9%

Disability affect surf Web

5

• Learning disabilities 45.7%• Mobility impairments 13.9%• Health impairments 11.6%• Mental illness 7.8%• Hearing impairments 5.6%• Vision impairments 4.4%• Speech impairments 0.9%

Disability affect surf Web

6

Vision Impaired

7

Vision Impaired -Legally Blind

8

Vision Impaired -Color Blind

9

Vision Impaired -Color Blind 1

10

Vision Impaired -Color Blind 2

11

How do they surf Web

12

• Can’t see the Screen clearly

• Can’t use the Mouse/Pointer system well

• Can use Keyboard

• Can hear Audio

How do we design for them

• Section 508 Guideline

• Web Accessibility Initiative Guideline

• IBM , Microsoft able-Guideline

• Do usability testing with them

13

How do we design for them

• Section 508 Guideline (16 for web)

• Web Accessibility Initiative Guideline

• IBM , Microsoft able-Guideline

• Do usability testing with them

14

Section 508 Guideline - 1

Section 508 - §1194.22 (a)“A text equivalent for every non-text element shall be provided.”

15

Section 508 Guideline - 1

1 <img alt => is required for all images

when image is Active (link, button) or Conveys information

16

Section 508 Guideline - 1

1 <img alt => is required for all images

when image is Active (link, button) or Conveys information

17

Section 508 Guideline - 1

2 Use “longdesc” for Explanation provide more content ,like data chart

18

Section 508 Guideline - 1

2 Use “longdesc” for Explanationprovide more content ,like data chart

19

Section 508 Guideline - 2

Section 508 -§1194.22 (n)“Electronic form shall allow people using assistive technology to access the field elements, and submission of the form, including all directions and cues.”

20

Section 508 Guideline - 2

1 Use <label for=>, position prompts Label close to Text Fields

21

Section 508 Guideline - 2

2 If the Button has text, use that text for the <img alt=> attribute

22

Section 508 Guideline - 2

2 If the Button has text, use that text for the <img alt=> attribute

23

Section 508 Guideline - 2

2 If the button has text, use that text for the <img alt=> attribute

24

Section 508 Guideline - 2

2 If the button has text, use that text for the <img alt=> attribute

25

V.S.

Section 508 Guideline - 2

2 If the button has text, use that text for the <img alt=> attribute

26

V.S. = $6 million

1 Web Accessibility is Important

27

2 Design with Accessibility in mind

Take home

Thank you !

28

Yi Cao yi.cao@sjsu.edu