how do i design an accessible web site?

1

How Do I Design An Accessible Web Site?

Presented by

Paul Tang - Applications Specialist II Alternate Media

Irvine Valley College

2

Presentation Objectives

What is Web accessibility?What are the accessibility barriers?What are the demographics on student disability?Why is accessibility a legal requirement?Who needs accessibility?What is universal Web design?How do I design for Web access?What is multimedia?How do I design for media access?Summary

Web Access Symbol (for people with disabilities)

3

What Is Web Accessibility?

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, W3C

An “accessible Web site” will successfully communicate its information to anyone despite physical, sensory and cognitive disabilities.

Student in wheel chair at computer

4

What Are The Accessibility Barriers?

Visual – Blindness, color blindness, tunnel vision, etc.

Audio – Deaf, impaired hearing, no soundcard/speakers, and poor quality of recording.

Motor - Can’t use mouse; individuals with a more severe physical impairment may need to have a special keyboard that can be operated by speech, head pointing or eye gaze.

Learning or Cognitive – Need consistent navigation structure, flickering, moving or complicated designs can cause problems.

5

What Are The Demographics On Student Disability?

5% (70,000) of these students had disabilities

By the year 2007, “Tidal Wave II” will have brought 350,000 additional students to our colleges 10% (35,000) of these students will have disabilities

In 1997, more than 1.4 million students were enrolled in California Community Colleges College entrance

6

Why Is Accessibility A Legal Requirement?

Laws Applications Mandates

Title II -ADA

Public entities Prohibits discrimination as well as making programs accessible to individuals with disabilities

Section 504 -Rehab. Act(guidelines)

Anyone receiving federal funds

Opportunity for the disabled to participate must be as effective as that provided to others for programs and services

7

Why Is Accessibility A Legal Requirement?

Laws Applications Mandates

Section 508 - Rehab. Act(standards)

States receiving federal funds under the “Assistive Technology Act State Grant Program”

Provide the disabled access to electronic and information technology (EIT)

SB 105 -

CA state law

Anyone receiving California state funds must comply with Section 508

Provide the disabled access to EIT

Title 5 -CA Code Of Regulations

Anyone receiving California state funds

Distance education courses must be accessible to people with disabilities

8

What Is Electronic And Information Technology?

In Section 508, electronic and information technology (EIT) is defined to include: Information technology and any equipment or

interconnected system or subsystem of equipment, that is used in the creation, conversion, or duplication of data or information.

Section 508 scroll

9

What Is Electronic And Information Technology?

Computer hardwareOS and SoftwareMultimediaVideoNetworksTelecommunication

devices

Information kioskWeb sites Copiers Fax machinesPeripherals

EIT includes, but is not limited to, such things as:

10

Who Benefits From Section 508?

Voice activated cell phones help users who are blind and people who are driving while using their phones.

Everyone benefits from the accessibility of electronic and information technology.

Driver using cell phone

11

Who Benefits From Section 508?Making a site accessible to

people with low vision will also benefit people who use PDAs or other devices with small screens

Closed captioned TV allows the deaf and sport fans in a noisy bar to stay informed about the game they are watching

Fans watching hockey

Personal Digital Assistant

12

Who Needs Web Accessibility?

Computer Users Blind and visually

impaired Deaf and hard of

hearing Physically and

motor impaired Learning disabled

Motor impaired student using a voice recognition software

13

How Is Your Course ContentPerceived by Others?

Perception takes place through one or more of our five senses: Sight Hearing Touch Smell Taste

Neither smell nor taste are of much use for Web browsing but sight, hearing and touch are the modes of perception.

SightHearing

Touch

14

How Is Your Course ContentPerceived by Others?

Individuals without sight usually rely on their hearing to access Web content using screen readers.

Those without hearing need to rely on their sight.Those who can neither see nor hear often rely on

Braille devices to access Web content so their mode of perception is touch.

15

Is Your Course ContentWeb Accessible?

Without equal access to technology, members of our society who have disabilities are greatly disadvantaged.

The ability to access and use computers and other technologies has become essential to virtually every aspect of academic and professional life.

Computer access

16

What Is Assistive Technology?

Assistive technology is a piece of equipment or a software product that is used to increase, maintain, or assist the functional capabilities of individuals with disabilities.

Assistive technologies includes the following: Screen readers

• Used by people who are blind

• Makes on-screen information available as– Synthesized speech (JAWS - Job Access With Speech) or

