2004 prentice hall, inc. all rights reserved. chapter 29 – accessibility outline 29.1 introduction...

2004 Prentice Hall, Inc. All rights reserved.

Chapter 29 – Accessibility

Outline29.1 Introduction29.2 Web Accessibility29.3 Web Accessibility Initiative29.4 Providing Alternatives for Images29.5 Maximizing Readability by Focusing on Structure29.6 Accessibility in XHTML Tables29.7 Accessibility in XHTML Frames29.8 Accessibility in XML29.9 Accessibility in Cascading Style Sheets (CSS)29.10 Testing the Accessibility of an XHTML Document29.11 Using Voice Synthesis and Recognition with VoiceXML 29.12 CallXML 29.13 JAWS for Windows29.14 Other Accessibility Tools


Chapter 29 – Accessibility

29.15 Accessibility in Microsoft Windows 2000 and XP29.15.1 Tools for People with Visual Impairments29.15.2 Tools for People with Hearing Impairments29.15.3 Tools for Users Who Have Difficulty Using the

Keyboard29.15.4 Microsoft Narrator29.15.5 Microsoft On-Screen Keyboard29.15.6 Accessibility Features in Microsoft Internet Explorer

29.16 Accessibility in Macromedia Products29.16.1 Dreamweaver29.16.2 Flash

29.17 Web Resources


Objectives

• In this lesson, you will learn:– To introduce the World Wide Web Consortium’s Web Content

Accessibility Guidelines 1.0 (WCAG 1.0).– To understand how to use the alt attribute of the img element to

describe images to people with visual impairments, mobile-Web-device users, search engines, etc.

– To understand how to make XHTML tables more accessible to screen reader applications.

– To understand how to verify that XHTML tags are used properly and to ensure that Web pages are viewable on any type of display or reader.

– To understand how VoiceXML and CallXML are changing the way people with disabilities access information on the Web.

– To introduce the various accessibility aids offered in Windows 2000, Windows XP, Macromedia Dreamweaver and Macromedia Flash.


29.1 Introduction

• Web Accessibility Initiative


29.2 Web Accessibility

• Americans with Disabilities Act (ADA)• Voice activation• Visual enhancers• Auditory aids


29.2 Web Accessibility

Act Purpose Americans with Disabilities Act of 1990

The ADA prohibits discrimination on the basis of disability in employment, state and local government, public accommodations, commercial facilities, transportation and telecommunications.

Telecommunications Act of 1996 The Telecommunications Act of 1996 contains two amendments to Section 255 and Section 251(a)(2) of the Communications Act of 1934. These amendments require that communication devices, such as cell phones, telephones and pagers, be accessible to individuals with disabilities.

Individuals with Disabilities Education Act of 1997

Educational materials in schools must be made accessible to children with disabilities.

Rehabilitation Act of 1973 Section 504 of the Rehabilitation Act states that college-sponsored activities receiving federal funding cannot discriminate against individuals with disabilities. Section 508 was strengthened in 1998 to require the federal procurement of accessible electronic and information technology. The Electronic and Information Technology Accessibility Standards provide the federal technical standards for accessible Web design. Section 508 mandates that all government institutions receiving federal funding and all businesses that sell services to the government must design their Web sites in accordance with these stipulations.

Fig. 29.1 Acts designed to protect access to the Internet for people with disabilities.


29.3 Web Accessibility Initiative

• Accessibility– Usability of an application or Web site by people with

disability

– Web Content Accessibility Guidelines (WCAG) 1.0• Priority-one checkpoints

– Goals that must be met to ensure accessibility

• Priority-two checkpoints

– Not essential, highly recommended

• Priority-three checkpoints

– Slightly improve accessibility

• Quick tips


29.4 Providing Alternatives for Images

• alt attribute– Text equivalent of each item

• longdesc attribute– Augment alt attribute’s description

• D-link– Provides descriptive text about graphs and charts

• Emacspeak– Translate text to voice data


29.5 Maximizing Readability by Focusing on Structure

• Readability– h1 elements used to divide content into sections, not for

emphasis

• Gunning Fog Index– Formula that produces readability grade when applied to text

sample


29.6 Accessibility in XHTML Tables

• Linearized reading– Top to bottom, left to right

• Use CSS instead of tables

2004 Prentice Hall, Inc.All rights reserved.

OutlineOutline

withoutheaders.html(1 of 3)

1 <?xml version = "1.0"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4

5 

6 

7

8 <html>

9 <head>

10 <title>XHTML Table Without Headers</title>

11

12 <style type = "text/css">

