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

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

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