blob: 9799eaaa89d8ac572a46aaec6afb3dc95d4ad55c [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="en">
<HEAD>
<META http-equiv="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META http-equiv="Content-Style-Type" content="text/css">
<meta name="copyright" content="Copyright (c) IBM Corporation and others 2007. This page is made available under license. For full details see the LEGAL in the documentation book that contains this page." >
<TITLE>User interface menus and icons</TITLE>
<LINK href="aDesigner.css" rel="stylesheet" type="text/css" class="head">
</HEAD>
<BODY>
<H1>User interface menus and icons</H1>
<P>
The aDesigner tool has five menus, which are described in the following paragraphs.
The text in parentheses provides the keyboard shortcut.
</P>
<H2>Toolbar menu</H2>
<H3>File (Alt+F)</H3>
<UL>
<LI><B>Open (Ctrl+O)</B>: Opens a dialog box for the
URL of the document whose accessibility and usability is to be checked. To check a local file, click the Browse button.</LI>
<LI><B>Close (Ctrl+W)</B>: Closes the current Web Browser/ODF Viewer Tab.</LI>
<LI><B>Switch Modes (Alt+F, M)</B>: Opens the dialog for switching the mode of aDesigner.
<LI><B>Exit (Alt+F, X)</B>: Closes the aDesigner program.</LI>
</UL>
<H3>View (Alt+V)</H3>
<UL>
<li><b>Back</b>: Go back to the previous page in the <b>Browser</b> view.</li>
<li><b>Forward</b>: Go to the next page in the <b>Browser</b> view.</li>
<li><b>Refresh</b>: Reload the document in the <b>Browser</b> view. </li>
<li><b>Stop</b>: Stop loading the document in the <b>Browser</b> view.</li>
<LI><B>Font Size</B>: Select the relative font size to be used for the <b>Browser</b> view.
Options range from <B>Largest</B> to <B>Smallest</B>.
The default setting is <B>Medium</B>.
</UL>
<H3>Visualization (Alt+Z)</H3>
<UL>
<li><b>Visualize (blind) (Ctrl+Shift+B)</b>: Starts the blind usability visualization function and
the problem detector for blind users.</li>
<li><b>Simulate (low vision) (Ctrl+Shift+O)</b>: Starts the low vision simulation function and
the problem detector for low vision users.</li>
<li><b>Presentation (Small room) (Ctrl+Shift+M)</b>:
Simulates a slide show when the screen size is 3 feet located 10 feet from the audience.</li>
<li><b>Presentation (Large room) (Ctrl+Shift+G)</b>:
Simulates a slide show when the screen size is 5 feet located 30 feet from the audience.</li>
<li><b>Presentation (Auditorium) (Ctrl+Shift+A)</b>:
Simulates a slide show when the screen size is 10 feet located 100 feet from the audience.</li>
</UL>
<H3><a name="favorites">Favorites (Alt+A)</a></H3>
<UL>
<LI><B>Add to Favorites</B>: Adds the current page as a bookmark for aDesigner.
<LI><B>Organize Favorites</B>: Opens a window to edit and organize the aDesigner bookmarks.
</UL>
<H3>Window (Alt+W)</H3>
<UL>
<LI><B>Navigation</B>: Shows menus to navigate through views in aDesigner</LI>
<LI><B>Preferences</B>: Shows preferences dialog to modify the settings of aDesigner.</LI>
</UL>
<H3>Help (Alt+H)</H3>
<UL>
<LI><B>Help Contents</B>: Click to open the Help file.
<LI><B>About aDesigner</B>: Click to read the version information.
</UL>
<H2>Interface components</H2>
<H3>Browser View pane</H3>
<table border=1>
<tr>
<td><B>Back</B> and <B>Forward</B></td>
<td align="center"><IMG src="images/browser/back.gif" alt=""><br><IMG src="images/browser/forward.gif" alt=""></td>
<td>Click these buttons to navigate among webpages. </td>
</tr>
<tr>
<td><B>Refresh</B></td>
<td align="center"><IMG src="images/browser/refresh.gif" alt=""></td>
<td>Click this button to reload the current document.</td>
</tr>
<tr>
<td><B>Stop</B></td>
<td align="center"><IMG src="images/browser/stop.gif" alt=""></td>
<td>Click this button to stop loading a document.</td>
</tr>
<tr>
<td><B>Title bar</B></td>
<td align="center"><IMG src="images/browser/titlebar.gif" alt=""></td>
<td>Shows the title of the target page.</td>
</tr>
<tr>
<td><B>Address bar</B></td>
<td align="center"><IMG src="images/browser/addressbar.gif" alt=""></td>
<td>Contains the URL or file name of the webpage being analyzed. By double-clicking inside the address bar or by pressing Alt+D, a new URL can be entered into the address bar. </td>
</tr>
<tr>
<td><B>Go</B></td>
<td align="center"><IMG src="images/browser/go.gif" alt=""></td>
<td>Click this button to load the specified page. </td>
</tr>
</table>
<H3>Visualization View pane</H3>
<P>
When the blind mode is selected, the Visualization View pane is opened, which includes the following buttons, interactive elements, and icons.
</P>
<H4>Buttons</H4>
<table border=1>
<tr>
<td><b>Visualize</b></td>
<td><IMG src="images/I_Visualize.gif" alt=""></td>
<td>Click this button to open the blind usability visualize function and the problem detector with the current settings.</td>
</tr>
<tr>
<td><B>Settings</B></td>
<td><IMG src="images/I_Setting.gif" alt=""></td>
<td>Click this button to open the <A
href="parametersBlind.html">Blind Usability Visualization preference page</A>, which controls the voice browser output mode and the layout mode (including reaching time, accessible tags, and table structure).</td>
</tr>
<tr>
<td><B>Save</B></td>
<td><IMG src="images/I_Save.gif" alt=""></td>
<td>Click this button to open the Save as dialog box and save a report file.
The report file is a CSV format. By selecting "Save HTML Report" option, an HTML document will be saved with CSV report.</td>
</tr>
<tr>
<td><B>ID/CSS</B></td>
<td><IMG src="images/I_IdCss.gif" alt=""></td>
<td>Click this button to open the <A href="elementCss.html">ID/AccessKey/Class/CSS viewer panel</A>, which displays information on attributes (ID, AccessKey, and Class) of elements and information on the Cascading Style Sheets (CSS) applied to the target page.</td>
</tr>
</table>
<H4>Interactive elements and icons</H4>
<P>
The balloon messages and icons follow the movement of the mouse pointer and show the exact reaching time for the indicated element.
When the mouse pointer is placed over an accessible tag, the balloon message also indicates the tag name.
</P>
<P>
The balloon icon indicates acceptability of the reaching time.
</P>
<UL class="icons">
<LI><IMG src="images/I_FaceSmile.gif" alt="Smiling face.">: The reaching time for the element is shorter than or equal to 30 seconds.
<LI><IMG src="images/I_FaceUsual.gif" alt="Expressionless face.">: The reaching time for the element is longer than 30 seconds, but shorter than or equal to 90 seconds (the default maximum acceptable reaching time).
<LI><IMG src="images/I_FaceSad.gif" alt="Sad face.">: The reaching time for the element is longer than 90 seconds.
</UL>
<P>
The balloon messages and icons have two modes.
If you place the cursor in the Visualization View and click, the messages and icons remain at the position where the mouse click occurred (stationary mode).
Click again in the Visualization View if you want the messages and icon to move and follow the mouse pointer (active mode).
</P>
<P>
Intra-page link (<IMG src="images/I_LinkSource.gif" alt="Start of arrow.">) and intra-page link destination (<IMG src="images/I_LinkDestination.gif" alt="End of arrow.">) icons: When an intra-page link icon is clicked, an arrow, which is formed with red circles, appears between the source and the destination of the intra-page link.
The arrow can be removed by clicking the icon again.
</P>
<P>
The balloon messages and icons and the arrows of the intra-page links can be controlled by using the icons on the Control panel.
</P>
<UL class="icons">
<LI><B>Freeze Balloon (<IMG src="images/I_FreezeBalloon.gif" alt="">)</B>: Click this button to make the balloon stationary.
<LI><B>Active Balloon (<IMG src="images/I_ActiveBalloon.gif" alt="">)</B>: Click this button to make the balloon active (that is, it follows the mouse pointer).
<LI><B>Clear All Links (<IMG src="images/I_ClearAllLinks.gif" alt="">)</B>: Click this button to hide the arrows that appear in the Visualization View.
<LI><B>Refresh Links (<IMG src="images/I_RefreshAllLinks.gif" alt="">)</B>: Click this button to redraw the arrows that appear in the Visualization View.
<LI><B>Draw All Links (<IMG src="images/I_DrawAllLinks.gif" alt="">)</B>: Click this button to show all of the arrows for intra-page links in the target page.
</UL>
<H3>Simulation View pane</H3>
<P>
When the low vision mode is selected, the Simulation View pane is opened next to the Browser View pane.
It includes the following buttons and check boxes:
</P>
<table border=1>
<tr>
<td><B>Simulate</B></td>
<td><IMG src="images/I_Simulate.gif" alt=""></td>
<td>Click this button to start the low vision simulator and the problem detector with the current settings. The current settings status is displayed in the status bar.</td>
</tr>
<tr>
<td><B>Settings</B></td>
<td><IMG src="images/I_Setting.gif" alt=""></td>
<td>Click this button to open the <A href="parametersLv.html">Low Vision Simulation preference page</A>, to set the eyesight, color vision deficiency,
and crystalline lens transparency parameters that ACTF Low Vision Simulation uses when checking webpages.</td>
</tr>
<tr>
<td><B>Save</B></td>
<td><IMG src="images/I_Save.gif" alt=""></td>
<td>Click this button to open the "Save as" dialog box and save the report file.
The report file is an HTML document and can be read by using a Web browser.</td>
</tr>
<tr>
<td><B>Whole page</B> check box</td>
<td><IMG src="images/Wholepage.gif" alt=""></td>
<td>When this check box is selected, aDesigner checks the entire target webpage, even if only a portion of the page is visible in the browser and the page consists of multiple frames of HTML documents.
If the check box is cleared, only the displayed portion of the page is checked.</td>
</tr>
</table>
<H3>Line View pane</H3>
<P>
By default, the Line View pane appears in the Detailed Report tab of the bottom row.
The column heads differ slightly depending on the active tab.
</P>
<H4><a name="blindIcon">Blind tab</a></H4>
<div style="margin-bottom:20px">
<table border=1><tr><td>
<IMG src="images/I_Star.gif" alt="Star icon"> </td><td>This icon appears with some other icon. The corresponding element can be highlighted in the Visualization View by selecting this line.
</td></tr></table>
</div>
<div style="margin-bottom:20px">
<table border=1>
<tr><td><IMG src="images/Err.png" alt="Error"> </td>
<td>This item is an accessibility problem automatically detected.</td></tr>
<tr><td><IMG src="images/Warn.png" alt="Probably Error"> </td>
<td>This item is probably accessibility problem.</td></tr>
<tr><td><IMG src="images/Conf.png" alt="Need confirmation"> </td>
<td>This item requires user confirmation.</td></tr>
<tr><td><IMG src="images/Info.png" alt="Human check"> </td>
<td>This item requires human check based on test procedure.</td></tr>
</table>
</div>
<H4>Low vision tab</H4>
<UL class="icons">
<LI><IMG src="images/I_Star.gif" alt="Star.">: This icon appears with some other icon.
The corresponding element can be highlighted in the Simulation View by selecting this line.
<LI><IMG src="images/I_Color.gif" alt="Rectangles.">: This problem is related to the colors of the corresponding element.
<LI><IMG src="images/I_Blur.gif" alt="Circle.">: This problem is related to the font sizes of the corresponding element.
</UL>
<H3>Overall Rating pane</H3>
<P>
This area provides the target page's overall rating for accessibility and usability.
</P>
<H4>Blind tab</H4>
<P>
Page rating: The radar chart shows the target page's rating in terms
of Perceivable, Operable, Understandable and Robust.
The overall rating is based on the number of problems found on the page.
</P>
<H4>Low vision tab</H4>
<P>
Problem map icon: Indicates the position of the problems on the page.
The overall rating above the graphic is based on the number of problems and the severity values of the problems on the page.
</P>
<H1 class="related">Related topics</H1>
<UL class="related">
<LI><A href="overview.html">Overview of aDesigner</A>
<LI><A href="workspace.html">Exploring the aDesigner workspace</A>
<LI><A href="checkBlind.html">Checking the accessibility and usability of a document in the blind tab</A>
<LI><A href="checkLv.html">Checking the accessibility and usability of a document in the low vision tab</A>
</UL>
<P>
<A href="index.html">Go to Index</A>
<hr>
<DIV class="logo"><IMG src="images/logo.gif" alt=""></DIV>
</P>
</BODY>
</HTML>