13 body { background-color: #ccffaa;

14 text-align: center }

15 </style>

16 </head>

17

18 <body>

19

20 <p>Price of Fruit</p>

21

22 <table border = "1" width = "50%">

23


OutlineOutline


24 <tr>

25 <td>Fruit</td>

26 <td>Price</td>

27 </tr>

28

29 <tr>

30 <td>Apple</td>

31 <td>$0.25</td>

32 </tr>

33

34 <tr>

35 <td>Orange</td>

36 <td>$0.50</td>

37 </tr>

38

39 <tr>

40 <td>Banana</td>

41 <td>$1.00</td>

42 </tr>

43

44 <tr>

45 <td>Pineapple</td>

46 <td>$2.00</td>

47 </tr>

48


OutlineOutline


49 </table>

50

51 </body>

52 </html>

OutlineOutline

withheader.html(1 of 3)

1 <?xml version = "1.0"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4

5 

6 

7

8 <html>

9 <head>

10 <title>XHTML Table With Headers</title>

11

12 <style type = "text/css">

13 body { background-color: #ccffaa;

14 text-align: center }

15 </style>

16 </head>

17

18 <body>

19

20 

21 

22 

23 

24


OutlineOutline


25 <table width = "50%" border = "1"

26 summary = "This table uses th elements and id and

27 headers attributes to make the table readable

28 by screen readers">

29

30 <caption><strong>Price of Fruit</strong></caption>

31

32 <tr>

33 <th id = "fruit">Fruit</th>

34 <th id = "price">Price</th>

35 </tr>

36

37 <tr>

38 <td headers = "fruit">Apple</td>

39 <td headers = "price">$0.25</td>

40 </tr>

41

42 <tr>

43 <td headers = "fruit">Orange</td>


45 </tr>

46


OutlineOutline


47 <tr>

48 <td headers = "fruit">Banana</td>


50 </tr>

51

52 <tr>

53 <td headers = "fruit">Pineapple</td>


55 </tr>

56

57 </table>

58

59 </body>

60 </html>


29.7 Accessibility in XHTML Frames

• Frames often lack proper descriptions in title element– CSS as an alternative


29.8 Accessibility in XML

• XML Guidelines– Include text description for each nontext object on page


29.9 Accessibility in Cascading Style Sheets (CSS)

• Aural style sheets– Specify properties of voice

• Volume

• Pitch

• Pause

• Stress


29.10 Testing the Accessibility of an XHTML Document

• Bobby ( bobby.watchfire.com )– Tests XHTML documents for accessibility


29.10 Testing the Accessibility of an XHTML Document


29.11 Using Voice Synthesis and Recognition with VoiceXML

• VoiceXML– Enables computers to speak to users– Element form

• Presents information and gathers data– Element menu

• Provides users with options and transfers control– Element link

• Create an active link to home page• Attribute next

– URI navigated to when link is selected– Element grammar

• Marks up text user must speak to select link– Element prompt

• Instruct user to make a selection• Attribute count

– Maintains number of times a prompt is spoken

OutlineOutline

main.vxml(1 of 4)

1 <?xml version = "1.0" encoding = "UTF-8"?>

2 <vxml version = "2.0">

3

4 

5 

6

7 <link next = "#home">

8 <grammar type = "text/gsl">home</grammar>

9 </link>

10

11 <link next = "#end">

12 <grammar type = "text/gsl">exit</grammar>

13 </link>

14

15 <var name = "currentOption" expr = "'home'"/>

16

17 <form>

18 <block>

19 Welcome to the voice page of Deitel and

20 Associates. To exit any time say exit.

21 To go to the home page any time say home.

22 </block>

23 <subdialog src = "#home"/>

24 </form>

25


OutlineOutline

main.vxml(2 of 4)

26 <menu id = "home">

27 <prompt count = "1" timeout = "10s">

28 You have just entered the Deitel home page.

29 Please make a selection by speaking one of the

30 following options:

31 <enumerate/>

32 </prompt>

33

34 <prompt count = "2">

35 Please say one of the following.

36 <enumerate/>

37 </prompt>

38

39 <choice next = "#about">About us</choice>

40 <choice next = "#directions">Driving directions</choice>

41 <choice next = "publications.vxml">Publications</choice>

42 </menu>

43

44 <form id = "about">

45 <block>

46 About Deitel and Associates, Inc.

47 Deitel and Associates, Inc. is an internationally

48 recognized corporate training and publishing organization,


OutlineOutline

main.vxml(3 of 4)

49 specializing in programming languages, Internet and World

50 Wide Web technology and object technology education.

51 The company provides courses on Java, C++,

