User Guide

Introduction

Overview of the product

The Evinced Web Flow Analyzer (“WFA”) is a powerful tool that enables you to identify accessibility issues throughout your web application. It scans an entire flow, compiles a comprehensive, deduplicated list of issues, and generates a unified report that encompasses all the identified accessibility concerns.

---

Getting Started

Install The Extension

Download and install the browser extension from the Evinced Product hub.

Create Your First Session

Web Flow Analyzer works by grouping all your accessibility into a session, which you can name and review later. To create your first session, follow these steps:

1. In Google Chrome, go to the first web page in the flow you want to analyze.
2. Click on the WFA icon in the toolbar of your Chrome window. You’ll need to log in with your Evinced username and password, if you haven’t already.
3. In the WFA panel that opens at the top left (you can also move the panel to other locations), click on the "Play" button. Name your session.
4. Choose whether you want to highlight discovered issues on each page by operating the toggle, or display accessibility details on each issue by clicking the expand arrow at right.
5. Now click the button to turn the WFA analysis engine on.
6. Begin interacting with your web application and test the flows you wish to evaluate for accessibility. You can navigate to different pages, open dropdowns, modals, or perform any other actions. WFA will automatically follow your actions and continuously monitor the accessibility of the application.
7. During the testing session, you can check the issue list on the left side of the WFA panel. It provides an overview of the identified accessibility issues. You can click on the “eye” icon to highlight the corresponding element on the web page. Additionally, you can click the “code” icon or copy the selector of the element or even inspect it in the developer tools. Click on the “i” icon to see more information about the issue.

If at any point you want to stop collecting issues, simply click on the pause button in the WFA panel.

Check The Report And Export The Results

Once you have completed your testing session, it's time to review the comprehensive report generated by WFA and export the results. On your browser, navigate to the “Reports” tab or simply click on the "View Report" button in the panel.

Here, you will find an interactive report that contains a detailed list of the accessibility issues identified during your testing session. The report contains few tabs:

1. Overview - which summarizes your session data.
2. Components - which lists all the components found in the session along with their issue list.

Components are repeating code patterns (for example, a dropdown that is used in several different locations of your application). Use the components in order to prioritize your work. For example, find out which components have the most issues.

3. All Issues - all the issues found in the session. Each issue includes relevant information such as descriptions and remediation suggestions.

You can also view screenshots that visually illustrate the problematic areas within the web application, providing a clear understanding of the issues. To export the results, you can use the export button in the issue list tab. Choose the desired format, HTML or CSV, and save the exported file to your preferred location.

The Web Flow Analyzer is fully integrated with Jira and Azure DevOps. In order to create a ticket, open the desired issue in the issue list tab and click “Add to Jira/ADO”.

---

Features and Functionality

Session Options

Create a new session to test a particular flow, focus on specific elements, test a single page, or even the entire application. To configure advanced settings, such as selecting specific elements or adding/removing best practices or needs review validations, click on the "advanced" button when starting a session.

Resume Your Last Session

You may pause your application testing (by simply clicking the pause button) and resume it at a later time. Follow these steps to continue your last testing session: Open the WFA panel by clicking on the WFA extension icon in your browser's toolbar. To continue your last session, simply click on the "continue last session" button.

When continuing a session, please be aware that the settings applied to the original session cannot be modified. The session will resume with the same configurations as before.

This feature allows you to conveniently pause the testing process and pick up where you left off, ensuring a seamless experience when evaluating your web application's accessibility.

Panel Issue List

The Web Flow Analyzer (WFA) panel, when in expanded mode, provides a view of all the issues detected on the current page. Assuming your session has already started and the panel is visible, click on the expand arrow in the right hand side of the panel. This expanded view shows several tabs, the first of which is a list of elements identified as having accessibility issues so far in your session.
You can easily filter the elements based on issue type or severity to focus on specific categories of issues. For each element listed in the panel, you have several features at your disposal: For each element listed in the panel, you have several features at your disposal:

• Eye Icon - By clicking on the eye icon, you can highlight the element directly on the page, making it easier to locate visually.
• Copy Icon - Clicking on the copy icon allows you to copy the selector of the element, facilitating further analysis or reference.
• Dev Tools Icon - Selecting the dev tools icon will automatically switch the focus to the element in the Chrome Development Tools. If the dev tools are currently closed, you will be prompted to open them for seamless integration.
• Info Icon - Clicking on the info icon provides additional information about the element, including a DOM snippet and more details on the specific issue type.

Semi-Automated Tests

