Product Guide
Site Scanner
A step-by-step look at using Site Scanner.
The Evinced Site Scanner will help you discover accessibility issues across your entire website, study changes over time, and monitor your overall compliance level in a fraction of the time.
Creating a Property
Enter the URL of the website you would like to scan for accessibility issues. You will be prompted with the form below upon initially logging in and can return to it by clicking the “Add Property” button on the main scanner dashboard.
Once you have entered the URL click “Next” and then “Start Crawling” to begin the process. The default crawl setting is a maximum 1500 pages. Please contact support@evinced.com if more pages are needed. Once the crawling process has completed, click “Scan” to complete the scanning process.
Advanced Settings
Page Mapping Options
There are two options for populating URLs or pages that will then be scanned for accessibility issues.
Crawl Mode
Crawl mode will automatically traverse and explore the provided website to find as many pages as possible. Toggling between modes is available at the top right corner of the “Advanced settings” page.
List Mode
Provide a static list of urls that will be scanned.
Seeds List
This is a list of URLs that serve as entry points for the automatic crawler. Generally only a single seed URL is needed, however if there are multiple areas of your website that are not directly connected then multiple seed URLs are a great option.
Scope
Defining the scope can help make sure that the important areas of your website are included in the scan and areas that shouldn’t be scanned are excluded.
Domain
Include or exclude any URLs discovered by the crawler using domains. An example might be if you wanted to scan admin.website.com but also wanted to include developer.website.com. We could add a simple include domain rule to make sure that both subdomains are included in the scan.
Language
Include or exclude a language setting. For language rules, Evinced takes the value of the language attribute (under the <html> tag) and checks it against the regex provided in this field. A language rule is required so if you would like to include all languages simply use the .* regular expression in the field as shown.
To exclude a language, select the “Exclude Language” option and the language. In this example, en-US will only match the exact string. When using exact strings, please check the format used with the website being scanned as formats can differ between sites.
Regex Rules
Regex rules let you include or exclude domains as well as url paths, parameters, etc. Every URL found while crawling will be matched against the regex and if it matches it will be included or excluded from the scan. For example, if you would like to include the app.evinced.com/stores/ and app.evinced.com/about/ directories but would like to exclude app.evinced.com/products/ we would add the exclude regex rule below.
^https?://app\.evinced\.com/products/.*
Grouping Rules
Grouping rules allow you to sample pages that may be built on the same underlying structure.
Mapping URLs with query parameters to unique pages
URLs that have differences in query parameters, case sensitivity or fragments(#) may map to the same page or different pages. For example, in the case that the URLs www.evinced.com/products?id=1 and www.evinced.com/products?id=2 present two different product pages we may want to sample these pages as they are likely built on the same underlying structure.
Sample similar pages to reduce the time/size of the scan
An e-commerce site with hundreds of thousands of product pages all build around the same base components may not need to scan each and every one for accessibility issues. Scanning a subset of these pages will have significant efficiency gains while still providing accessibility coverage.
So if we know there are thousands of products under, say, the app.evinced.com/products/ directory, we may only need to scan a handful for accessibility issues because they are based on the same underlying page structure. After clicking on the “Add rule” option, we can fill out the form as shown to limit the number of pages to 20. This means that once the crawler has discovered 20 of these pages it will stop and move on to other parts of the website. Then just click “Save rule”.
Scanning Behind Login
The Evinced Site Scanner has the ability to scan areas of any website that require login. Simply provide the page, locators, and login credentials in the advanced settings to start finding accessibility issues.
To begin, click on the property in which you would like to add a login and click on the “Settings” button in the top right hand corner of the page.
On the settings page, scroll down until you find the Login section.
Form Login
From the dropdown, select “Form Login” and a number of new options will populate.
Login URL
The URL for the page that contains the login form.
User Name
Valid user name needed to log in to the application
User Name Selector
CSS selector for the user name text entry field web element
Password
Valid password needed to log in to the application
Password Selector
CSS selector for the password text entry field web element
Login Button Selector
CSS selector for the “Login” or “Submit” button web element
How to find a CSS Selector
A CSS selector is a strategy for locating elements within a web pages. To find a CSS selector, use your browser. Navigate to the page that contains the elements you need to locate and then right(control) click and select “Inspect” on the element. In this case, we have right clicked on the “Email” field of our Evinced Product Hub page.
This will automatically bring up the browser developer tools with the element in question highlighted.
Right (control) click on the highlighted element in the Elements tab and select Copy > Selector.
The selector is now in your clipboard and ready to be used.
Save and Crawl
Once the fields are complete, click the “Save and Crawl” button in the bottom right corner of the page.
Scanning
Once the crawl is complete, simply click the Scan button. Scanning time can vary based on the number and complexity of pages. To re-scan a property, simply click the “Scan” button again and a new set of results will automatically be created.
Interpreting Results
Now that we have our scans configured, let’s discuss how to interpret the results.
Scan / Overview
Pages Impacted by Issue Severity
The graph indicates the distribution of issues across pages. Each vertical graph represents the % of impacted (has issues) pages by issue severity. For example in this graph, more than 50% of the pages contains critical issues.
Pages Impacted per Issue Type
The graph indicates the distribution of issues across pages. Each vertical graph represents the % of impacted pages by different issue types. The colors represents the Severity of the issue type.
Breakdown by Issue Severity
The graph indicates the distribution of issues by Severity. Each part of the graph represents the % of issues by their severity.
Distribution of Issue Types
The graph indicates the distribution of issues by type and severity. Each part of the graph represents the % of issues by their type (e.g. Accessible name). The colors represents the severity of the issue type.
Breakdown of Critical Issues by Type
The graph focuses on the distribution of the critical issues by issue type. Each part of the graph represents the % of issues by their type (e.g. Accessible name).
Grouping of Issues into Components
The graph indicates the % of issues grouped by components. Each component indicates the same element on different pages. Solving issues related to a component will affect all pages that contain this component.
Suggested Remediation Plan
The graph indicates the % of critical issues out of total critical issues that appear in each component. Fixing these components in this order will have the most immediate impact on improving end user experience.
Property / Trends
Total Issues Across Pages
Each vertical graph in blue represents the number of issues that were found in a scan. Each orange dot represents the number of pages that were included in the scan. Add/remove scans from the graph by checking the dates in the drop down. Switch from ‘All Pages’ to ‘Common’ to analyze only the pages that appear in all of the selected scans.
Breakdown by Severity
Each severity type is represented by a unique color according to total number of issues under that severity type within the scan. Each vertical graph represents the number or portion of issues that were found in a scan. The graph can be modified by unticking a specific severity. Switch from ‘Total Issues’ to ‘Percentage’ or to ‘Avg. per Page’ for easier comparison between scans, in case of fluctuations in total number of issues or number of pages.
Compare Scans (Beta)
Breakdown by Issue Status
The graph gives an overview of the issue resolving progress between scans. Each vertical graph represents a scan. It indicates the count of issues by their status. Each part of the graph represents the relative part of issues by their status (e.g. New). The graph can be modified by unticking a status.
Exporting Results
To export results, simply click on the “Download CSV” button in the top right hand corner of the scan results page.
Pages CSV
This report contains results organized by page. Data includes Property Name, Scan ID, Time, URL, and Issue Count.
Issues CSV
This report contains files organized by issue. Data includes Property ID, Property Name, Scan ID, Issue ID, Time, Cross Scans Issue ID, First Seen Time, Issue Type ID, Issue Type Name, Severity ID, Severity Name, WCAG Tag Names, Issue Type Summary, Issue Type Description, Issue Type Knowledge Base URL, Element Template Signature ID, Selector, HTML’s DOM Snippet, and Page URL.
Score
Evinced is excited to provide the ability for a user to summarize the accessibility of a site or app based on Evinced scan results and customer business needs. This feature provides a simple and customizable comparison method between different scans/properties as well as a consistent metric to track improvement over time. For clarity, the score is not intended to be a percentage of accessibility, but a baseline from which to compare sites, apps and scans over time.
How your score is calculated
There are three important factors that impact the score.
- The number of issues per page
- The severity of these issues (Critical, Serious, Moderate, etc.)
- The conformance level of the issues (A, AA, AAA)
At a high level, each issue detected is assigned a rating based on its severity and conformance level. For example, a critical severity issue with a A conformance level would be rated more impactful to the score than a critical severity issue at a AA conformance level. Then, these issue scores are added together and divided by the total number of pages producing a score between 0 and 100. In summary, the more numerous, severe and impactful the issues are in a scan, the lower its score will be.
Examples
| Scan | Pages | Issues per page | Score |
|---|---|---|---|
| A | 100 | 10 Critical | 66 |
| B | 100 | 10 Serious | 81 |
| C | 10 | 10 Serious | 81 |
Notice in examples B and C above that despite the change in number of pages the score stays the same. This is an important this method allows for comparison across scans of any number of pages as the calculation takes into account only for issue weight per page.
Customizing your score
This new feature also allows users to customize their score to meet their needs or the needs of the organization. For example, if you would like Critical issues to impact your score more than the default setting, it is easily configured within the settings page. The same can be true for the WCAG conformance level.
Improving your score
There is a simple way to improve your score. Fix issues! Reducing the amount of critical issues and the issues with a lower conformance level will help quickly improve the score.
FAQ
Where can I view the scores generated from my scans?
Scores can be viewed via the Site Scanner Trends, Property and Scans pages as well as within the detailed scan reports.
Does the score correlate to the percentage of accessibility?
While Evinced can detect far more issues than any other tool, no automatic accessibility tool can detect 100% of potential accessibility issues for the entirety of your site or app. The score is not intended to be interpreted as percentage of accessibility, but a baseline from which to compare different sites, apps and scans going forward. It is customizable so it can be "Your" score that is suited for your business needs and goals.
Does the number of pages in a scan impact the score?
No! The score is calculated using the number, importance and severity of issues per page. So if a scan has 1000 pages with 10 critical A level issues per page it would have the same score as a scan of 10 pages with 10 critical A level issues per page.
What is a good score?
The closer your score is to 100 the fewer accessibility issues have been detected in the app. However, due to the customization possibilities a good score can be whatever you decide!