File:  [mozdev] / accessibar / www / usersguide / Attic / usersguide.html
Revision 1.3: download - view: text, annotated - select for diffs - revision graph
Thu Nov 10 21:34:22 2005 UTC (13 years, 9 months ago) by edank
Branches: MAIN
CVS tags: HEAD
*** empty log message ***

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

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