Evinced announces first end-to-end mobile (iOS & Android) accessibility solution

Site scanner - product documentation

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. A UI form to enter a URL to create a property for scanning. It is a single input with an option for viewing the advanced settings or clicking next after entering a URL.

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. A mapping switch element with the crawl page mapping setting selected.

List Mode

A mapping switch element with the list mode page mapping setting selected. Provide a static list of urls that will be scanned. Displays a list of URLs within list mode as they would be viewed in the UI. URLs can be searched, selected, or removed from the UI.

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. Displays the seed URLS as they are listed in the UI. URLs can be searched, selected, or removed from the UI.

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 www.evinced.com but also wanted to include developer.evinced.com. We could add a simple include domain rule to make sure that developer.evinced.com is included in the scan. Lists the scope options. An include domain for www.evinced.com, and include domain for developer.evinced.com, and an include language for all languages.

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. Lists the scope options. An include domain for www.evinced.com, and an include language for all languages.

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. Lists the scope options. An include domain for www.website.com and an exclude language for en-US.

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 below exclude regex rule below.

^https?://app\.evinced\.com/products/.*

Lists the scope options. An include domain for www.evinced.com, and include domain for app.evinced.com, and an include language for all languages, and an exclude regex for the products directory.

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 same page or different pages. 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. Grouping rules pannel that shows grouping options, In this case by the query paremeter "id"

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 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”. Grouping rules pannel that shows grouping options, In this case it is set to ignore URL parameters

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. Shows the location of the settings button within the UI.

On the settings page, scroll down until you find the Login section. Shows the location of the login method dropdown

Form Login

From the dropdown, select “Form Login” and a number of new options will populate. The needed fields for a form login to be completed when running a scan. This includes Login URL, username, username selector, password, password selector, and login button selector.

Login URL
The URL for the page that contains the login form.

User Name
Valid user name needed to login to the application

User Name Selector
CSS selector for the user name text entry field web element

Password
Valid password needed to login 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, 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 website.

The pop up which appears when right clicking within a Chrome window. The "inspect" option is highlighted

This will automatically bring up the browser developer tools with the element in question highlighted. A browser window with the chrome dev tools displayed and the email input box highlighted. both in the UI and the html within the dev tool window. Right (control) click on the highlighted element in the Elements tab and select Copy > Selector. The menu item navigation to copy the css selector of the highlighted element. 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. The cancel, save, and save and crawl button location in the UI.

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.

Exporting Results

To export results, simply click on the “Download CSV” button in the top right hand corner of the scan results page. The download csv file options including download pages csv, and download issues csv.

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.

Support

Please feel free to reach out to support@evinced.com with any questions.