Accessible Web Design:Accessible Web Design:BackgroundBackground

TopicsTopics

• Who benefits from accessible web design?Who benefits from accessible web design?

• Policy and lawPolicy and law

• Why make sites accessible?Why make sites accessible?

• How do people with disabilities access the How do people with disabilities access the web?web?

Who benefits from accessible Who benefits from accessible Web sites?Web sites?

• People with disabilities• Our aging population• People using a wide range of technologies

Disability As a Function of AgeDisability As a Function of Age

Source: U.S. Census Bureau Report on Americans with Disabilities: 1994-95, P70-61 (August 1997)

Based on Survey of Income and Program Participation, Oct. 1994-Jan. 1995

Disability As a Function of AgeDisability As a Function of Age

7%

© 2001 Trace R&D Center, University of Wisconsin

Disability As a Function of AgeDisability As a Function of Age

9%

© 2001 Trace R&D Center, University of Wisconsin

Disability As a Function of AgeDisability As a Function of Age

© 2001 Trace R&D Center, University of Wisconsin

15%

Disability As a Function of AgeDisability As a Function of Age

20%

© 2001 Trace R&D Center, University of Wisconsin

Disability As a Function of AgeDisability As a Function of Age

29%

Disability As a Function of AgeDisability As a Function of Age

37%

Disability As a Function of AgeDisability As a Function of Age

59%

Our Aging PopulationOur Aging Population• In 2010, the majority of the US population In 2010, the majority of the US population

will be 45 years and olderwill be 45 years and older

Brian Basset, Cartoonist and creator of syndicated cartoon Adam@Home

Accessible Web Pages - Who benefits?Accessible Web Pages - Who benefits?

• People with disabilities– Blind or visually impaired– Mobility impairments– Deaf or hearing impaired– Cognitive disabilities (reading difficulties)

• People with slow Internet connection• People using PDAs, phones or other mobile devices, or older

equipment to view the web• People whose primary language is not English• Older people and Seniors• People who are color blind

In short ….In short ….

Who benefits?Who benefits?

EVERYONEEVERYONE

Federal laws and Accessible ITFederal laws and Accessible IT

ADA & Section 504 of the Rehabilitation ActADA & Section 504 of the Rehabilitation Act– Establishes the Establishes the rightsrights of individuals to equal access of individuals to equal access - Right - Right

to an accommodation if needed to achieve equal accessto an accommodation if needed to achieve equal access

Section 508 of the Rehabilitation ActSection 508 of the Rehabilitation Act– Establishes Establishes standardsstandards for development, procurement, for development, procurement,

maintenance and use of accessible IT by federal agencies & maintenance and use of accessible IT by federal agencies & their employeestheir employees

NYS PoliciesNYS Policies

New York State's Official Policy/Standards

NYS Statewide Technology Policy P08-005

"Accessibility of Web-Based Information and Applications”

http://www.cio.ny.gov/Policy/NYS-P08-005.pdf

Standards/Guidelines for Standards/Guidelines for AccessibilityAccessibility

Section 508 of the Rehabilitation ActSection 508 of the Rehabilitation Act– www.section508.gov

Web Content Accessibility Guidelines (WCAG v1.0)Web Content Accessibility Guidelines (WCAG v1.0)– http://www.w3.org/WAI/http://www.w3.org/WAI/– Priority 1, 2 and 3 checkpointsPriority 1, 2 and 3 checkpoints

• Priority 1 - MUST DOPriority 1 - MUST DO• Priority 2 - SHOULD DOPriority 2 - SHOULD DO• Priority 3 - MAY DOPriority 3 - MAY DO

– Version 2 in final draft formVersion 2 in final draft form– NYS Statewide Technology Policy P08-005NYS Statewide Technology Policy P08-005

How do People with Disabilities How do People with Disabilities Access the Web?Access the Web?

Blind and visually impairedBlind and visually impaired Color blindColor blind Deaf and hearing impairedDeaf and hearing impaired Mobility impairmentsMobility impairments Learning disabilitiesLearning disabilities

BlindnessBlindnessUsersUsers::

• Do not use a mouseDo not use a mouse• May use a screen reader to listen to the May use a screen reader to listen to the

contentcontent• May use a refreshable Braille displayMay use a refreshable Braille display

Design considerations:

• Images, photos and graphics are unusable• Colors are unusable• Navigation may be difficult / confusing• All content must be accessible from the

keyboard

BlindnessBlindnessAccessible Design TechniquesAccessible Design Techniques

• Provide text description for all meaningful images and photos (“alt” text attributes – e.g. alt=“Photo of … ”)

• Provide an option to skip repetitive navigation

• Ensure keyboard accessibility

• Use meaningful link text (“Class schedule” rather than “click here”)

• Use proper, semantic markup (titles, header tags, etc.)

• Don’t write scripts that require mouse usage

Low VisionLow Vision

UsersUsers::May use screen magnification May use screen magnification softwaresoftware

Design Considerations:

Images, photos and graphics may become unusable when enlarged

Navigation may be difficult / confusing

Low Vision: Common causesLow Vision: Common causes

CataractsCataracts

GlaucomaGlaucoma

Low Vision: Common causesLow Vision: Common causes

Macular DegenerationMacular Degeneration

RetinopathyRetinopathy

Magnified graphical textMagnified graphical text

Low VisionLow VisionAccessible Design TechniquesAccessible Design Techniques

