FireEyes Quick Start Tutorial

Welcome to the FireEyes Quick Start Tutorial. In this basic tutorial, we will fix a two-page website to make it compliant with Section 508, the statute governing information accessibility laws in the US. However, FireEyes is also capable of analyzing web pages under the WCAG 1, 2, and 3 standards from which universal accessibility laws are derived. In this tutorial, we will cover sub-paragraphs (a), (d), and (g) of Section 508 for websites. We will create a project with 2 HTML files containing paragraph (a), (d), and (g) errors and then fix the files through Worldspace FireEyes to make our project Section 508 compliant.

The tutorial assumes that you have successfully installed the Firebug and the FireEyes plug-ins for Firefox. If you haven't done so, please go to the FireEyes page and install the necessary plug-ins.

Tutorial

Download the Tutorial Zip file and extract it to a location on your hard drive.

Open the Firefox browser and open the Firebug plug-in by clicking on the Fire Bug icon on the bottom-right of the status bar.

Click on the Worldspace FireEyes tab.

We will start by setting some options; uncheck the Analyze Automatically, Record, and Highlight Issues check boxes if not already unchecked.

To restrict the analysis options to Section 508, click the Settings tab and scroll down until you see the Accessibility analysis options node; expand this node and uncheck all options except Section 508. For the Web Content Accessibility Guidelines (WCAG) you have to expand the node to uncheck the options.

To facilitate the remediation of a website, FireEyes allows the creation of projects based on a supplied URL to a remote server or the local file system. For our tutorial, we will create a project on the local file system for which we will have to specify the path to the directory where you saved the tutorial files. In Firefox choose File -->File Open and navigate to the directory where you stored the tutorial files in Step 1 and open Sec508_a.html. Copy the path to the file in the address bar and click the Projects tab in Worldspace FireEyes and then under new project enter the following:

Name: FireEyes TutorialProject;

Sandbox base URL: Paste the path to the file Sec508_a.html and remove the file name so the path to the directory is specified.

Click Save. The project is now saved, and we are ready for analysis and remediation. Note: Projects are saved within Worldspace FireEyes and are available across browser sessions. Icons above the project are used to update and delete projects, respectively. Also, you can enter the path to the production and QA servers which will appear as separate URLs under the project.

Open the project created above by clicking on the Sandbox base URL; a list of files in the web site will appear in the browser. The following screenshots portray the sequence of creating a project.

Remediate a page violating paragraph (a) of Section 508 regarding image attributes.

Click on Sec508_a.html; the file appears in the browser. Click on the Current Document tab in Worldspace FireEyes and click the Analyze Now button. The Analysis Results box pops up indicating 1 issue was found. Dismiss the pop-up and expand the Issue node. You will see that Worldspace FireEyes indicates that image on the page is missing a text equivalent.

Worldspace FireEyes can also graphically indicate what parts of a web page are not accessible. Check Highlight Issues and click the Analyze Now button. Blue and white diagonal stripes cover the image indicating it is not accessible. Using this feature we can quickly get a feel of how the page is understood by a visually impaired person.

Open the Sec508_a.html file in an HTML or text editor of your choice and add the alt text "MARS logo" to the <image.../> tag and save the file. Refresh the browser and click the Analyze Now button. A pop-up announces "No Issues Found." Close the pop-up. The page is now Section 508 compliant. The following screenshots depict the remediation of the page.

Remediate a page violating paragraphs (d) and (h)

Click on the Project tab and click on the sandbox URL to open the list of pages in the project. Click on Sec508_d.html. A page containing a table displaying lunch and dinner menu items displays. Click the Analyze Now button; Worldspace FireEyes analyzes the page and indicates 2 issues were found. Dismiss the pop up and expand the issue node. The 2 issues indicate there is a problem with the yellow text on a white background and table headers.

Note that in the issue regarding text color FireEyes assumes that CSS is used to change the font color (as it should in well coded web page) and hence the reference to CSS. However, we are using the deprecated <font color="yellow" .... method to change the color for this simple tutorial.

Click the Color button and dismiss the warning if it does not affect your physical condition. This time FireEyes is more specific as to the contrast issue. The Color button is a convenient way of analyzing a page for color contrasts.

Open the Sec508_d.html file in an editor and change the <td> tags for Lunch and Dinner columns to <th>. Also, remove the <font> tag completely and save the page. Refresh the page in the browser and Click the Clear button to clear the issues and then click the Analyze Now button. Worldspace FireEyes still indicates an issue with the table not having header associations with data cells; however, this table is very simple and header associations are not required for each cell.

Both pages are now accessible and compliant with Section 508.

This completes the tutorial; now you should have learned enough to get started using FireEyes.