52 Visual Basic, C, Internet and World Wide Web programming

53 and Object Technology.

54 <assign name = "currentOption" expr = "'about'"/>

55 <goto next = "#repeat"/>

56 </block>

57 </form>

58

59 <form id = "directions">

60 <block>

61 Directions to Deitel and Associates, Inc. We are located at

62 Clock Tower Place in Maynard, Massachusetts. Our offices are

63 located just inside the main entrance on Main Street.

64 <assign name = "currentOption" expr = "'directions'"/>


66 </block>

67 </form>

68

69 <form id = "repeat">

70 <field name = "confirm" type = "boolean">


OutlineOutline

main.vxml(4 of 4)

71 <prompt>

72 To repeat, say yes. To go back to home, say no.

73 </prompt>

74

75 <filled>

76 <if cond = "confirm == true">

77 <goto expr = "'#' + currentOption"/>

78 <else/>

79 <goto next = "#home"/>

80 </if>

81 </filled>

82

83 </field>

84 </form>

85

86 <form id = "end">

87 <block>

88 Thank you for visiting Deitel and Associates voice page.

89 Have a nice day.

90 <exit/>

91 </block>

92 </form>

93

94 </vxml>


Computer: Welcome to the voice page of Deitel and Associates. To exit any time say exit. To go to the home page any time say home. User: Home Computer: You have just entered the Deitel home page. Please make a selection by speaking one of the following options: About us, Driving directions, Publications. User: Driving directions Computer: Directions to Deitel and Associates, Inc. We are located at Clock Tower Place in Maynard, Massachusetts. Our offices are located just inside the main entrance on Main Street. To repeat, say yes. To go back to home, say no.

OutlineOutline

publications.vxml(1 of 5)


2 <vxml version = "2.0">

3

4 

5 

6

7 <link next = "main.vxml#home">

8 <grammar type = "text/gsl">home</grammar>

9 </link>

10 <link next = "main.vxml#end">

11 <grammar type = "text/gsl">exit</grammar>

12 </link>

13 <link next = "#publication">

14 <grammar type = "text/gsl">menu</grammar>

15 </link>

16

17 <var name = "currentOption" expr = "'home'"/>

18

19 <menu id = "publication">

20

21 <prompt count = "1" timeout = "12s">

22 Following are some of our publications. For more

23 information visit our Web page at www.deitel.com.

24 To repeat the following menu, say menu at any time.

25 Please select by saying one of the following books:


OutlineOutline


26 <enumerate/>

27 </prompt>

28

29 <prompt count = "2">

30 Please select from the following books.

31 <enumerate/>

32 </prompt>

33

34 <choice next = "#java">Java.</choice>

35 <choice next = "#c">C.</choice>

36 <choice next = "#cplus">C plus plus.</choice>

37 </menu>

38

39 <form id = "java">

40 <block>

41 Java How to Program, Fifth Edition.

42 The complete, authoritative introduction to Java.

43 Java is revolutionizing software development with

44 multimedia-intensive, platform-independent,

45 object-oriented code for conventional, Internet,

46 intranet and extranet-based applets and applications.

47 This Fifth Edition of the world's most widely used

48 university-level Java textbook carefully explains


OutlineOutline


49 Java's extraordinary capabilities.

50 <assign name = "currentOption" expr = "'java'"/>


52 </block>

53 </form>

54

55 <form id = "c">

56 <block>

57 C How to Program, Fourth Edition.

58 World-renowned corporate trainers and best-selling authors

59 Harvey and Paul Deitel offer the most comprehensive, practical

60 introduction to C ever published with hundreds of hands-on

61 exercises, more than 250 complete programs written

62 and documented for easy learning, and exceptional insight into good

63 programming practices, maximizing performance, avoiding errors,

64 debugging, and testing. For anyone who wants to learn C, improve

65 their existing C skills, and understand how C serves as the

66 foundation for C++, Java, and object-oriented development.

67 <assign name = "currentOption" expr = "'c'"/>


69 </block>

70 </form>


OutlineOutline


71

72 <form id = "cplus">

73 <block>

74 The C++ How to Program, Fourth Edition.

75 With nearly 250,000 sold, Harvey and Paul Deitel's C++

76 How to Program is the world's best-selling introduction

77 to C++ programming. The Deitels' C++ How to Program

78 is the most comprehensive, practical introduction to C++ ever

79 published with hundreds of hands-on exercises, roughly 250

80 complete programs written and documented for easy learning,

81 and exceptional insight into good programming practices, maximizing

82 performance, avoiding errors, debugging, and testing.

