1. Introduction

When you start the EASI tool for the first time, it will display to you the start page shown in the following screenshot. From there you can directly create an EASI Web Project.  

2. Create a new web project for the design and evaluation of new web site

  1. Select the account that you want to use.
  2. Depending on the account you have selected, a list of roles that are associated with this account will be displayed in the drop-down menu. Select the "Developer" as role that you want to use in the project.
  3. Optionally you can add more user accounts to the project.
  4. After clicking on "Finish" the following project structure will be created.
  5. When you open the generated HTML file it will be opened in the EASI Web Editor as shown in the following picture.
  6. You can add content using either the source code directly or the WYSIWYG features of that editor.
  7. When you save the changes the files of your project will automatically be synchronized with a remote server in the cloud. If not already open a Web Browser window will be openend pointing to the remote URL.
  8. You can place the Web Editor next to the Web Browser so that each change that you make (and save) in the Web Editor is directly updated in the Web Browser.
  9. Note: you may want to continue with the evaluation of the EASI Web Project you just created.

3. Create a new web project for the evaluation of a remote web site

  1. Select the account that you want to use.
  2. Depending on the account you have selected, a list of roles that are associated with this account will be displayed in the drop-down menu. Select the "Developer" as role that you want to use in the project.
  3. Optionally you can add more user accounts to the project.
  4. After clicking on "Finish" the following project structure will be created.

4. Changing the project configuration

  1. After the project has been created (either for a remote web page or a local web page) the project configuration file will be automatically opened in the EASI project configuration editor. This editor has three different pages:
    1. an overview page (the default one)
    2. a page to select the tests for evaluation
    3. a page for managing the team members of the project.

  2. Select the tab "Evaluation Rules" to select the tests that you want to perform. Here you find a hierarchy of different tests including content related tests (e.g. form related or image related tests), tests related to Search Engine Optimization and tests for the Web Content Accessibility Guidelines 2.0 (WCAG 2.0)
  3. In the tah "Project Members" you can add or remove members to and from the project. But for this tutorial it does not have any effect.
  4. The project configuration is saved in the XML format. The following table shows the supported elements, the screenshot below shows an example project configuration.
    projectConfiguration The container element for the project configuration.
    projectName The name of the project.
    projectURL The base URL of the project (e.g. http://www.imergo.com).
    startURL The start URL of the project (e.g. http://www.imergo.com/index_en.html).
    tests The container element for the tests.
    test A test or group of tests each specified by an id.

5. Perform an evaluation

  1. Go to the "Overview" tab and click on the link "EASI evaluation" under the section "Evaluation". This will start the evaluation based on the previously selected tests and open the web page in a browser within the EASI tool.
  2. When finished the results are displayed in two different ways:
    1. At the bottom of the EASI developer perspective all the results are displayed in one table
    2. On the right side of the EASI developer perspective (in the "Accessibility Report" view) the results are grouped by the content they address, e.g. form related rules, image related rules and so on. This view has three tabs:
      1. in the "Summary" tab for each type of content the the following information is presented:
        1. Number of problems found by automated testing.
        2. Number of problems found by developer testing.
        3. Number of outstanding developer tests.
      2. The second tab "Automated Testing" displays all the evaluation results for those tests, that can be tested automatically, i.e. where the test either return a "pass" or a "fail".
      3. The third tab "Developer Testing" displays all those tests, where a manual check is involved that needs to be undertaken by the developer. For each grouping of result the developer can use arrow keys to navigate through the single results and highlight the related element in the browser. When you are finished with the manual test you can save the results by clicking on the button "Save results"
  3. To verify that the results are saved you can use the "Web Compliance API Editor", which you can start via the "EASI" main menu. This editor shows all the projects (where you are either project owner or project member) and for each project all the evaluation runs that have been performed. For each evaluation run all the tests with detailed information can be inspected. Information includes the outcome of the test, the type of test (either automatic or manual), more details about the test itself and the message describing the test.