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

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