Introducing Our Web Flow Analyzer

A home page of an example tourism website. At the center of the screen there is a heading saying "Be Here!", and below it there is a form with three fields to choose type of habitation, destination, and date, and a search button. At the top right of the screen there is the Evinced Flow Analyzer for Web. On it's left side there is "Start scanning" button and next to it a message "Turn on the engine and start scanning for issues!"

Our Web Flow Analyzer is the perfect tool to analyze entire user flows for devs, QA or anyone looking to easily scan for accessibility issues. While logging in and completing a transaction, this easy to install chrome plugin will follow you between pages and detect all DOM changes to offer a full view of accessibility issues across the entire flow. For example, when you click on a dropdown, Evinced will detect the DOM mutation and automatically scan the elements that have been added to the page. This makes scanning for accessibility issues incredibly easy.

In addition to being easy to use, the Evinced flow analyzer for web is also able to detect more accessibility issues than any other tool on the market. Simply push the “Play” button and Evinced will use computer vision and advanced algorithms to automatically detect issues previously only able to be found manually using a keyboard and screen reader. These issues include functional blockers such as Keyboard Accessible, Interactable Role, and Accessible Name that commonly prevent sites from being accessible to all users.

A home page of an example tourism website after starting the Evinced Flow Analyzer for Web. On the bottom of the screen there is a form with a few elements marked by a red frame and a number that represents the issue ID. above one of the form fields there is a tooltip with 2 issue names “Interactable Role” and “Keyboard Accessible”. On the top right of the screen the Evinced Flow Analyzer for Web is showing a total of 6 issues that were found on the page.

As you move through your flow, results for that specific page are available within the onscreen modal. Here you can filter between severity level, issue type, and by component. A component is a set of issues that Evinced has grouped into a repeating code pattern. Components allow you to automatically take thousands of errors and reduce them to a few tens of components that are broken. This is extremely powerful feature that reduces noise and helps focus conversations with development teams on what is most important. In this example the six issues found have been reduced to two components.

The Evinced Flow Analyzer for Web expanded. The "filter components" drop down is highlighted.

Once the flow is complete a comprehensive report is available containing some exciting new features. The report now contains Overview, Component, and All Issues pages to provide even more value from the results of your user flow. The Overview page contains visualizations of the data broken down by issue type and severity, but perhaps the most valuable graph is the breakdown by component. This data forms the basis for an auto-generated remediation plan which will dramatically reduce the accessibility burden on the development team. In this case, if we fix these 10 components we will improve the overall accessibility posture of our site by 91%. This can likely be done in a single sprint, making an immediate impact.

The report thab of the Evinced Flow Analyzer for Web. Showing 3 charts. One shows accessibility issues breakdown by type, the second by severity and the third by component. The components chart is marked by a red frame. On its top there is a text: "10 components contribute 91% of critical issues"

Beyond the overview the report also contains all of the information needed in order to immediately identify, replicate, and remediate issues. This information includes the url, severity level, issue and description, css selector, html snippet and recommendations on how to fix the issue. There is also a link to the relevant WCAG success criteria as well as a link to the Evinced Knowledge Base that has even more information on how to resolve the issue as well as a theory section to help developers understand how to prevent these types of issues in the future.

Introducing Our Web Flow Analyzer

All of this information can be exported directly to Jira with a single click and the entire report can be exported in PDF or CSV format. These new reports provide even more value and are an exciting addition to the Evinced flow analyzer for web.

So what’s next? Evinced will be adding highlighted screenshots to these reports in the coming months to make it even faster to identify issues!

For more information, check out the Web Flow Analyzer on our website.