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? • In 1997, more than 1.4 million students were enrolled in California Community Colleges • 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 College entrance

6. Why Is Accessibility A Legal Requirement?

7. Why Is Accessibility A Legal Requirement?

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. Computer hardware OS and Software Multimedia Video Networks Telecommunication devices Information kiosk Web sites Copiers Fax machines Peripherals What Is Electronic And Information Technology? EIT includes, but is not limited to, such things as:

10. Who Benefits From Section 508? Everyone benefits from the accessibility of electronic and information technology. • Voice activated cell phones help users who are blind and people who are driving while using their phones. 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 Personal Digital Assistant Fans watching hockey

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. 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. How Is Your Course ContentPerceived by Others? Touch Sight Hearing

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. Computer access • The ability to access and use computers and other technologies has become essential to virtually every aspect of academic and professional life.

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. Access Technology

20. Web Design Overview • Identify target population • Define page content • Design Web site presentation • Intuitive site navigation • Clearly worded text • Consistent and simple design layout • Content appropriate and meaningful to the audience • Implement Web site Computeruser

21. Designing For Low Vision • People with low vision may have any one of a number of problems with their vision • Poor acuity (blurred or fogged vision) • Loss of all central vision (only see with edges of their eyes) Adult reading with a magnifying glass

22. Designing For Low Vision • People with low vision (continued) • Extreme far-sightedness or near-sightedness • Tunnel 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. Designing For Low Vision • Solutions to accessibility: • Allow the user to zoom in to view portions of the screen in more detail • Allow 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. Designing For Low Vision • Solutions to accessibility: • Do not place text over a patterned background where the two might interfere with each other Can you read this?

25. Designing For Low Vision • 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 Image of red and green apples View of apples by the color-blind: green

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. Designing For The Blind • Solutions to accessibility: • Use consistent or predictable screen and dialog layouts • Use single column text whenever possible • Make line-by-line reading in tables sensible • Associate table headers with table cells

30. Designing For The Blind • Example – Accessible Data Table Coffee Consumption by California Senators Text read aloud using JAWS Name: D. Feinstein, Cups: 4, Types: Espresso, Sugar: No Name: B. Boxer, Cups: 6, Types: Decaf, Sugar: Yes

31. Designing For The Blind • Solutions to accessibility: • Provide text alternatives for all visual information • Graphics have Alt tags – text descriptions of images Graduation cap

32. Designing For The Blind • 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 Blind • Solutions to accessibility: • Avoid frames but, if used, include title that helps understand the frames purpose • Title = “Navigation Frame”; Title = “Content Frame” Web Accessibility Courseware Accessibility Emerging Technology Web Accessibility Resources Best Practices Web Accessibility Adaptive Technology 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. Designing For The Blind • 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. Designing For The Deaf • 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 Deaf • Solutions to accessibility: • Provide all auditory information in a visual form using text transcripts. • Provide a link to a text transcript for audioclips –e-text file or HTML file Text transcript – Zoot Suit Fashion

38. Designing For The Deaf 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

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. Designing For The Motor Impaired • 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. Designing For The Motor Impaired • 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. Designing For The Learning Disabled • 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. Designing For The Learning Disabled • 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. Designing For The Learning Disabled • 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 Access • Accessible 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

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.

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