GENASYSm.maine PT3 Catalyst Grant

1. GENASYS University of Southern Maine 301C Bailey Hall 37 College Avenue, Gorham, ME 04038 Generating Assistive Technology Systemically Where powerful, long-term, systemic changes in teacher education are stimulated GENASYS.usm.maine.edu PT3 Catalyst Grant

2. Web Accessibility Developed by: Doug Kahill

3. What are the most important things to understand in terms of making a Web site accessible? People access the Web in very different ways. Web sites should be designed in ways that enable access by all people. • regardless of what kind of hardware or software is used

4. Why?It’s the right thing to do & it’s the law! The Rehabilitation Act Section 504 (1973) Section 508 (1998) The Individuals with Disabilities Education Act (IDEA) (1975, 1990, 1997) The Americans with Disabilities Act of 1990 (ADA) The Telecommunications Act of 1996 Section 255 The Assistive Technology Act of 1998 (ATA)

5. Who is Affected? Persons who: may not be able to see, hear, move, or be able to process some types of information easily or at all may not have or be able to use a keyboard or mouse may have difficulty reading or comprehending text

6. Who is Affected? (cont’d) Persons who: may have a text-only screen, a small screen, or a slow Internet connection may not speak or understand fluently the language in which the document is written • may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system

7. World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) www.w3.org/wai Detailed guidelines on Web accessibility Guidelines will change as technology advances

8. Accessibility Guideline 1Provide equivalent alternatives to auditory and visual content.

9. Examples of Equivalent Alternatives Navigational Elements In this example, navigational elements are displayed both as text and image. Persons who have difficulty processing textual information may benefit from viewing the icons, and vice-versa.

10. Examples of Equivalent Alternatives Transcripts A text transcript should accompany a media clip that includes speech.

11. Examples of Equivalent Alternatives Descriptions Video clips with descriptions in sign language may help individuals who are deaf who are unfamiliar with spoken or written English.

12. Examples of Equivalent Alternatives Captioning Video clips, especially those containing spoken language, should include captioning.

13. Examples of Equivalent Alternatives ALT tags

14. Examples of Equivalent Alternatives ALT tags are important for users of: Screen reading software Slow modems Computers with slow processors and/or low RAM

15. Examples of Equivalent Alternatives

16. Examples of Equivalent Alternatives Images and ALT tags This Web page contains a variety of images, dispersed throughout the text. Here’s a closer look at one of the individual images.

17. Examples of Equivalent Alternatives Images and ALT tags (cont’d) Here’s the same page viewed without images. Notice the presence of a text placeholder where the image should appear. This is the ALT tag.

18. Examples of Equivalent Alternatives Images and ALT tags (cont’d) If no ALT tag had been attached to the image, it would appear completely blank with images turned off, giving the user no information about its content.

19. Accessibility Guideline 2Don’t rely on color alone.

20. Example of WAI Guideline 2 Sufficient contrast between background and text This text would be quite difficult for most people to read. There is little contrast between text and background. Here, there is sufficient contrast between text and background.

21. Example of WAI Guideline 2 Text format and quality of content This text needs emphasis. This text needs emphasis. Here, the emphasis is conveyed only by changing the color of the text. Persons who are color blind may have difficulty noticing the change. Here, there are other changes to the text: underlines, italics, and bold. Any of these different text formats will work to alert the user who has difficulty distinguishing between colors.

22. Accessibility Guideline 3Use markup and style sheets and do so properly.

23. Example of WAI Guideline 3 Choice of HTML tags BOLD STRONG Vs.

24. Accessibility Guideline 4Clarify natural language.

25. Example of WAI Guideline 4 Identify changes in natural language. • Jardinería en España • Trädgårdsskötsel i Sverige • European Rose Forum • Gardening in the United Kingdom • Gärtnern in Deutschland • Le Jardinage en France • Giardinaggio in Italia This list would not be read properly unless the language changes were identified

26. Accessibility Guideline 5 Create tables that transform gracefully.

27. Example of WAI Guideline 5 Ensure necessary mark-up for tables. Author’s intent: Once upon a time, in a land far, far away... Interpretation by screen reader: Once in a land upon far, a time, far away...

28. Accessibility Guideline 6 Ensure that pages featuring new technologies transform gracefully.

29. Example of WAI Guideline 6 Ensure that links are usable when Javascript is not supported.

30. Accessibility Guideline 7 Ensure user control of time-sensitive content changes.

31. Example of WAI Guideline 7 Avoid causing the screen to flicker.

32. Accessibility Guideline 8 Ensure direct accessibility of embedded user interfaces.

33. Example of WAI Guideline 8 Embedded media interfaces QuickTime™ can be accessed via simple keyboard commands, such as hitting the return or arrow keys. RealPlayer™ cannot be accessed via the keyboard.

34. Accessibility Guideline 9 Design fordevice-independence.

35. Example of WAI Guideline 9 Alternative navigation for server-side image maps Server-side image map from the National Weather Service. http://www.state.me.us/mema/weather/weather.htm

36. Example of WAI Guideline 9 (cont’d) Below the image map from the National Weather Service, a table of textual links is included, corresponding to each link from the image map.

37. Accessibility Guideline 10 Use interim solutions.

38. Example of WAI Guideline 10 Use of non-linked characters A screen reader might not be able to separate these links properly because there are no non-link characters between them. This navigation bar includes non-link, printable characters between adjacent links, so a screen reader would be able to separate the links, as intended.

39. Accessibility Guideline 11 Use W3C technologies and guidelines.

40. Example of WAI Guideline 11 Equivalent accessible pages

41. Accessibility Guideline 12 Provide context and orientation information.

42. Example of WAI Guideline 12 Frame identification and navigation Title each frame. Describe the relationships between frames.

43. Example of WAI Guideline 12 (cont’d) Page Navigation This page contains headings, which help the user to navigate between distinct ideas or sections.

44. Accessibility Guideline 13 Provide clear navigation mechanisms.

45. Example of WAI Guideline 13 Clearly identify targets of links. The words, “click here,” as shown in this ad banner, tell the user nothing about the link. A person using a screen reader would have no idea where this link goes. Here’s an example of a good link description. The user has a very good idea where this link will go.

46. Accessibility Guideline 14Ensure that documents are clear and simple.

47. Example of WAI Guideline 14 This Web site has a simple, consistent page layout and navigational system, and uses alt text for images.

48. Web Access Icons Center for Applied Special Technology (CAST) www.cast.org National Center for Accessible Media (NCAM) www.wgbh.org/ncam

49. For further information World Wide Web Consortium (W3C)www.w3.org/WAI/ Equal Access to Software and Information (EASI)www.rit.edu/~easi/ National Center for Accessible Media (NCAM)www.wgbh.org/ncam Center for Applied Special Technology (CAST)www.cast.org Generating Assistive Technology Systemically (GENASYS)genasys.usm.maine.edu