– Refreshable Braille display (Duxbury Braille Translator)

17

What Is Assistive Technology?

Voice recognition software• Assists people who have difficulty using a mouse

or keyboard– Dragon Naturally Speaking

Magnification software• Helps people with low vision

– ZoomText Xtra

Alternative keyboards and mice• Used by people who are unable to use a standard

keyboard or mice

18

What Is Universal Web Design?

It is a style of Web development which seeks to create Web sites which are accessible to the broadest audience possible.

Networking of computers around the globe

19

What Does Universal Design Do?

Universal design seeks to create Web pages at the point where assistive technologies and Web based innovation intersect.

AccessTe

chno

logy

20

Web Design Overview

Identify target populationDefine page contentDesign Web site presentation

Intuitive site navigation Clearly worded text Consistent and simple design layout Content appropriate and meaningful to the audience

Implement Web site

Computer user

21

Designing For Low Vision

People with low vision may have any one of a number of problems with their visionPoor acuity (blurred or fogged vision)Loss of all central vision (only see with

edges of their eyes)

Adult reading with a magnifying glass

22


People with low vision (continued)Extreme far-sightedness or near-sightednessTunnel vision (like looking through a tube or

soda straw)Loss of vision in different parts of their visual

field as well as other problems (glare and night blindness)

23


Solutions to accessibility:Allow the user to zoom in to view portions of

the screen in more detailAllow the user to adjust the fonts, colors and

cursors used in your program to make them more visible

Use a high contrast between text and background

24


Solutions to accessibility:Do not place text over a patterned background

where the two might interfere with each other

Can you read this?

25


Solutions to accessibility:Use a consistent or predictable layout for

screens and dialogs within the program Use good color contrast

• Red text on brown background (bad color contrast) Bad

Contrast

26

Designing For Color Blindness

Color blindness is more common in men and rare in women

Most color blind people have a deficiency with either red or green

Image of red and green apples

27

Designing For Color Blindness

Solutions to accessibility: Use either light text on a

dark background or dark text on a light background

Make sure that there is sufficient contrast

Avoid using red and green colors because they are often indistinguishable

View of apples by the color-blind: green

Image of red and green apples

28

Designing For The Blind

Access by people who are blind is usually accomplished using special screen reading software to access and read the contents of the screen, which is then sent to a voice synthesizer (JAWS) or dynamic Braille display.

Speaking computer

29


Solutions to accessibility:Use consistent or predictable screen and

dialog layouts Use single column text whenever possibleMake line-by-line reading in tables sensible

• Associate table headers with table cells

30


Name Cups Types Sugar?D. Feinstein 4 Espresso No

B. Boxer 6 Decaf Yes

Example – Accessible Data Table

Coffee Consumption by California Senators

Name: D. Feinstein, Cups: 4, Types: Espresso, Sugar: No

Text read aloud using JAWS

Name: B. Boxer, Cups: 6, Types: Decaf, Sugar: Yes

31


Solutions to accessibility:Provide text alternatives for all visual

information• Graphics have Alt tags – text descriptions of

images

Graduation cap

32


Solutions to accessibility:All text should be available as e-text to allow

a screen reader program to read aloud through a voice synthesizer (e.g. JAWS)

Use hyperlinks with descriptive text• Click here for a picture of Tom Cruise

(bad design)• Click here for a picture of Tom Cruise

(good design)

33

Designing For The BlindSolutions to accessibility:

Avoid frames but, if used, include title that helps understand the frames purpose

• Title = “Navigation Frame”; Title = “Content Frame”

Best Practices

Web Accessibility

Adaptive Technology

Web Accessibility

Courseware Accessibility

Emerging Technology

Web Accessibility Resources

Note: If a browser does not support frames, use the NOFRAMES alternative to provide a link to a non-frame version of the same content.

34


Solutions to accessibility: Provide alternate means of accessing equivalent

content for scripts, applets and plug-ins with hypertext links in case active features are inaccessible

• Scripts – Macro commands, e.g. Salary Calculator

• Applets – Small executable applications, e.g. 3-D Clock

• Plug-Ins – Modules extending Web browser capability, e.g. Adobe Acrobat Reader - PDF (Portable Document Format) files

35

Designing For The Deaf

People who are deaf will not be able to hear sound at all.

Other people who have hearing impairments may be able to hear some sound but may not be able to distinguish words.

People who are deaf or with hearing impairments need to get visual signals for all information otherwise conveyed by sound.