• Limit or eliminate text within graphicsLimit or eliminate text within graphics• Have plenty of contrastHave plenty of contrast• Use relative rather than absolute font sizesUse relative rather than absolute font sizes

Color BlindnessColor Blindness

UsersUsers::• Approximately 8-10% of the male population and about Approximately 8-10% of the male population and about

0.5% of the female population experiences some form of 0.5% of the female population experiences some form of color deficiencycolor deficiency

Design Considerations:• Reds and greens are often indistinguishable• Other colors may be indistinguishable

Color BlindnessColor BlindnessMap of Hurricane Isabel (with color)Map of Hurricane Isabel (with color)

Color Blindness: simulationColor Blindness: simulation

Map of Hurricane Isabel (with red/green colorblindness)Map of Hurricane Isabel (with red/green colorblindness)

Simulated using Vischek (http://www.vischeck.com/vischeck/vischeckURL.php )

Color Blindness: simulationColor Blindness: simulation

Color BlindnessColor BlindnessAccessible Design TechniquesAccessible Design Techniques

Do not use color alone to convey contentDo not use color alone to convey content– Use additional cues or information to convey contentUse additional cues or information to convey content

The flights listed below in RED have been cancelled.The flights in GREEN are departing on time.

Delta 1342United 320American Airlines 787Southwest 2390

The flights listed below that have been cancelled are indicated in RED and by an asterisk.The flights in GREEN are departing on time.Delta 1342 *United 320American Airlines 787Southwest 2390 *

Mobility ImpairmentsMobility Impairments

UsersUsers:: May use only the keyboard for navigation May tire quickly May not have fine motor control

Design ConsiderationsDesign Considerations:: All content must be accessible from the keyboard Surfing through large or lengthy navigation blocks may

cause fatigue; make sure 'skip navigation' link is visible Small links are difficult to select

Mobility Impairments: Assistive Mobility Impairments: Assistive TechnologyTechnology

Head wandHead wand

Mouth stickMouth stick

Adaptive KeyboardAdaptive Keyboard

Mobility Impairments Mobility Impairments Accessible Design TechniquesAccessible Design Techniques

• Ensure that the page is keyboard accessibleEnsure that the page is keyboard accessible

• Do not require fine motor control (free of moving links or Do not require fine motor control (free of moving links or very small links)very small links)

• Provide a way to skip over long lists of links and other Provide a way to skip over long lists of links and other lengthy content (visible skip navigation link)lengthy content (visible skip navigation link)

Deaf or Hard of HearingDeaf or Hard of Hearing

UsersUsers::• Do not use audio features alone to convey information

Design Considerations:• Video clips that include audio-only are unusable. If included,

clips should be captioned.• Audio clips are unusable. If included, provide a transcript.

DeafnessDeafnessAccessible Design TechniquesAccessible Design Techniques

• Provide transcripts for all audio content Provide transcripts for all audio content • Provide synchronized captions for all video content (e.g. Provide synchronized captions for all video content (e.g.

MAGpie - free captioning tool)MAGpie - free captioning tool)• Many people benefitMany people benefit

Students in library w/o headsetStudents in library w/o headset People with learning disabilitiesPeople with learning disabilities People for whom English is not their primary languagePeople for whom English is not their primary language People in a noisy environmentPeople in a noisy environment Everyone (content is presented in >1 medium)Everyone (content is presented in >1 medium)

Cognitive DisabilitiesCognitive Disabilities

UsersUsers::• May have difficulty focusing on or comprehending lengthy

sections of text• Complex layouts or inconsistent navigational schemes may be

confusing• May need content in >1 form

Design Considerations:• Animated images may be distracting• Complex layouts may lead to confusion• Text-only content may be limiting

Cognitive Disabilities:Cognitive Disabilities: Accessible Design TechniquesAccessible Design Techniques

• Simplify the layout as much as possibleSimplify the layout as much as possible• Provide clear and consistent site navigationProvide clear and consistent site navigation• Organize information into manageable “chunks”Organize information into manageable “chunks”• Logically organize your site and individual documentsLogically organize your site and individual documents• Use icons, illustrations, arrows, audio, video or other Use icons, illustrations, arrows, audio, video or other

multimedia to enhance understandingmultimedia to enhance understanding

Web Accessibility: Web Accessibility: Designing for EveryoneDesigning for Everyone

People using:People using:• different web browsersdifferent web browsers• different screen resolutionsdifferent screen resolutions• phone web servicesphone web services• handheld display unitshandheld display units• car computing systemscar computing systems• screen readersscreen readers

People who:People who:• are deaf or hard of hearingare deaf or hard of hearing• are blind or visually impaired

(e.g. low vision, color blind)color blind)• can’t use a mousecan’t use a mouse• possess differences in possess differences in

attention/perceptionattention/perception

To Learn MoreTo Learn MoreForum IT Accessibility Curriculum and Resources

http://www.nysforum.org/accessibility/resources/

WebAIM (Web Accessibility in Mind) http://www.webaim.org

EASI (Equal Access to Software and Information) http://people.rit.edu/easi/

NCAM (National Center for Accessible Media), WGBH http://ncam.wgbh.org/

AccessIT (National Center on Accessible Information Technology in Education) http://www.washington.edu/accessit

Accessible Web Design:Accessible Web Design:BackgroundBackground

THE ENDRevised 2010