Accessible Web Design: Background

Topics 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 web?How do people with disabilities access the web?

Who benefits from accessible Web sites? People with disabilities Our aging population People using a wide range of technologies

Disability As a Function of Age Source: U.S. Census Bureau Report on Americans with Disabilities: , P70-61 (August 1997) Based on Survey of Income and Program Participation, Oct Jan. 1995

Disability As a Function of Age 7% © 2001 Trace R&D Center, University of Wisconsin

Disability As a Function of Age 9% © 2001 Trace R&D Center, University of Wisconsin

Disability As a Function of Age © 2001 Trace R&D Center, University of Wisconsin 15%

Disability As a Function of Age 20% © 2001 Trace R&D Center, University of Wisconsin

Disability As a Function of Age 29%

Disability As a Function of Age 37%

Disability As a Function of Age 59%

Our Aging Population In 2010, the majority of the US population will be 45 years and olderIn 2010, the majority of the US population will be 45 years and older Brian Basset, Cartoonist and creator of syndicated cartoon

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 ….

Who benefits? EVERYONE

Federal laws and Accessible IT ADA & Section 504 of the Rehabilitation Act –Establishes the rights of individuals to equal access - Right to an accommodation if needed to achieve equal access Section 508 of the Rehabilitation Act –Establishes standards for development, procurement, maintenance and use of accessible IT by federal agencies & their employees

NYS Policies New York State's Official Policy/Standards NYS Statewide Technology Policy P "Accessibility of Web-Based Information and Applications”

Standards/Guidelines for Accessibility Section 508 of the Rehabilitation Act – Web Content Accessibility Guidelines (WCAG v1.0) – –Priority 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 form –NYS Statewide Technology Policy P08-005

How do People with Disabilities Access the Web?  Blind and visually impaired  Color blind  Deaf and hearing impaired  Mobility impairments  Learning disabilities

Blindness Users: Do not use a mouseDo not use a mouse May use a screen reader to listen to the contentMay use a screen reader to listen to the content 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

Blindness Accessible 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 Vision Users: May use screen magnification software Design Considerations: Images, photos and graphics may become unusable when enlarged Navigation may be difficult / confusing

Low Vision: Common causes Cataracts Glaucoma

Macular Degeneration Retinopathy

Magnified graphical text

Low Vision Accessible 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 Blindness Users: Approximately 8-10% of the male population and about 0.5% of the female population experiences some form of color deficiencyApproximately 8-10% of the male population and about 0.5% of the female population experiences some form of color deficiency Design Considerations: Reds and greens are often indistinguishable Other colors may be indistinguishable

Color Blindness Map of Hurricane Isabel (with color)

Color Blindness: simulation Map of Hurricane Isabel (with red/green colorblindness) Simulated using Vischek ( )

Color Blindness: simulation

Color Blindness Accessible Design Techniques Do not use color alone to convey content –Use 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 1342 United 320 American Airlines 787 Southwest 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 320 American Airlines 787 Southwest 2390 *

Mobility Impairments Users:  May use only the keyboard for navigation  May tire quickly  May not have fine motor control Design 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 Technology Head wand Mouth stick Adaptive Keyboard

Mobility Impairments Accessible 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 very small links)Do not require fine motor control (free of moving links or very small links) Provide a way to skip over long lists of links and other lengthy content (visible skip navigation link)Provide a way to skip over long lists of links and other lengthy content (visible skip navigation link)

Deaf or Hard of Hearing Users: 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.

Deafness Accessible Design Techniques Provide transcripts for all audio contentProvide transcripts for all audio content Provide synchronized captions for all video content (e.g. MAGpie - free captioning tool)Provide synchronized captions for all video content (e.g. MAGpie - free captioning tool) Many people benefitMany people benefit  Students in library w/o headset  People with learning disabilities  People for whom English is not their primary language  People in a noisy environment  Everyone (content is presented in >1 medium)

Cognitive Disabilities Users: 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: Accessible 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 multimedia to enhance understandingUse icons, illustrations, arrows, audio, video or other multimedia to enhance understanding

Web Accessibility: Designing for Everyone 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: are deaf or hard of hearingare deaf or hard of hearing color blind)are blind or visually impaired (e.g. low vision, color blind) can’t use a mousecan’t use a mouse possess differences in attention/perceptionpossess differences in attention/perception

To Learn More Forum IT Accessibility Curriculum and Resources  WebAIM (Web Accessibility in Mind)  EASI (Equal Access to Software and Information)  NCAM (National Center for Accessible Media), WGBH  AccessIT (National Center on Accessible Information Technology in Education) 

Accessible Web Design: Background THE END Revised 2010