1

GENASYS.usm.maine.eduPT3 Catalyst Grant

GENASYSUniversity of Southern Maine

301C Bailey Hall37 College Avenue, Gorham, ME

04038

Generating Assistive Technology Systemically

Where powerful, long-term, systemic changesin teacher education are stimulated

Web

AccessibilityDeveloped 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 1996Section 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)

www.w3.org/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.

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

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)www.cast.org

National Center for Accessible Media(NCAM)www.wgbh.org/ncam

49

For further informationWorld 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