83 <assign name = "currentOption" expr = "'cplus'"/>


85 </block>

86 </form>

87

88 <form id = "repeat">

89 <field name = "confirm" type = "boolean">

90


OutlineOutline


91 <prompt>

92 To repeat, say yes. Say no, to go back to home.

93 </prompt>

94

95 <filled>

96 <if cond = "confirm == true">

97 <goto expr = "'#' + currentOption"/>

98 <else/>

99 <goto next = "#publication"/>

100 </if>

101 </filled>

102 </field>

103 </form>

104 </vxml>


29.11 Using Voice Synthesis and Recognition with VoiceXML

VoiceXML element Description assign Assigns a value to a variable. block A simple form-item container element. break Instructs the computer to pause its speech output for a specified period of time.

choice Specifies an option in a menu element. enumerate Lists all the available options to the user. exit Exits the program. filled Contains elements to be executed when the computer receives user input for a form element.

form Gathers information from the user for a set of variables. goto Transfers control from one dialog to another. grammar Specifies grammar for the expected input from the user. if, else, elseif

Control statements used for making logic decisions.

link A transfer of control similar to the goto statement, but a link can be executed at any time during the program’s execution.

menu Provides user options and transfers control to other dialogs, based on the selected option.

prompt Specifies text to be read to the user when a selection is needed. subdialog Calls another dialog. After executing the subdialog, the calling dialog resumes control.

var Declares a variable. vxml Top-level tag specifying that the document should be processed by a VoiceXML interpreter.

Fig. 29.7 VoiceXML elements.


29.12 CallXML

• A technology created and supported by Voxeo– Text-to-speech (TTS) engine– callXML tags– maxDigits attribute

• Maximum number of digits application can accept– termDigits attribute

• List of characters terminate user input– maxTime attribute

• Maximum amount of time to wait for a user response– onMaxSilence event handler

• Invoked when the maxTime expires– onTermDigit event handler

• Notifies application action to perform when termDigits selected– <onHangup /> event handler

• Terminates telephone call when users hangs up

OutlineOutline

hello.xml(1 of 1)


2

3 

4 

5

6 <callxml>

7 <text>Hello World.</text>

8 </callxml>

OutlineOutline

isbn.xml(1 of 3)


2

3 

4 

5

6 <callxml>

7 <block>

8 <text>

9 Welcome. To obtain the ISBN of the Internet and World

10 Wide Web How to Program: Third Edition, please enter 1.

11 To obtain the ISBN of the XML How to Program,

12 please enter 2. To obtain the ISBN of the Java How

13 to Program: Fifth Edition, please enter 3. To exit the

14 application, please enter 4.

15 </text>

16

17 

18 

19 

20 <getDigits var = "ISBN"

21 maxDigits = "1"

22 termDigits = "1234"

23 maxTime = "60s" />

24

25

OutlineOutline

isbn.xml(2 of 3)

26 

27 <onMaxSilence>

28 <text>

29 Please enter either 1, 2, 3 or 4.

30 </text>

31

32 <getDigits var = "ISBN"

33 termDigits = "1234"

34 maxDigits = "1"

35 maxTime = "60s" />

36

37 </onMaxSilence>

38

39 <onTermDigit value = "1">

40 <text>

41 The ISBN for the Internet book is 0 1 3 1 4 5 0 9 1 3.

42 Thank you for calling our CallXML application.

43 Good-bye.

44 </text>

45 </onTermDigit>

46


48 <text>

49 The ISBN for the XML book is 0 1 3 0 2 8 4 1 7 3.

OutlineOutline

isbn.xml(3 of 3)

51 Good-bye.

52 </text>

53 </onTermDigit>

54


56 <text>

57 The ISBN for the Java book is 0 1 3 1 0 1 6 2 1 0.


59 Good-bye.

60 </text>

61 </onTermDigit>

62


64 <text>


66 Good-bye.

67 </text>

68 </onTermDigit>

69 </block>

70

71 

72 <onHangup />

73 </callxml>


29.12 CallXML

Element Description assign Assigns a value to a variable, var. clear Clears the contents of the var attribute. clearDigits Clears all digits that the user has entered. goto Navigates to another section of the current CallXML application or to

a different CallXML application. The value attribute specifies the application URL. The submit attribute lists the variables that are passed to the invoked application. The method attribute states whether to use the HTTP get or post request types when sending and retrieving information. A get request retrieves data from a Web server without modifying the contents, while the post request sends modified data.

run Starts a new CallXML session for each call. The value attribute specifies which CallXML application to retrieve. The submit attribute lists the variables that are passed to the invoked application. The method attribute states whether to use the HTTP get or post request type. The var attribute stores the identification number of the session.

