Docstoc

Perl_23_Accessibility

Document Sample
Perl_23_Accessibility Powered By Docstoc
					                                                                          1


                             Chapter 23 - Accessibility


         Outline
         23.1           Introduction
         23.2           Providing Alternatives for Multimedia
         23.3           Maximizing Readability by Focusing on Structure
         23.4           Accessibility in HTML Tables
         23.5           Accessibility in HTML Frames
         23.6           Using Voice Synthesis and Recognition with
                        VoiceXML
         23.7           JAWS® for Windows
         23.8           Other Accessibility Tools
         23.9           Internet and World Wide Web Resources




 2001 Prentice Hall, Inc. All rights reserved.
                                                                                           2
1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">              Outline
 2   <html lang = "en">
 3
 4   <!-- Fig. 23.1 alttag.html                         -->
 5   <!-- Using the alt tag to make an image accessible -->
 6
 7   <head>
 8      <meta http-equiv = "Content-Type"
 9          content = "text/html; charset=iso-8859-1">
10
11      <title>                                   The style element defines a Cascading
12         How to use the "ALT" attribute         Style Sheet.
13      </title>
14
15      <style type = "text/css">
16         body { background: #00ff00; color: black }
17         p { margin-top: 1em }
18         .center { text-align: center }
19      </style>
20      </head>
21
22      <body>
23         <h1>How to use the "ALT" attribute</h1>
24         <p>Below we compare two images, one with the
25             "ALT" attribute present, and one without. The
26             "ALT" appears as a tool tip in the first
27             image, but more importantly, will help users
28             who cannot view information conveyed graphically.
29         </p>
30
 2001 Prentice Hall, Inc. All rights reserved.
                                                                                                               3
31           <p class = "center">                                                                 Outline
32               This image has the "ALT" attribute<br>
33               <img alt = "This is a picture of the Advanced
34                    Java How To Program Text Book" src = "advjhtp1cov.jpg"
35                    width = "182" height = "238">
36           </p>
37
                                                  The value of the alt attribute is displayed if there is an
38           <p class = "center">                 error displaying the image or when the mouse hovers
39               This image does not have         over the image.
                                                  the "ALT" attribute<br>
40               <!-- This markup should be changed                             -->
41               <!-- because there is no alt attribute                         -->
42               <img src = "advjhtp1cov.jpg" width = "182" height="238">
43           </p>
44      </body>
45 </html>




 2001 Prentice Hall, Inc. All rights reserved.
                                                            4
                                                  Outline




 2001 Prentice Hall, Inc. All rights reserved.
                                                                                                           5
 1   #!/usr/bin/perl                                                                             Outline
 2   # Fig. 23.2: altMaker.pl
 3   # Program that inserts ALT attributes into HTML <IMG> tags
 4
                                                        Subclass ImgFinder finds all images in
 5   use warnings;
 6   use strict;                         the document.
 7   use CGI qw( :standard *center :cgi-lib escapeHTML );
 8
 9   package HTML::Parser::ImgFinder;
10   require HTML::Parser;
                                    If               $tag indicates that the start tag is an <img>
11   our @ISA = "HTML::Parser";
12                                                 tag, we extract the src and alt attribute values
13   sub start                                    starthash %$attributes.tag found in the document.
                                                   from is called for each start
14   {
15      my ( undef, $tag, $attributes, undef, undef ) = @_;
16
17      if ( $tag eq 'img' ) {
18         my $alt = $$attributes{ 'alt' };
19         my $name = $$attributes{ 'src' };
20
21           unless ( $main::images{ $name } ) {
22              print( "<img src = \"../$name\"><br/><br/>\n" );
23              print( "<input type = \"text\" size = \"40\"" );
24              print( "name = \"$name\" value = \"$alt\">" );
25              print( "<br/><br/><hr/>\n" );
26           }
27
28           $main::images{ $name } = 1;
29      }
30 }
 2001 Prentice Hall, Inc. All rights reserved.
                                                                                                             6
31                                                                                                 Outline
32   package HTML::Parser::AltMaker;
33   require HTML::Parser;
34   our @ISA = "HTML::Parser";
35                                                Subclass AltMaker adds the given alt attributes
36   sub start                                    to the appropriate <img> tags.
37   {
38      my ( undef, $tag, $attributes, $order, $original ) = @_;
39
40       if ( $tag eq 'img' ) {
41          my $key = $$attributes{ 'src' };
42
43           unless ( exists $$attributes{ 'alt' } ) {               Set the value for the alt attribute.
44              push @$order, 'alt';
45           }
46                                                                     Build a new <img> tag.
47           $$attributes{ 'alt' } = $main::images{ $key } || "";
48
49           $original = "<img";
50           foreach $key ( @$order ) {
51              $original .= " $key = \"$$attributes{ $key }\"";
52           }
53
54           $original .= ">";
55       }                                             The tag is output to the file.
56
57       print main::FILE $original;
58   }
59
 2001 Prentice Hall, Inc. All rights reserved.
                                                                                                                  7
60   sub end                                                                                     Outline
                                                                The end and text subroutines perform a
61   {
                                                                similar function, simply outputting the
62       my $tag = $_[ 1 ];
63       print main::FILE "</$tag>";                            end tags or text as they appear in the
64   }                                                          original HTML document.
65
66   sub text
67   {                                                                            Outputs a simple form which
68      my $text = $_[ 1 ];                                                       queries the user for the file
69      print main::FILE $text;                                                   name     of    the    HTML
70   }
                                                                                  document in which to add
71
72   package main;                                Hash %images is declared.       alt image information if no
73   our %images = ();                                                            parameters are passed to the
74                                                                                script.
75   unless ( param ) {
76      print( header, start_html( "Enter file name" ),
77         h2( "Enter file name:" ), start_form,
78         filefield( -name => "file" ), br, br,
79         submit( -name => "submit", -value => "Submit file" ),
80         end_form, end_html );
81                                                                            When the user clicks the Submit
82   }
83   elsif ( param( "submit" ) eq "Submit file" ) {
                                                                              File button, the script is called
84      my $file = param( "file" );                                           again.
85      my $parser = new HTML::Parser::ImgFinder;
86
87      print( header, start_html( "Images found" ), start_center,
88         h2( "Enter ALT descriptions for the images below." ),
89         i( "File is $file" ), start_form );
90
 2001 Prentice Hall, Inc. All rights reserved.
                                                                                                        8
91     $parser->parse_file( $file );                                                 Outline
92
93     print( br, hidden( -name => "file" ),
94         submit( -name => "submit", -value => "Submit ALT tags" ),
95         submit( -name => "submit", -value => "Do another page" ),
96         end_form, end_html );
97                                                            The new alt data is added to the
                                                                     $parser parses the given
98 }                                                         HTML document when the script is
                                                                     HTML document (using method
99 else {                                                    called for the third time.
100    my $file = param( "file" );
                                                                     parse_file) and prints out
101    my $parser = new HTML::Parser::AltMaker;                      the images and to put all of the
                                                     The Vars function is used form elements.
102                                                  name-value pairs from the posted form into
103    %images = Vars;                               hash %images.
104    foreach ( keys %images ) {
105        $images{ $_ } = escapeHTML( $images{ $_ } );
106    }
107                                                    Iterates through each alt value in
108    ( my $newfile = $file ) =~ s/\./_tmp./;         %images to HTML-escape the alt strings.
109
110    open( FILE, "> $newfile" ) or die( "Could not open: $!" );
111    $parser->parse_file( $file );                                      Creates a temporary file
112    close( FILE );                           The old file is deleted. name, opens it, creates the
113                                                                       new HTML document
114    unlink( $file ) or die ( "Could not delete: $!" );                 (using the selected Do
                                                                         If the user AltMaker
115    rename( $newfile, $file ) or die( "Could not rename: $!" ); another page, we redirect
                                                                          parser), and closes the
116                                                                      to altMaker.pl and the
                                                                          temporary file.
117    if ( param( "submit" ) eq "Do another page" ) {           The temporary file isagain. the old
                                                                         process begins given
118        print( redirect( "altMaker.pl" ) );
                                                                 file’s name.
119    }
 2001 Prentice Hall, Inc. All rights reserved.
                                                                                      9
120     else {                                                            Outline
121          my $base = $ENV{ "DOCUMENT_ROOT" };
122
123          $file =~ s#\\#/#g;
                                                   Display the newly created
124          $file =~ s#^$base##i;
                                                   document by constructing its URL
125          print( redirect( "..$file" ) );
                                                   and redirecting.
126     }
127 }




 2001 Prentice Hall, Inc. All rights reserved.
                                                            10
                                                  Outline




 2001 Prentice Hall, Inc. All rights reserved.
                                                            11
                                                  Outline




 2001 Prentice Hall, Inc. All rights reserved.
                                                            12
                                                  Outline




 2001 Prentice Hall, Inc. All rights reserved.
                                                                     13
 1   <html>                                                Outline
 2   <!-- Fig. 23.3 noheaders.html -->
 3
 4   <head>
 5   <title>EXAMPLE WITHOUT HEADERS</title>
 6
 7   </HEAD>
 8
 9   <body bgcolor = "#7E0810" text = "#ffffff">
10
11   <center><b> Price of Fruit </b></center>
12   <table width = "47%" border = "1" align = "center">
13     <tr>
14       <td>Fruit</td>
15       <td>Price</td>
16     </tr>
17     <tr>
18       <td>Apple</td>
19       <td>$0.25</td>
20     </tr>
21     <tr>
22       <td>Orange</td>
23       <td>$0.50</td>
24     </tr>
25     <tr>
26       <td>Banana</td>
27       <td>$1.00</td>
28     </tr>
29     <tr>
 2001 Prentice Hall, Inc. All rights reserved.
                                                            14
30        <td>Pineapple</td>                      Outline
31        <td>$2.00</td>
32     </tr>
33 </table>
34 </body>
35 </html>




 2001 Prentice Hall, Inc. All rights reserved.
                                                                                                     15
 1   <html>                                                                              Outline
 2   <!-- Fig. 23.4 headers.html -->
 3
 4   <head>
 5   <title>HEADERS EXAMPLE</title>
 6
 7   </head>
 8
 9   <body bgcolor = "#7E0810" text = "#ffffff">
10
11   <!-- This table uses the ID and HEADERS attributes               -->
12 <!-- Using them ensures readability by text-based browsers -->
13 <!-- It also uses a SUMMARY attribute                              -->
14 <!-- SUMMARY explains the table to a screen reader                 -->
15
16 <table summary = "This table uses th elements and id and header
17 attributes to make the table readable by screen readers"
18 width = "47%" border = "1" align = "center">
19 <caption><b>Price of Fruit
20 </b></caption>
21   <tr>
                                                    The summary attribute provides a
22      <th id = "fruit">Fruit</th>                 description of the table to the screen reader.
23      <th id = "price">Price</th>             By modifying the <td> tag with the
24   </tr>                                      headers attribute and modifying header
25   <tr>                                       cells with the id attribute, you can ensure
26      <td headers = "fruit">Apple</td>        that a table is read as intended.
27      <td headers = "price">$0.25</td>
28   </tr>
29   <tr>
 2001 Prentice Hall, Inc. All rights reserved.
                                                            16
30        <td headers = "fruit">Orange</td>       Outline
31        <td headers = "price">$0.50</td>
32     </tr>
33     <tr>
34        <td headers = "fruit">Banana</td>
35        <td headers = "price">$1.00</td>
36     </tr>
37     <tr>
38        <td headers = "fruit">Pineapple</td>
39        <TD headers = "price">$2.00</td>
40     </tr>
41 </table>
42 </body>
43 </html>




 2001 Prentice Hall, Inc. All rights reserved.
                                                                                              17
 1   <?xml version = "1.0"?>                                                      Outline
 2   <vxml version = "1.0">
 3
 4   <!-- Fig. 23.5: main.vxml -->
 5   <!-- Voice page           -->
 6
 7   <link next = "#home">
 8      <grammar>home</grammar>
 9   </link>
10
11   <link next = "#end">
12      <grammar>exit</grammar>
13   </link>
14
15   <var name = "currentOption" expr = "'home'"/>                  A form element presents
16                                                                  information and gathers
17   <form>                                                         data    from   the user
18      <block>                                                     pertaining to a set of
19          <emp>Welcome</emp> to the voice page of Deitel and
                                                                    field variables.
20          Associates. To exit any time say exit.
21          To go to home page any time say home.
22      </block>
                                                     A menu element provides different
23      <subdialog src = "#home"/>                   options to the user and transfers
24   </form>                                         control to other dialogs in the
25                                                   document based on the user’s
26 <menu id = "home">                                selections.
27     <prompt count = "1" timeout = "10s">
28         You have just entered the Deitel home page.
29         Please make a selection by speaking one the
30         following options:
 2001 Prentice Hall, Inc. All rights reserved.
                                                                                                    18
31       <break msecs = "1000 "/>                                                  Outline
32       <enumerate/>                                 The first and second choice elements on
33    </prompt>                                       transfer control to a local dialog (i.e., a
34
35    <prompt count = "2">
                                                      location within the is document)
                                                The <choice> tag, which indicates an when
                                             <choice> attribute nextsame alwaysthe page
36       Please say one of the following.
                                                      they either a
                                             which is ofare selected. the usera makes their
                                                element loaded aftermenu or        form,
37       <break msecs = "1000 "/>               presents by speaking the words in the
                                             selection, options to the user.
38       <enumerate/>                        <choice> tag into a microphone.
39    </prompt>
40
41    <choice next = "#about">About us</choice>
42    <choice next = "#directions">Driving directions</choice>
43    <choice next = "publications.vxml">Publications</choice>
                                                                     The <block> tag presents
44 </menu>
45                                                                   information to the user
                                                The third choice element transfers the user to
46 <form id = "about">                                               without any interaction
47    <block>
                                                the document publications.vxml.
                                                                     between user and computer.
48      About Deitel and Associates, Inc.
49      Deitel and Associates, Inc. is an internationally
50      recognized corporate training and publishing organization,
51      specializing in programming languages, Internet and World
52      Wide Web technology and object technology education.
53      Deitel and Associates, Inc. is a member of the World Wide
54      Web Consortium. The company provides courses on Java, C++,
                                                                         The <assign> tag
55      Visual Basic, C, Internet and World Wide Web programming
                                                                         assigns a value to a
56        and Object Technology.
57        <assign name = "currentOption" expr = "'about'"/>              variable.
58        <goto next = "#repeat"/>                               The <goto> tag transfers control
59     </block>                                                  from one dialog to another.
60 </form>
 2001 Prentice Hall, Inc. All rights reserved.
                                                                                                        19
61                                                                                     Outline
62   <form id = "directions">
63     <block>
64        Directions to Deitel and Associates, Inc.
65        We are located on Route 20 in Sudbury,
66        Massachusetts, equidistant from route
67      <sayas class = "digits">128</sayas> and route
68      <sayas class = "digits">495</sayas>.
69      <assign name = "currentOption" expr = "'directions'"/>
70      <goto next = "#repeat"/>
71     </block>
72   </form>                                            The <prompt>         tag specifies text to be
73                                                         read to the user when a decision must
74   <form id = "repeat">                                  be made.
75      <field name = "confirm" type = "boolean">
76         <prompt>
77            To repeat say yes. To go back to home, say no.
78         </prompt>
79                                                            The <filled> tag contains
80           <filled>                                         elements to be executed when the
81              <if cond = "confirm==true">
                                                              computer receives input for a form
82                 <goto expr = "'#' + currentOption"/>
83              <else/>
                                                              element from the user.
84                <goto next = "#home"/>
85              </if>
86           </filled>                               The <if> and <else> tags are control
87                                                  statements used for making logic decisions.
88      </field>
89   </form>
90
 2001 Prentice Hall, Inc. All rights reserved.
                                                                                                20
91 <form id = "end">                                                                  Outline
92    <block>
93       Thank you for visiting Deitel and Associates voice page.
94       Have a nice day.
95       <exit/>
96    </block>                                    The <exit> tag exits the program.
97 </form>
98 </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 on Route 20 in Sudbury,
Massachusetts, equidistant from route 128
and route 495.
To repeat say yes. To go back to home, say no.



 2001 Prentice Hall, Inc. All rights reserved.
                                                                                             21




                   Voic eXML Ta gDesc rip tion
                   <assign>      Assigns a value to a variable.
                   <block>       Presents information to the user without any interaction
                                 between the user and the computer (i.e., the computer
                                 does not expect any input from the user).
                   <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 of the available options to the user.
                   <exit>        Exits the program.
                   <filled>      Contains elements to be executed when the computer
                                 receives input for a form element from the user.
                   <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>, Control statements used for making logic decisions.
                   <elseif>

                                  Fig. 23.6 Elements in VoiceXML (continued)


 2001 Prentice Hall, Inc. All rights reserved.
                                                                                                         22




                Voic eXML ta g               Desc rip tion
                <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. Control is transferred back to the
                                             calling dialog after the subdialog is executed.
                <var>                        Declares a variable.
                <vxml>                       The top-level tag which specifies that the document
                                             should be processed by a VoiceXML interpreter.

                                      Fig. 23.6 Elements in VoiceXML




 2001 Prentice Hall, Inc. All rights reserved.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:1
posted:2/10/2012
language:
pages:22