Annotation of accessibar/www/usersguide/usersguide.html, revision 1.2

1.1       edank       1: <html xmlns="http://www.w3.org/1999/xhtml">
                      2:   <head>
                      3:     <meta http-equiv="CONTENT-TYPE" content="text/html; charset=windows-1252" />
                      4:     <title>Accessibar - User's Guide</title>
                      5:     <meta name="AUTHOR" content="edan" />
                      6:     <style type="text/css">
                      7:     /*<![CDATA[*/
                      8:         <!--
                      9:  @page { size: 8.5in 11in; margin-left: 1.25in; margin-right: 1.25in; margin-top: 0.75in; margin-bottom: 0.5in }
                     10:  @page:first { margin-top: 0.75in; margin-bottom: 1.13in }
                     11:  P { margin-bottom: 0.08in; direction: ltr; color: #000000; widows: 2; orphans: 2 }
                     12:  P.western { font-family: "Times New Roman", serif; font-size: 12pt; so-language: en-US }
                     13:  P.cjk { font-family: "Times New Roman", serif; font-size: 12pt }
                     14:  P.ctl { font-family: "Times New Roman", serif; font-size: 12pt; so-language: en-US }
                     15:  H1 { margin-bottom: 0.04in; direction: ltr; color: #000000; widows: 2; orphans: 2 }
                     16:  H1.western { font-family: "Arial", sans-serif; font-size: 16pt; so-language: en-US }
                     17:  H1.cjk { font-family: "Times New Roman", serif; font-size: 16pt }
                     18:  H1.ctl { font-family: "Arial", sans-serif; font-size: 16pt; so-language: en-US }
                     19:  H2 { margin-bottom: 0.04in; direction: ltr; color: #000000; widows: 2; orphans: 2 }
                     20:  H2.western { font-family: "Arial", sans-serif; font-size: 14pt; so-language: en-US; font-style: italic }
                     21:  H2.cjk { font-family: "Times New Roman", serif; font-size: 14pt; font-style: italic }
                     22:  H2.ctl { font-family: "Arial", sans-serif; font-size: 14pt; so-language: en-US; font-style: italic }
                     23:  H3 { margin-bottom: 0.04in; direction: ltr; color: #000000; widows: 2; orphans: 2 }
                     24:  H3.western { font-family: "Arial", sans-serif; font-size: 13pt; so-language: en-US }
                     25:  H3.cjk { font-family: "Times New Roman", serif; font-size: 13pt }
                     26:  H3.ctl { font-family: "Arial", sans-serif; font-size: 13pt; so-language: en-US }
                     27:  P.sdfootnote-western { margin-bottom: 0in; font-family: "Times New Roman", serif; font-size: 10pt; so-language: en-US }
                     28:  P.sdfootnote-cjk { margin-bottom: 0in; font-family: "Times New Roman", serif; font-size: 10pt }
                     29:  P.sdfootnote-ctl { margin-bottom: 0in; font-family: "Times New Roman", serif; font-size: 10pt; so-language: en-US }
                     30:  A:link { color: #0000ff }
                     31:  A:visited { color: #800080 }
                     32:  A.sdfootnoteanc { font-size: 57% }
                     33:  :link { color: #0000ff }
                     34:  :visited { color: #800080 }
                     35:  body.c41 {color: rgb(0, 0, 0);}
                     36:  p.c40 {color: #0000ff}
                     37:  img.c39 {border: 0px solid ; width: 547px; height: 188px;}
                     38:  p.c38 {text-indent: 0.4in; margin-bottom: 0in;}
                     39:  img.c37 {border: 0px solid ; width: 580px; height: 293px;}
                     40:  img.c36 {border: 0px solid ; width: 578px; height: 293px;}
                     41:  img.c35 {border: 0px solid ; width: 521px; height: 356px;}
                     42:  img.c34 {border: 0px solid ; width: 521px; height: 355px;}
                     43:  img.c33 {border: 0px solid ; width: 252px; height: 122px;}
                     44:  p.c32 {margin-left: 0.4in; margin-bottom: 0in;}
                     45:  p.c31 {margin-top: 0.08in;}
                     46:  span.c30 {font-size: 80%}
                     47:  img.c29 {border: 0px solid ; width: 392px; height: 203px;}
                     48:  span.c28 {}
                     49:  img.c27 {border: 0px solid ; width: 481px; height: 361px;}
                     50:  img.c26 {border: 0px solid ; width: 483px; height: 362px;}
                     51:  p.c25 {margin-bottom: 0in; page-break-before: always;}
                     52:  img.c24 {border: 0px solid ; width: 483px; height: 364px;}
                     53:  h3.c23 {page-break-before: always;}
                     54:  a.c22 {color: #0000ff}
                     55:  b.c21 {color: #ff0000}
                     56:  p.c20 {font-size: 80%; font-weight: bold; margin-top: 0.08in}
                     57:  p.c19 {margin-bottom: 0in; page-break-after: avoid;}
                     58:  img.c18 {border: 0px solid ; width: 673px; height: 282px;}
                     59:  p.c17 {text-indent: 0.5in; margin-bottom: 0in;}
                     60:  p.c16 {font-size: 80%; font-weight: bold; margin-top: 0.08in; text-align: left}
                     61:  p.c15 {margin-bottom: 0in; page-break-after: avoid; text-align: left;}
                     62:  img.c14 {border: 0px solid ; width: 286px; height: 292px;}
                     63:  span.c13 {color: #0000ff}
                     64:  span.c12 {font-family: Courier New, monospace; font-size: 80%}
                     65:  p.c11 {margin-left: 0.33in; margin-bottom: 0in;}
                     66:  a.c10 {font-size: 80%}
                     67:  p.c9 {font-size: 11pt; font-weight: bold; margin-bottom: 0in; margin-left: 0.17in; margin-top: 0.08in}
                     68:  p.c8 {color: #993366; font-style: italic; font-weight: bold; margin-bottom: 0in; margin-top: 0.08in}
                     69:  p.c7 {margin-bottom: 0in;}
                     70:  h3.c6 {color: #993366; font-size: 16pt; margin-bottom: 0in}
                     71:  span.c5 {color: #993366; font-size: 200%}
                     72:  span.c4 {color: #993366; font-size: 17pt}
                     73:  span.c3 {font-family: "Times New Roman",serif;}
                     74:  span.c2 {color: #993366; font-size: 23pt}
                     75:  span.c1 {color: #993366; font-size: larger}
                     76:         -->
                     77:         /*]]>*/
                     78:     </style>
                     79: 
                     80:   </head>
                     81:   <body dir="ltr" class="c41" lang="en-US">
                     82:     <div
                     83:  style="border: 1px solid rgb(255, 204, 102); background-color: rgb(255, 255, 255); padding-top: 5px; padding-bottom: 5px; padding-left: 15px; line-height: 1.3;">
                     84: Accessibar is dually licensed under the
                     85: <a href="http://www.mozilla.org/MPL/">Mozilla Public License</a> and
                     86: the
                     87: <a href="http://www.gnu.org/licenses/licenses.html">GNU General Public
                     88: License</a>.
                     89: Accessibar uses <a href="http://freetts.sourceforge.net">FreeTTS</a>
                     90: for its voice engine and the Java Speech API which carry the following <a
                     91:  href="http://freetts.sourceforge.net/license.terms">license terms</a>
                     92: and <a href="http://freetts.sourceforge.net/acknowledgments.txt">acknowledgments</a>.
                     93: </div>
                     94:     <br />
                     95:     <span class="c2"><i><b>Accessibar</i> - Accessibility
                     96:     Browser Extension Toolbar</b></span><span class="c4"><i>
                     97:     <br />
                     98:     With Integrated Text To Speech System</i></span><br />
                     99:     <br />
                    100:     <span class="c2">USER'S GUIDE</span> 
                    101:     <hr />
                    102:     <h3 class="western c6"><u>Table of contents:<br />
                    103:     </u></h3>
                    104:     <p class="western c7">&nbsp;<br />
                    105:     </p>
                    106:     <div id="Table of Contents1" dir="ltr">
                    107:       <p class="c8" lang=""><a href="#1_Installation_Instructions">1
                    108:       Installation Instructions<br />
                    109:       </a></p>
                    110:       <p class="c9"><a
                    111:       href="#1_1_Step_1_Installing_the_Accessibar_Toolbar">1.1 Step 1 -
                    112:       Installing the Accessibar Toolbar:<br />
                    113:       </a></p>
                    114:       <p class="c11"><a href="#1.1.1.%20The%20Toolbar%20Installation%20File%7Coutline"
                    115:       class="c10">1.1.1 The Toolbar Installation File<br />
                    116:       </a></p>
                    117:       <p class="c9"><a
                    118:       href="#1_2_Step_2_Accessibars_Java_Text_To_Speech_Installation">1.2
                    119:       Step 2 - Accessibar's Java Text To Speech Installation<br />
                    120:       </a></p>
                    121:       <p class="c11"><a
                    122:       href="#1_2_1_Installing_Javas_Latest_J2SE_Runtime_Environment_JRE"
                    123:        class="c10">1.2.1 Installing Java's Latest J2SE Runtime Environment (JRE)<br />
                    124:       </a></p>
                    125:       <p class="c11"><a
                    126:       href="#1.2.2.Installing%20Text%20To%20Speech%20Related%20Classes%7Coutline"
                    127:       class="c10">1.2.2 Installing Text To Speech Related Classes<br />
                    128:       </a></p>
                    129:       <p class="c8" lang=""><a href="#2.Supported%20Functions%7Coutline">2 Supported
                    130:       Functions<br />
                    131:       </a></p>
                    132:       <p class="c8" lang=""><a href="#3.Menu%20Accessibility%7Coutline">3 Menu
                    133:       Accessibility<br />
                    134:       </a></p>
                    135:       <p class="c8" lang=""><a href="#4.Running%20and%20Usage%7Coutline">4 Running and
                    136:       Usage<br />
                    137:       </a></p>
                    138:       <p class="c9"><a href="#4.1.Toolbars+Main+Menu">4.1 Toolbar's Main
                    139:       Menu<br />
                    140:       </a></p>
                    141:       <p class="c9"><a href="#4.2.Options%20Configuration%7Coutline">4.2 Options
                    142:       Configuration<br />
                    143:       </a></p>
                    144:       <p class="c11"><a
                    145:       href="#4.2.1.Hotkey%20%28Keyboard%20Shortcut%29%20Settings%7Coutline"
                    146:       class="c10">4.2.1 Hotkey (Keyboard Shortcut) Settings<br />
                    147:       </a></p>
                    148:       <p class="c11"><a href="#4.2.2.Reader%20Settings%7Coutline" class="c10">4.2.2
                    149:       Reader Settings<br />
                    150:       </a></p>
                    151:       <p class="c9"><a
                    152:       href="#4.3.Changing%20Background%20and%20Foreground%20Colors%7Coutline">4.3
                    153:       Changing Background and Foreground Colors<br />
                    154:       </a></p>
                    155:       <p class="c9"><a
                    156:       href="#4.4.Increasing%20and%20Decreasing%20Font%20Size%7Coutline">4.4 Increasing
                    157:       and Decreasing Font Size<br />
                    158:       </a></p>
                    159:       <p class="c9"><a
                    160:       href="#4.5.Increasing%20and%20Decreasing%20Line%20Spacing%7Coutline">4.5 Increasing
                    161:       and Decreasing Line Spacing<br />
                    162:       </a></p>
                    163:       <p class="c9"><a href="#4.6.Hiding%20and%20Showing%20Graphics%7Coutline">4.6 Hiding
                    164:       and Showing Graphics<br />
                    165:       </a></p>
                    166:       <p class="c9"><a href="#4.7.Restore%20Page%7Coutline">4.7 Restore Page<br />
                    167:       </a></p>
                    168:       <p class="c9"><a
                    169:       href="#4.8.Using+Accessibar%92s+Text+To+Speech+Reader%7Coutline">4.8 Using
                    170:       Accessibar's Text To Speech Reader<br />
                    171:       </a></p>
                    172:     </div>
                    173:     <p class="western c7"><br />
                    174:     </p>
                    175:     <hr />
                    176:     <span class="c5">USER'S GUIDE</span> 
                    177:     <p class="western c7"><br />
                    178:     </p>
                    179:     <h1 class="western"><a id="1_Installation_Instructions"
                    180:     name="1_Installation_Instructions"></a> 1 &nbsp; Installation
                    181:     Instructions</h1>
                    182:     <h2 class="western"><a id="1_1_Step_1_Installing_the_Accessibar_Toolbar"
                    183:     name="1_1_Step_1_Installing_the_Accessibar_Toolbar"></a> 1.1 Step 1 -
                    184:     Installing the Accessibar Toolbar:</h2>
                    185:     <h3 class="western"><a id="1.1.1. The Toolbar Installation File|outline"
                    186:     name="1.1.1. The Toolbar Installation File|outline"></a> 1.1.1&nbsp; The
                    187:     <i>Toolbar</i> Installation File</h3>
                    188:     <p class="western c7">Currently two installation files will be required for a
                    189:     "complete" installation of all Accessibar features. One installs the toolbar into the
                    190:     browser (<span class="c12">accessibar.xpi</span>) and the second installs
                    191:     Accessibar's text-to-speech related Java classes (<span
                    192:     class="c12">InstallAccessibarReader_0_0_9.jar</span>). If you are just interested in
                    193:     Accessibar's visual web page manipulation features alone, installing Accessibar's
                    194:     text-to-speech reader as described in Step 2 can be skipped altogether.</p>
                    195:     <p class="western c7">The XPI installation file (<span
                    196:     class="c12">accessibar.xpi</span>) contains all the toolbar related directories and
                    197:     files needed. First we will install the toolbar into the browser:</p>
                    198:     <ul>
                    199:       <li>
                    200:         <p class="western c7">Press <span class="c13"><u><a
                    201:         href="http://downloads.mozdev.org/accessibar/accessibar_0_1_0_firefox.xpi">here</a></u></span>
                    202:         for the latest Firefox version of the Accessibar toolbar. Once the browser
                    203:         detects this as an extension installation file, the following dialog will
                    204:         appear:</p>
                    205:       </li>
                    206:     </ul>
                    207:     <p class="western c15"><img class="c14"
                    208:     alt="Image of Installation Confirmation Dialog" src="images/Fig1.png"
                    209:     name="graphics1" /></p>
                    210:     <p class="c16">Figure 1: Installation Confirmation Dialog</p>
                    211:     <p class="western c7">Confirm installation by selecting <b>Install</b>, and the
                    212:     toolbar will install itself into the browser's extensions directory. Next,
                    213:     <i>restart</i> the browser and the toolbar should appear within the browser as
                    214:     follows:</p>
                    215:     <p class="western c17"><br />
                    216:     </p>
                    217:     <p class="western c7">&nbsp; <img class="c18"
                    218:     alt="Image of Installed Toolbar in the Browser's User Interface" src="images/Fig2.png"
                    219:     name="graphics2" /></p>
                    220:     <p class="western c19"><br />
                    221:     </p>
                    222:     <p class="c20">Figure 2: Installed Toolbar in the Browser's User Interface</p>
                    223:     <p class="western c7">At this point all the <i>non</i>-text-to-speech features of the
                    224:     toolbar should be fully functional. In our next (and final) installation step we will
                    225:     set up Accessibar's Java reader related classes.</p>
                    226:     <p class="western c7"><br />
                    227:     </p>
                    228:     <h2 class="western"><a
                    229:     id="1_2_Step_2_Accessibars_Java_Text_To_Speech_Installation"
                    230:     name="1_2_Step_2_Accessibars_Java_Text_To_Speech_Installation"></a>
                    231:     1.2&nbsp; Step 2 - Accessibar's Java Text To Speech Installation</h2>
                    232:     <h3 class="western"><a
                    233:     id="1_2_1_Installing_Javas_Latest_J2SE_Runtime_Environment_JRE"
                    234:     name="1_2_1_Installing_Javas_Latest_J2SE_Runtime_Environment_JRE"></a>
                    235:     1.2.1&nbsp; Installing Java's Latest J2SE Runtime Environment (JRE)</h3>
                    236:     <p class="western c7"><br />
                    237:     </p>
                    238:     <p class="western c7">Accessibar's Java Text To Speech implementation makes use of
                    239:     Generics<sup><a id="sdfootnote1anc" class="sdfootnoteanc" name="sdfootnote1anc"
                    240:     href="#sdfootnote1sym"><sup><span style="font-size: 12px">1</span></sup></a></sup> (<i>parameterized types</i>) introduced
                    241:     in version 5.0 of the Java Standard Edition (J2SE 5.0), and therefore the <b
                    242:     class="c21">Java Runtime Environment 5.0 is required</b> for Accessibar's Java Reader
                    243:     functionality to run properly. The latest JRE can be downloaded from Sun at the
                    244:     following URL:<a href="http://www.java.com/en/download/manual.jsp"
                    245:     class="c22"><u>http://www.java.com/en/download/manual.jsp</u></a>.</p>
                    246:     <h3 class="western c23"><a
                    247:     id="1.2.2.Installing Text To Speech Related Classes|outline"
                    248:     name="1.2.2.Installing Text To Speech Related Classes|outline"></a> 1.2.2&nbsp;
                    249:     Installing Text To Speech Related Classes</h3>
                    250:     <p class="western c7">I have made available a JAR based installer which automatically
                    251:     detects the local JRE directory and copies all files where they are needed. The
                    252:     installer was created using IzPack<big><sup><a id="sdfootnote2anc"
                    253:     class="sdfootnoteanc" name="sdfootnote2anc"
                    254:     href="#sdfootnote2sym"><sup><span style="font-size: 12px">2</span></sup></a></sup></big>. The latest Accessibar Reader
                    255:     installer can be downloaded <span class="c13"><u><a
                    256:     href="http://downloads.mozdev.org/accessibar/InstallAccessibarReader_0_0_9.jar">here</a></u></span>.</p>
                    257:     <p class="western c7">Once the <i>Java Runtime Environment 5.0</i> is properly in
                    258:     place, the installer can be launched by double clicking on <span
                    259:     class="c12">InstallAccessibarReader_0_0_9.jar</span>. This will bring up the
                    260:     following dialog window:</p>
                    261:     <p class="western c19"><img class="c24"
                    262:     alt="Image of Accessibar's Java Text-to-speech Installer Dialog" src="images/Fig3.png"
                    263:     name="graphics3" /></p>
                    264:     <p class="c20">Figure 3: Accessibar's Java Text-to-speech Installer Dialog</p>
                    265:     <p class="western c7"><br />
                    266:     </p>
                    267:     <p class="western c25">Select "Next" and the following dialog will appear showing the
                    268:     progress of the automated installation process:</p>
                    269:     <p class="western c19"><img class="c26" alt="Image of Install Progress"
                    270:     src="images/Fig4.png" name="graphics4" /></p>
                    271:     <p class="c20">Figure 4: Install Progress</p>
                    272:     <p class="western c7">Select "Next" once again and a final confirmation dialog will
                    273:     appear:</p>
                    274:     <p class="western c19"><img class="c27" alt="Image of Install Competed Dialog"
                    275:     src="images/Fig5.png" name="graphics5" /></p>
                    276:     <p class="c20">Figure 5: Install Competed Dialog</p>
                    277:     <p class="western c7">Select "Done" and Accessibar should now be fully installed!</p>
                    278:     <h1 class="western" lang="de-DE"><a id="2.Supported Functions|outline"
                    279:     name="2.Supported Functions|outline"></a> 2&nbsp; Supported Functions</h1>
                    280:     <p class="western c7"><span lang="en-US">Accessibar currently provides the following
                    281:     functionality (the</span> <span class="c13"><u><a href="#_Running_and_Usage"><span
                    282:     lang="en-US">Running and Usage Section</span></a></u></span> <span lang="en-US">will
                    283:     demonstrate how to evoke these features from the toolbar):</span></p>
                    284:     <ul>
                    285:       <li>
                    286:         <p class="western c7"><span lang="de-DE">Web page fonts and background colors can
                    287:         be changed with a selecton of 70 colors from a swatch color</span> palette<span
                    288:         lang="de-DE">.</span></p>
                    289:       </li>
                    290:       <li>
                    291:         <p class="western c7" lang="de-DE">Font size displayed in web pages can be
                    292:         increased and decreased.</p>
                    293:       </li>
                    294:       <li>
                    295:         <p class="western c7" lang="de-DE">Line spacing can be increased or decreased to
                    296:         five different spacing settings incrementally.</p>
                    297:       </li>
                    298:       <li>
                    299:         <p class="western c7" lang="de-DE">All images displayed on a web page can be
                    300:         selected as being hiden or shown.</p>
                    301:       </li>
                    302:       <li>
                    303:         <p class="western c7" lang="de-DE">All changes made to the display of the web
                    304:         page can be restored to the original page settings by pressing "Restore
                    305:         Page".</p>
                    306:       </li>
                    307:       <li>
                    308:         <p class="western c7" lang="de-DE">Changes made to the currently displayed web
                    309:         page will persist to all additional web pages until "Restore Page" is
                    310:         selected.</p>
                    311:       </li>
                    312:       <li>
                    313:         <p class="western c7" lang="de-DE">Web page contents (in addition to the
                    314:         browser's user interface) can be read out loud. Turning the reader on will read
                    315:         out loud the text that the mouse pointer hovers over. Links will be read out as
                    316:         such.</p>
                    317:       </li>
                    318:       <li>
                    319:         <p class="western c7" lang="de-DE">When the reader is on, focus events will be
                    320:         read out loud, allowing accessible strings to be read out when tabbing through
                    321:         elements using the keyboard.</p>
                    322:       </li>
                    323:       <li>
                    324:         <p class="western c7">F<strong><span class="c28">ull keyboard access</span> <span
                    325:         class="c28">is ensured.</span></strong> All of the toolbars functions have
                    326:         <i>accesskeys</i> and/or<i>hotkeys</i>. (Accesskeys and hotkeys are both
                    327:         explained in the following <span class="c13"><u><a
                    328:         href="#_Menu_Accessibility">Menu Accessibility</a></u></span> section.)</p>
                    329:       </li>
                    330:     </ul>
                    331:     <ul>
                    332:       <li>
                    333:         <p class="western c7">An <span class="c13"><u><a
                    334:         href="#_Options_Configuration">Options dialog</a></u></span> is implemented which
                    335:         allows configurations to be carried out on hotkey (keyboard shortcut) settings as
                    336:         well as reader settings.</p>
                    337:       </li>
                    338:       <li>
                    339:         <p class="western c7"><span class="c13"><u><a href="#_Reader_Settings">Reader
                    340:         settings</a></u></span> can be configured allowing the selection of the voice,
                    341:         volume, speaking rate, pitch, and voice range as well as selecting to have reader
                    342:         loaded and turned on when starting up the browser.</p>
                    343:       </li>
                    344:     </ul>
                    345:     <p class="western c7"><br />
                    346:     </p>
                    347:     <h1 class="western"><a id="_Menu_Accessibility" name="_Menu_Accessibility"></a><a
                    348:     id="3.Menu Accessibility|outline" name="3.Menu Accessibility|outline"></a> 3&nbsp;
                    349:     Menu Accessibility</h1>
                    350:     <p class="western c7">Accessibar ensures its functionality can be fully accessed
                    351:     using the keyboard. This is done by implementing <i>accesskeys</i> as well as
                    352:     configurable <i>hotkeys</i> for Accessibar's various functions.</p>
                    353:     <p class="western c7">An <i>accesskey</i> is an underlined letter in the menu or
                    354:     dialog that indicates to the user a quick, keyboard method of simulating a click on
                    355:     that element. On Windows and UNIX operating systems, pressing the underlined letter
                    356:     together with the <i>ALT</i> key will simulate a click. So if I wished to "click" on
                    357:     (open) Accessibar's <i>Accessibility Toolbar</i> menu button using the keyboard
                    358:     (where the A is underlined) I would press <i>ALT+A</i> which would then open the drop
                    359:     down menu.</p>
                    360:     <p class="western c7">A <i>hotkey</i> is defined at Mozilla's accessibility
                    361:     site<sup><a id="sdfootnote3anc" class="sdfootnoteanc" name="sdfootnote3anc"
                    362:     href="#sdfootnote3sym"><sup><span style="font-size: 12px">3</span></sup></a></sup> as "a key with a binding<sup><a
                    363:     id="sdfootnote4anc" class="sdfootnoteanc" name="sdfootnote4anc"
                    364:     href="#sdfootnote4sym"><sup><span style="font-size: 12px">4</span></sup></a></sup> that crosses widget boundaries, and can
                    365:     act globally in the current window". Basically these are key combinations that allow
                    366:     users to access frequently-performed actions quickly by using the keyboard to
                    367:     <i>bypass</i> the menu when carrying out commands. Since the hotkey bypasses the menu
                    368:     and is not dependant on an underlined letter in the command wished to carry out, I
                    369:     have created an <span class="c13"><u><a href="#_Options_Configuration">Options
                    370:     dialog</a></u></span> which allows hotkeys to be changed to suit the user's needs. In
                    371:     order to help avoid hotkeys conflicting with other hotkeys that may already be in
                    372:     place for the browser, all of Accessibar's configurable hotkeys are keys pressed in
                    373:     combination with Ctrl+Shift. Configuring hotkeys is described in the following
                    374:     <i>Running and Usage</i> section.<br />
                    375:     <br />
                    376:     </p>
                    377:     <p class="c31">&nbsp; <img class="c29"
                    378:     alt="Image of Examples of Accesskeys and Hotkeys." src="images/Fig6.png"
                    379:     name="graphics6" /><br />
                    380:     <span class="c30"><b>Figure 6: Examples of Accesskeys and Hotkeys.</b></span></p>
                    381:     <h1 class="western"><a id="_Running_and_Usage" name="_Running_and_Usage"></a><a
                    382:     id="4.Running and Usage|outline" name="4.Running and Usage|outline"></a> 4&nbsp;
                    383:     Running and Usage</h1>
                    384:     <p class="western c7">Once the toolbar has been successfully installed it will appear
                    385:     in the browser's toolbox as displayed above in Figure 2. In this section I will
                    386:     demonstrate all of the toolbar's features described in the previous section.</p>
                    387:     <h2 class="western"><a id="4.1.Toolbars+Main+Menu"
                    388:     name="4.1.Toolbars+Main+Menu"></a> 4.1&nbsp; Toolbar's Main Menu</h2>
                    389:     <p class="western c7">Accessibar's main menu can be found by pressing the
                    390:     <i>Accessibility Toolbar</i> menu button as shown in the following figure:</p>
                    391:     <p class="western c32"><br />
                    392:     </p>
                    393:     <p class="western c19"><img class="c33" alt="Image of Toolbar Main Menu"
                    394:     src="images/Fig7.png" name="graphics7" /></p>
                    395:     <p class="c20">Figure 7: Toolbar Main Menu</p>
                    396:     <p class="western c7"><br />
                    397:     </p>
                    398:     <p class="western c7">Through this main menu, users can access Accessibar's online
                    399:     home page hosted on Mozilla's development site, Options, and About dialog.</p>
                    400:     <p class="western c7">&nbsp;<br />
                    401:     </p>
                    402:     <h2 class="western"><a id="_Options_Configuration"
                    403:     name="_Options_Configuration"></a><a id="4.2.Options Configuration|outline"
                    404:     name="4.2.Options Configuration|outline"></a> 4.2&nbsp; Options Configuration</h2>
                    405:     <p class="western c7">Selecting <i>Options</i> from Accessibar's main menu will open
                    406:     the following Option's Dialog:</p>
                    407:     <p class="western c7"><br />
                    408:     </p>
                    409:     <p class="western c19"><img class="c34" alt="Image of Options Dialog Window"
                    410:     src="images/Fig8.png" name="graphics8" /></p>
                    411:     <p class="c20">Figure 8: Options Dialog Window</p>
                    412:     <p class="western c7"><br />
                    413:     </p>
                    414:     <p class="western c7">To the left of the dialog window a list of the available option
                    415:     categories appear. Currently users can configure hotkey (keyboard shortcut) settings
                    416:     as well as reader settings. The hotkey (keyboard shortcut) settings options page will
                    417:     be displayed on the right part of the options dialog window when the window is first
                    418:     loaded. The reader settings page can be navigated to by selecting <i>Reader</i> on
                    419:     the Category list.</p>
                    420:     <p class="western c7"><br />
                    421:     </p>
                    422:     <h3 class="western"><a id="4.2.1.Hotkey (Keyboard Shortcut) Settings|outline"
                    423:     name="4.2.1.Hotkey (Keyboard Shortcut) Settings|outline"></a> 4.2.1&nbsp; Hotkey
                    424:     (Keyboard Shortcut) Settings</h3>
                    425:     <p class="western c7">All of Accessibar's main functionality features can be
                    426:     configured to being evoked using hotkeys of the user's choice. The hotkey preferences
                    427:     are stored in the user's home directory and therefore will be individual to all users
                    428:     that use the application on the same computer. All changes made to hotkey settings
                    429:     will take effect only after the browser is restarted.</p>
                    430:     <h3 class="western"><a id="_Reader_Settings" name="_Reader_Settings"></a><a
                    431:     id="4.2.2.Reader Settings|outline" name="4.2.2.Reader Settings|outline"></a>
                    432:     4.2.2&nbsp; Reader Settings</h3>
                    433:     <p class="western c7">The Reader Settings Options page will display in the Options
                    434:     dialog window when selected on the category list to the left displaying the following
                    435:     page:</p>
                    436:     <p class="western c17"><br />
                    437:     </p>
                    438:     <p class="western c7"><img class="c35"
                    439:     alt="Image of Reader Settings Page Displayed in Options Dialog Window" src="images/Fig9.png"
                    440:     name="graphics9" /></p>
                    441:     <p class="c20">Figure 9: Reader Settings Page Displayed in Options Dialog Window</p>
                    442:     <p class="western c7"><br />
                    443:     </p>
                    444:     <p class="western c7">From this page, user's can select the voice of their choice.
                    445:     Currently Accessibar provides two voices to choose from (Kevin16 and Kevin). Kevin16
                    446:     is a medium quality, 16 kHz voice and Kevin is a lesser quality 8 kHz voice. In
                    447:     addition to voice selection users can also control the voice's volume, speaking rate
                    448:     (speed), pitch and range. A <i>Restore Defaults</i> button is also provided which
                    449:     when selected will restore voice settings to their default values. If wished the user
                    450:     can also choose to have the Text To Speech reader turned on when the browser starts
                    451:     up by checking the <i>"Turn Reader ON when starting browser"</i> option.</p>
                    452:     <h2 class="western"><a id="4.3.Changing Background and Foreground Colors|outline"
                    453:     name="4.3.Changing Background and Foreground Colors|outline"></a> 4.3&nbsp; Changing
                    454:     Background and Foreground Colors</h2>
                    455:     <p class="western c7">Background and foreground (text) colors can be changed by
                    456:     selecting <i>BG Color</i> or <i>Text Color</i> from the Accessibar menu respectively
                    457:     and selecting the preferred color from the color picker element. The selected colors
                    458:     will persist to all subsequent web pages navigated to.</p>
                    459:     <p class="western c7"><br />
                    460:     </p>
                    461:     <p class="western c7"><img class="c36"
                    462:     alt="Image of Changing the Background Color (Text Color Changed Similarly)"
                    463:     src="images/Fig10.png" name="graphics10" /></p>
                    464:     <p class="c20">Figure 10: Changing the Background Color (Text Color Changed
                    465:     Similarly)</p>
                    466:     <p class="western c7"><br />
                    467:     </p>
                    468:     <h2 class="western"><a id="4.4.Increasing and Decreasing Font Size|outline"
                    469:     name="4.4.Increasing and Decreasing Font Size|outline"></a> 4.4&nbsp; Increasing and
                    470:     Decreasing Font Size</h2>
                    471:     <p class="western c7">Font size can be increased and decreased by selecting the "<img
                    472:     src="images/F_inc.png" alt="increase font size button" name="graphics11" align="baseline" border="0"
                    473:     height="26" width="28" />" and "<img src="images/F_dec.png" alt="decrease font size button"
                    474:     name="graphics12" align="baseline" border="0" height="25" width="30" />" buttons on
                    475:     the toolbar (or through the keyboard shortcut hotkey configured in the options
                    476:     dialog).</p>
                    477:     <p class="western c7"><br />
                    478:     </p>
                    479:     <p class="western c7"><img class="c37" alt="Image of Increasing Font Size"
                    480:     src="images/Fig11.png" name="graphics13" /></p>
                    481:     <p class="c20">Figure 11: Increasing Font Size</p>
                    482:     <p class="western c19"><br />
                    483:     </p>
                    484:     <h2 class="western"><a id="4.5.Increasing and Decreasing Line Spacing|outline"
                    485:     name="4.5.Increasing and Decreasing Line Spacing|outline"></a> 4.5&nbsp; Increasing
                    486:     and Decreasing Line Spacing</h2>
                    487:     <p class="western c7">Line spacing can be increased or decreased by selecting the
                    488:     "<img src="images/L_inc.png" alt="increase line spacing button" name="graphics14" align="baseline"
                    489:     border="0" height="24" width="32" />" and "<img src="images/L_dec.png" alt="decrease line spacing button"
                    490:     name="graphics15" align="baseline" border="0" height="25" width="29" />" icons
                    491:     adjacent to the increase/decrease font size icons (or through the configured shortcut
                    492:     hotkeys).</p>
                    493:     <h2 class="western"><a id="4.6.Hiding and Showing Graphics|outline"
                    494:     name="4.6.Hiding and Showing Graphics|outline"></a> 4.6&nbsp; Hiding and Showing
                    495:     Graphics</h2>
                    496:     <p class="western c7">All images displayed on the web page can be selected to be
                    497:     hidden by selecting <i>Hide Graphics</i> from the toolbar (or through the shortcut
                    498:     hotkeys). This will cause the <i>Show Graphics</i> button to be enabled allowing
                    499:     graphics to be displayed once again on the web page.</p>
                    500:     <h2 class="western"><a id="4.7.Restore Page|outline"
                    501:     name="4.7.Restore Page|outline"></a>4.7&nbsp; Restore Page</h2>
                    502:     <p class="western c7">Since the visual changes that are carried out on the displayed
                    503:     web page will persist (by being reapplied to subsequent pages), users can choose to
                    504:     restore the pages original settings by selecting the <i>Restore Page</i> button from
                    505:     the toolbar.</p>
                    506:     <h2 class="western"><a id="4.8.Using Accessibar's Text To Speech Reader|outline"
                    507:     name="4.8.Using Accessibar's Text To Speech Reader|outline"></a> 4.8&nbsp; Using
                    508:     Accessibar's Text To Speech Reader</h2>
                    509:     <p class="western c7">Selecting <i>Read Aloud</i> from the toolbar will open up a
                    510:     drop down menu with radio buttons which allow the reader's state to be set to "Reader
                    511:     On" or "Reader Off" as can be seen in the following figure:</p>
                    512:     <p class="western c38"><br />
                    513:     </p>
                    514:     <p class="western c7"><img class="c39"
                    515:     alt="Image of Accessibar's Text To Speech Reader" src="images/Fig12.png"
                    516:     name="graphics16" /></p>
                    517:     <p class="western c19"><br />
                    518:     </p>
                    519:     <p class="c20">Figure 12: Accessibar's Text To Speech Reader</p>
                    520:     <p class="western c7"><br />
                    521:     </p>
                    522:     <p class="western c7"><a id="_PictureBullets" name="_PictureBullets"></a><a
                    523:     id="jws-10" name="jws-10"></a> After selecting <i>Reader On</i>, Accessibar will load
                    524:     the Java Virtual Machine which is needed to carry out this functionality. Once the
                    525:     JVM is fully loaded and the Reader service is up and running, the Reader will read
                    526:     out text on the web page as well as the browser's user interface elements when the
                    527:     mouse pointer hovers over an element. Focus events will also be read out loud so that
                    528:     users navigating through focusable elements (such as links) will also be able to hear
                    529:     these elements read out loud while tabbing though them using the keyboard.<br />
                    530:     </p>
                    531:     <p class="western c7"><br />
                    532:     </p>
                    533:     <hr />
                    534:     <div id="sdfootnote1">
                    535:       <p class="sdfootnote-western"><a id="sdfootnote1sym" class="sdfootnotesym"
                    536:       name="sdfootnote1sym" href="#sdfootnote1anc">1</a> Described at Sun's site at the
                    537:       following links: <span class="c13"><u><a
                    538:       href="http://java.sun.com/developer/technicalArticles/releases/generics/">http://java.sun.com/developer/technicalArticles/releases/generics/</a></u></span>
                    539:       and most recently:</p>
                    540:       <p class="sdfootnote-western c40"><u><a
                    541:       href="http://java.sun.com/developer/technicalArticles/J2SE/generics/">http://java.sun.com/developer/technicalArticles/J2SE/generics/</a></u></p>
                    542:     </div>
                    543:     <div id="sdfootnote2">
                    544:       <p class="sdfootnote-western"><a id="sdfootnote2sym" class="sdfootnotesym"
                    545:       name="sdfootnote2sym" href="#sdfootnote2anc">2</a> IzPack is an open-source
                    546:       installer generator for the Java platform. Homepage: <span class="c13"><u><a
                    547:       href="http://www.izpack.com/izpack">http://www.izforge.com/izpack</a></u></span></p>
                    548:     </div>
                    549:     <div id="sdfootnote3">
                    550:       <p class="sdfootnote-western"><a id="sdfootnote3sym" class="sdfootnotesym"
                    551:       name="sdfootnote3sym" href="#sdfootnote3anc">3</a> The Hotkey term is defined at
                    552:       Mozilla's accessibility site at the following link: <span class="c13"><u><a
                    553:       href="http://www.mozilla.org/access/keyboard/#definitions">http://www.mozilla.org/access/keyboard/#definitions</a></u></span></p>
                    554:     </div>
                    555:     <div id="sdfootnote4">
                    556:       <p class="sdfootnote-western"><a id="sdfootnote4sym" class="sdfootnotesym"
                    557:       name="sdfootnote4sym" href="#sdfootnote4anc">4</a> This is also defined on
                    558:       Mozilla's accessibility site as: "a piece of data that defines the connect[ion]
                    559:       between a keystroke and a command".</p>
                    560:     </div>
1.2     ! edank     561: 
        !           562:     <p id="mozdev-feedback">
        !           563:     For questions or comments about accessibar, please send a message to the
        !           564:     <a href="http://accessibar.mozdev.org/credits.html">project owner</a>.<br>
        !           565:     <!-- Out for the time being. "http://www.mozdev.org/mailman/listinfo/accessibar" -->
        !           566:     <a href="http://www.mozdev.org/copyright.html">Copyright</a> &copy; 2004. All rights reserved. 
        !           567:     <a href="http://www.mozdev.org/community/terms.html">Terms of Use</a>.
        !           568:     <br />
        !           569: 
        !           570:     <!-- StatCounter -->
        !           571:     <script type="text/javascript" language="javascript">
        !           572:     var sc_project=472746; 
        !           573:     var sc_partition=2; 
        !           574:     </script>
        !           575: 
        !           576:     <script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><a href="http://www.statcounter.com/" target="_blank"><img  src="http://c3.statcounter.com/counter.php?sc_project=472746&amp;amp;java=0" alt="free web tracker" border="0"></a> </noscript>
        !           577:     <!-- End of StatCounter -->
        !           578:     </p>
        !           579: 
1.1       edank     580:   </body>
                    581: </html>

FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>