sendEvent Allows multiple sessions to exchange messages. The value attribute stores the message, and the session attribute specifies the identification number of the session that receives the message.

answer Answers an incoming telephone call.


29.12 CallXMLcall Calls the URL specified by the value attribute. The callerID

attribute contains the phone number that is displayed on a CallerID device. The maxTime attribute specifies the length of time to wait for the call to be answered before disconnecting.

conference Connects multiple sessions so that people can participate in a conference call. The targetSessions attribute specifies the identification numbers of the sessions, and the termDigits attribute indicates the touch-tone keys that terminate the call.

wait Waits for user input. The value attribute specifies how long to wait. The termDigits attribute indicates the touch-tone keys that terminate the wait element.

play Plays an audio file or a value that is stored as a number, date or amount of money and is indicated by the format attribute. The value attribute contains the information (location of the audio file, number, date or amount of money) that corresponds to the format attribute. The clearDigits attribute specifies whether or not to delete the previously entered input. The termDigits attribute indicates the touch-tone keys that terminate the audio file, etc.

recordAudio Records an audio file and stores it at the URL specified by value. The format attribute indicates the file extension of the audio clip. Other attributes include termDigits, clearDigits, maxTime and maxSilence.

Fig. 29.10 CallXML elements.


29.13 JAWS for Windows

• Job Access with Sound– Screen reader


29.14 Other Accessibility Tools

• Braille keyboard• Ocularis• EagleEyes

– Translates eye movements into mouse movements


29.15 Accessibility in Microsoft Windows 2000 and XP

• Accessibility Wizard



Fig. 29.11 Text Size dialog.



Fig. 29.12 Display Settings dialog.


29.15.1 Tools for People with Visual Impairments

• Large icons• Color scheme• Resize screen elements



Fig. 29.13 Accessibility Wizard initialization options.



Fig. 29.14 Scroll Bar and Window Border Size dialog.



Fig. 29.15 Setting up window element sizes.



Fig. 29.16 Display Color Settings options.



Fig. 29.17 Accessibility Wizard Mouse Cursor adjustment tool.


29.15.2 Tools for People with Hearing Impairments

• SoundSentry– Creates visual signals when system events occur

• ShowSounds– Adds captions to spoken text and other sounds produced by

today’s multimedia-rich software



Fig. 29.18 SoundSentry dialog.



Fig. 29.19 ShowSounds dialog.


29.15.3 Tools for Users Who Have Difficulty Using the Keyboard

• StickyKeys– Allows user to press key combinations in sequence rather

than at the same time

• BounceKeys– Forces computer to ignore repeated keystrokes

• ToggleKeys– Alerts users they pressed lock keys by sounding beep

• MouseKeys– Uses keyboard to emulate mouse movements

• Mouse Speed– Adjust mouse speed



Fig. 29.20 StickyKeys window.



Fig. 29.21 BounceKeys dialog.



Fig. 29.22 ToggleKeys window.



Fig. 29.23 Extra Keyboard Help dialog.



Fig. 29.24 MouseKeys window.



Fig. 29.25 Mouse Button Settings window.



Fig. 29.26 Mouse Speed dialog.



Fig. 29.27 Set Automatic Timeouts dialog.



Fig. 29.28 Saving new accessibility settings.


29.15.4 Microsoft Narrator

• Text-to-speech program for people with visual impairments



Fig. 29.29 Narrator window.



Fig. 29.30 Narrator reading Notepad text.


29.15.5 Microsoft On-Screen Keyboard

• Clicker 4 by Inclusive Technology– Ability to be customized


29.15.5 Microsoft On-Screen Keyboard

Fig. 29.31 Microsoft On-Screen Keyboard.


29.15.6 Accessibility Features in Microsoft Internet Explorer

Fig. 29.32 Microsoft Internet Explorer’s accessibility options.


29.15.6 Accessibility Features in Microsoft Internet Explorer

Fig. 29.33 Advanced accessibility settings in Microsoft Internet Explorer.


29.16.1 Dreamweaver

• Accessibility validation


29.16.1 Dreamweaver

Fig. 29.34 Accessibility Preferences window in Macromedia Dreamweaver.


29.16.1 Dreamweaver

Fig. 29.35 Image Tag Accessibility Attributes dialog in Dreamweaver.


29.16.2 Flash

Fig. 29.36 Accessibility dialog in Flash

2004 prentice hall, inc. all rights reserved. chapter 29 – accessibility outline 29.1 introduction...

Documents