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

Web Accessibility Developed by: Doug Kahill

3 regardless of what kind of hardware or software is used 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.

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

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 have difficulty reading or comprehending text may not have or be able to use a keyboard or mouse

6 may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system 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

7 World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) Detailed guidelines on Web accessibility Guidelines will change as technology advances

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

9 Examples of Equivalent Alternatives 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. Navigational Elements

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

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

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

13 ALT tags Examples of Equivalent Alternatives

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

15 Examples of Equivalent Alternatives

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

17 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. Examples of Equivalent Alternatives Images and ALT tags (cont’d)

18 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. Examples of Equivalent Alternatives Images and ALT tags (cont’d)

19 Accessibility Guideline 2 Don’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 Text format and quality of content Example of WAI Guideline 2 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 3 Use markup and style sheets and do so properly.

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

24 Accessibility Guideline 4 Clarify 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 Once in a land upon far, a time, far away... Once upon a time, in a land far, far away... Author’s intent: Interpretation by screen reader: Ensure necessary mark-up for tables.

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

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

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

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

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

33 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. Example of WAI Guideline 8

34 Accessibility Guideline 9 Design for device-independence.

35 Example of WAI Guideline 9 Alternative navigation for server-side image maps Server-side image map from the National Weather Service. ema/weather/weather.htm

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

37 Accessibility Guideline 10 Use interim solutions.

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

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 Describe the relationships between frames. Title each frame.

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

44 Accessibility Guideline 13 Provide clear navigation mechanisms.

45 Example of WAI Guideline 13 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. Clearly identify targets of links.

46 Accessibility Guideline 14 Ensure 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) National Center for Accessible Media (NCAM)

49 For further information World Wide Web Consortium (W3C) Equal Access to Software and Information (EASI) National Center for Accessible Media (NCAM) Center for Applied Special Technology (CAST) Generating Assistive Technology Systemically (GENASYS) genasys.usm.maine.edu genasys.usm.maine.edu