Hard of hearing person

36


Solutions to accessibility:An individual with a mild to moderate hearing

impairment may just need a mechanism to increase the volume – assistive listening devices.

An individual with a severe hearing impairment or who is deaf may need to have auditory/video information presented in some visual form – text transcript or closed caption.

37

Designing For The DeafSolutions to accessibility:

Provide all auditory information in a visual form using text transcripts.

Provide a link to a text transcript for audio clips –e-text file or HTML file

Text transcript – Zoot Suit Fashion

38


Solutions to accessibility:Have a mode of operation that will work in

noisy environments or if sound is turned off.Use closed or open caption for digital video

clips

Example: Blackboard Tour

www.ivc.edu/academics/de/sbc

http://www.ivc.edu/academics/de/sbc

39

Designing For The Motor Impaired

Types of physical impairments: Loss of limbs or digits Repetitive stress injury Arthritis Stroke and head injury Parkinson's disease Cerebral Palsy Muscular Dystrophy

Office worker using cell phone in wheel chair

40


Solutions to accessibility An individual with a mild physical impairment

• May just need to have the behavior of the keyboard and mouse changed slightly in order for them to be able to effectively use the computer.

An individual with a more severe physical impairment

• May need to have a special keyboard that can be operated by speech, head pointing or eye gaze.

41


Solutions to accessibility:Use of “hot keys” or keyboard commands

allows the physical or motor impaired access to Distance Education courses when the user can’t use the mouse

• TAB, SHIFT + TAB, and ENTER keys to navigate pages

Avoid timed responses (less than 5-8 sec.) or allow for the response time to be changed

42

Designing For The Learning Disabled

Types of learning disabilities Mental Retardation Language and Learning Disabilities Dyslexia Short Term Memory Dementia

Learning disabled student

43


Solutions to accessibility: Make sure the user is alerted and given sufficient

time to indicate more time when a timed response is required

Make sure that all messages and alerts stay on screen until they are dismissed by the user

Make language as simple and straightforward as possible, both on screen and in any handouts

Use simple and consistent screen layouts

44


Solutions to accessibility: Keep pages clear, concise and scannable Ensure well-structured pages with good site

navigation Use graphics to enhance the understandability of the

content

Eliminate graphics that distract from the main content

Irrelevant image

45


Solutions to accessibility: Avoid blinking, moving or flickering content

• Internet Explorer and Netscape Navigator do not allow users to control flickering or blinking

• Information that is shown or conveyed through blinking, flickering, or movement may cause seizures in users with photosensitive epilepsy

Marquee – moving lights

46

What Is Multimedia?

Multimedia is the use of computers to present text, graphics, video, animation, and sound in an integrated way.

Student using computer

47

Designing For Media AccessAccessible PowerPoint Presentations

Use text descriptions on all graphics and photos

Save PowerPoint slide as Web page - HTML format

Palm trees overlooking ocean in Hawaii

48

Designing For Media Access

Accessible Web Videos Use synchronized captions in streaming videos or Provide text transcripts to make content accessible

Accessible PDF (Portable Document Format) Files Visit http://access.adobe.com and download Acrobat

Reader 6.0 with accessibility features Use JAWS or Window-Eyes to read PDF files

http://access.adobe.com/

49

Designing For Media Access

Accessible Flash Animation Flash MX allows for media accessibility

• Flash MX allows designers to create accessible. animation, interactive Web features and movies.

• MAGpie (Media Access Generator) allows closed captioning of Flash animations.

• Use Window-Eyes 4.2 to read Flash animation.

Flash MX demonstration – Zoot Suit Culture http://www.pbs.org/wgbh/amex/zoot/eng_sfeature/sf_zoot_mx.html.

http://www.pbs.org/wgbh/amex/zoot/eng_sfeature/sf_zoot_mx.html

50

Summary

By providing Web accessibility for disabled students, you and Irvine Valley College will be in compliance with Section 508 of the Rehabilitation Act. Provide disabled students access to

electronic and information technologyto achieve academic and career success

Graduating student in wheel chair

51

Acknowledgement Of Sources

High Tech Center Training UnitUniversity of BathWebAIM (Accessibility In Mind)National Center for Accessible MediaUniversity of Wisconsin - Trace R & D

CenterCalifornia State University, Northridge -

Disability ConferenceCalifornia State University, Fresno - Videos

how do i design an accessible web site?

Documents