Although Web Flow Analyzer (WFA) automatically discovers more issues compared to other platforms, certain validations still require human interaction. To expand accessibility coverage, we offer four types of Semi-Automated Tests (SATs): Structure, Modals, Images, and Focus Sequence. Each SAT involves several steps, where you will be prompted to answer questions or interact with the page. Based on your input, a series of automatic checks are executed to identify issues. At the end of the flow, an issue list is presented, and these issues are automatically added to the session’s report.

Modals Dialogs

The Modals SAT is designed to test modal components, including the modal trigger (e.g., a button). There are multiple checks within this SAT, including:

• Dialog without aria-modal
• Focus kept within the modal
• Focus on modal closed
• Focus on modal open
• Main content dimmed
• Missing dialog semantics
• Modal dismissed on ESC key
• Modal lacks an accessible name
• No visible close modal button

Structure

The Structure SAT is a set of checks related to the structure of a web page, such as the page title, headings, and landmarks. These checks include:

• Page title meaning
• Redundant heading
• Missing heading semantics
• Missing footer and header semantics

Images

The Images SAT detects all images on the page, including SVGs. While some images can be fully analyzed automatically, others require user judgment – for example, on the meaning of alternative text. In each step of this SAT, users will be asked a few simple questions about the image and its context. It will check for:

• Alternative text for complex images
• Alternative text for functional images
• Alternative text for decorative images
• Alternative text for informative images
• Text within images

Focus Sequence

The Focus Sequence SAT addresses issues that would be encountered when navigating a web page via a keyboard . Checks here include:

• Focus trap
• low focus contrast
• non-interactive focus

Adding a Manual Issue

While WFA covers a wide range of accessibility issues, there may be specific organizational concerns that are not automatically detected. If you encounter an issue like that, you can quickly and easily add it to the report for your session.

1. In the expanded view of the WFA panel, navigate to the third tab.

2. Select the element in your application that is affected by the issue.
3. Click on the "Next" button to proceed.
4. Choose the appropriate issue type from the options provided. If the issue type is not listed, you can always select "Other".
5. Add a description of the issue and specify its severity.
6. Click on the "Add Issue" button to include it in the report.

Additionally, you have the option to directly add the issue to Jira or Azure DevOps (ADO) by ticking the "Add to Jira/ADO" checkbox. This allows for seamless integration with your project management and issue tracking systems.

Export

The Web Flow Analyzer (WFA) provides support for exporting the issue list of your sessions in two formats: CSV and HTML. To export the session issue list, please follow these steps:

1. Open the WFA application.
2. Click on the “View Report” button.
3. In the report, navigate to the "Issue List" tab.
4. Click on the "Export" button.
5. A menu will appear where you can choose between HTML or CSV format.
6. Select your desired format (HTML or CSV) for the export.
7. The download of the exported file will start automatically within seconds.

Integration With Ticket Management Systems

The Web Flow Analyzer (WFA) offers seamless integration with ticket management systems. Currently, Jira and Azure DevOps are supported. These integrations allow you to create new tickets directly from the WFA report tab. To configure your desired ticketing system, please contact our support for assistance.

To create a ticket using WFA for the first time, simply follow these steps:

1. Open the WFA application.
2. Click on the “View Report” button.
3. In the report, navigate to the "Issue List" section and locate the specific issue you want to create a ticket for (by clicking on the information icon "i").
4. Click on "Connect to Jira". This is a one-time setup step.
5. Enter the host name of your Jira instance (e.g., "https://yourcompany.atlassian.net/") when prompted.
6. Fill in the required fields, such as subject, severity, and any other relevant information. Evinced will automatically add a screenshot of the issue and populate the description field.
7. Click on "Create Ticket" to generate the ticket in your Jira instance.

Manage Sessions

With the Web Flow Analyzer, you have the flexibility to edit your sessions according to your needs. You can easily rename a session if you wish to change the default name provided by the system. Additionally, you can delete any redundant sessions to keep your session list organized and clutter-free. To edit a session, follow these steps:

1. Open the WFA application.
2. Click on the “View Report” button.
3. In the report, click on "Settings" icon.
4. Select "Manage Sessions" from the menu.
5. Make the necessary changes, such as renaming the session.

Keyboard Shortcut

If you’re using Web Flow Analyzer exclusively from a keyboard, you may want from time to time to move between the WFA panel and the browser page being analyzed. Here’s a shortcut for tha

1. For Windows users, Windows Key + Shift + E, or Ctrl + Shift + E.
2. For Mac users, Command + Shift + E