00:00:08You have been tasked with making this website accessible.
00:00:11All you need to do is start Evinced and click on the start analysis button.
00:00:18Evinced automatically detects accessibility issues and highlights them on the page
00:00:24For example here you can see 14 accessibility errors on the page.
00:00:28Let's explore this further.
00:00:30You see all the common issues that you would expect, like missing alt text or other HTML attributes.
00:00:36However, Evinced AI technology delivers extra value, it can automatically detect things that until now needed tedious manual testing.
00:00:46Let's take a look.
00:00:47Evinced shows you that the select your new home drop down and the where drop down cannot be accessed by a screen reader or a keyboard.
00:00:56Let's drill down a bit more.
00:00:58You see the first issue with index "S1".
00:01:01Here you can see that this element has two issues: keyboard intractability, and screen reader intractability.
00:01:08Let's go further to see what information Evinced has collected.
00:01:13You can see the selector on top and the dom snippet at the bottom,
00:01:17and immediately it's clear what the issue is.
00:01:20This drop-down was implemented as a <div> with no supporting ARIA role.
00:01:25Other tools would have missed this because they focus only on syntax analysis.
00:01:30Without Evinced these kinds of issues could only be discovered manually.
00:01:34This is interesting because it means that someone with a visual or motor disability will simply not be able to use the site,
00:01:41for its main purpose which is to book a vacation it is completely inaccessible.
00:01:46Think of this as the basic analysis.
00:01:49Another benefit of Evinced, is that one can model a user flow through the website as opposed to focusing only on a single page.
00:01:57Let's select the "type of home", and as we do that you see that the count of issues goes up,
00:02:02as evinced sees more of the dom changes it continuously analyzes the page to detect the holistic set of accessibility problems.
00:02:11Let's continue the flow. this takes us to the next page.
00:02:15as we navigate to the next page, Evinced automatically continues to analyze this new page,
00:02:21and accumulates all the issues into one report.
00:02:26Let's look at the accumulated report in the report tab.
00:02:29Here you can see a list of all the issues across all the pages you have analyzed.
00:02:34This is an HTML report of all the issues and for each issue includes a detailed description,
00:02:41WGAG references, the selector, the DOM snippet, and suggestions on how to fix the problem.
00:02:48If you want to send other developers a list of issues, simply highlight them and export the report as a CSV,
00:02:56or you can also directly open a Jira ticket.
00:03:04Groundbreaking technology saves time contact us for a demo or request access to a trial
00:03:22Welcome to the Evinced Site Scanner demo.
00:03:25Let's say you've been tasked with analyzing this entire demo website for accessibility issues,
00:03:31and for monitoring your overall compliance level.
00:03:36All you need to do is log into the Evinced Site Scanner,
00:03:41Enter your website name, and start mapping.
00:03:45Evinced will automatically crawl your website, discover all URLs,
00:03:49and scan thousands of pages for accessibility issues.
00:03:53It accumulates all the issues in one simple report in minutes.
00:03:5810 to 20 times faster than legacy scanning solutions.
00:04:02Evinced Site Scanner also uses advanced algorithms to make the results more useful.
00:04:09Let's take a look at the report that the event site scanner generated for the demo website.
00:04:14For the 610 pages scanned Evinced has already found 18 206 issues in a matter of minutes.
00:04:21100% of the pages scanned had some critical issues.
00:04:28We can also see the type of issues across the pages.
00:04:32Evinced discovered all of the common issues that you would expect like missing "alt" text and other HTML attributes.
00:04:40However, Evinced AI technology delivers extra value.
00:04:45It can automatically detect issues that until now need a tedious manual testing like interactable role, keyboard accessible, etc.
00:04:55In fact in this case interactable role issues are present in 100 percent of the pages scanned.
00:05:02Anyone using a screen reader would simply be unable to access these pages.
00:05:07Here we see a breakdown of the issues by severity categorized into critical, serious, moderate and minor.
00:05:15The issues are also broken down by issue types.
00:05:19In this case the number of critical issues that the Evinced Site Scanner has detected
00:05:24is 15 times more than what could be achieved with any traditional legacy axe-based scanning tool
00:05:32The Evinced Site Scanner also groups issues into repeating code patterns called components.
00:05:38With this powerful component concept you can simply fix one issue,
00:05:42and clear thousands of occurrences of that issue in the code.
00:05:46For example the demo website has a total of 18,206 issues,
00:05:52this can be overwhelming for the developer QA teams or the compliance organization.
00:05:58However with Evinced this overwhelming volume of issues is reduced to simply a few components.
00:06:05We see here that 100% of issues are reduced simply to 14 components and this one specific component.
00:06:12for example covers 37 percent of the issues.
00:06:16Focusing on just the critical components we can see that eighty percent of all the critical issues
00:06:22can be covered by simply a handful of components. In this case three.
00:06:26Further drill down details can be captured in the next sections for components, issues, pages, and breakdown
00:06:34If you want to further analyze this data or create compliance reports or remediation plans,
00:06:40you can export all of this data to a CSV file, with simply a click of a button.
00:06:48Groundbreaking technology saves time. Sign up for a free trial or contact us for a demo
00:07:05In this demo we will see the Evinced, Cypress automation SDK in action.
00:07:10We're using Cypress just as an example,
00:07:12Evinced can also integrate with other ui testing frameworks like Jest, Puppeteer,
00:07:17or even Selenium-based frameworks.
00:07:19However in this example we will be using Cypress.
00:07:23As our UI tests execute, Evinced will run in the background and automatically detect accessibility issues.
00:07:31You will be able to see that Evinced is very simple to use,
00:07:35all you need to do is follow these four steps:
00:07:39First we add the ev-cypress package SDK into your test or your project,
00:07:45then we call the "evinject" and "evinit" APIs to start the Evinced engines in the context of our test.
00:07:53The third step is to use the "evStartAnalysis" when we want the accessibility analysis to start within our test,
00:08:00and then we use the "evStopAnalysis" when we want it to stop.
00:08:05Once the test is run, we can see the accessibility report for that test within our Cypress test output.
00:08:12That's it.
00:08:13Let's see how it actually works.
00:08:16We are in VS code, this is a test project based in cypress.
00:08:21We are going to run two simple tests on our demo web page
00:08:25and show how Evinced can be integrated into the test, and find accessibility issues.
00:08:31The first step is going to the package.json and adding the Evinced-Cypress package as a dev-dependency,
00:08:37as we do within test integrations.
00:08:40This is the spec file where I write my test. I can use the Evinced types for easy autocomplete
00:08:48or Typescript based projects.
00:08:50this is my "beforeEach" block.
00:08:53Before each of my tests starts on the demo web page,
00:08:56we call the "evinject" API which injects the engines into the page.
00:09:01We initialize the engines and give them a configuration context or a specific selector to run on.
00:09:07There are several configuration options that are detailed within the documentation of the SDK.
00:09:14In this case i am using this option to make sure Evinced does not fail my test.
00:09:20I just want to get the report alongside my test I do not want to fail the build at this stage.
00:09:26As I get more comfortable with accessibility tests I can change this value to true,
00:09:31and fail the build if needed. I can even be more specific and fail a build based on specific errors.
00:09:38For example fail the build if there are any keyboard accessibility errors or if there are interactable role errors.
00:09:46So this was the init.
00:09:48Then i call the start to begin the scan.
00:09:52At the end of each test i call the stop command which results in an accessibility test report in the Cypress console
00:10:01In this example we'll be running two tests,
00:10:04the first one is just opening the page without doing anything else.
00:10:09Evinced will run on the page and check just that page state for accessibility issues.
00:10:15The second test which is more common in UI automation, is an actual functional test
00:10:22it checks one of the main functionalities of my website in this case selecting some properties within the main form
00:10:29while clicking around and interacting with the page.
00:10:32As we do that Evinced will be running in the background and scanning all the mutations
00:10:37of the DOM, and the different page states that are exposed during the interaction.
00:10:42It will collect all the issues into one aggregated report.
00:10:46We call this continuous mode.
00:10:50Okay that makes it two tests.
00:10:53Let's go ahead and run them.
00:10:55This is the terminal,
00:10:57first we start the Cypress system, and this is my example integration test with the two separate tests
00:11:06We can see the two tests are here the first one just opened the page, and let Evinced run in the background,
00:11:12and the second one involved interacting by clicking around over these drop down menus,
00:11:17and clicking the search form. Here too Evinced was running in the background.
00:11:24As we mentioned earlier the page is passing the tests just because we set up Evinced that way,
00:11:29but when I open the test I can see on the "after each" section all the issues Evinced found in this area.
00:11:36This is also connected to the Cypress DOM snapshot so I can click and pin specific dumb snapshots
00:11:43and see what the issue was.
00:11:45If I right click and choose inspect, and go to the Cypress console
00:11:50I can see a detailed report. For example we have a short summary a detailed description of the issue.
00:11:58We can see the element, and the DOM snippet that was involved.
00:12:08relation to the look at compliance, and more.
00:12:12What we just saw was for the first test that only involved opening the page.
00:12:17In the second test which was the interactive one, we can immediately see that Evinced found more issues.
00:12:24Actually four more issues.
00:12:26They are actually hidden inside these drop-down menus on the page.
00:12:31Since Evinced is running in the background and this test had more interactions
00:12:35exposing more DOM elements Evinced found more issues.
00:12:40As you can see,
00:12:42the Evinced Cypress SDK
00:12:44gives you a powerful way to add accessibility tests to your existing UI tests, with very little effort.
00:12:51Thank you for watching.
00:12:53For more information visit us on our website,
00:12:55knowledge base, Medium blog and Codepen profile.
00:13:11iOS accessibility debugger.
00:13:14Let's say that you are tasked with making your iOS app accessible
00:13:18Evinced can help detect and pinpoint accessibility issues and suggest fixes for developers
00:13:25Start by creating a dev build of your app with the Evinced SDK.
00:13:30we currently support cocoapods as an SDK injection mechanism
00:13:34but we will be adding more in the future including Swift packages.
00:13:39Add the Evinced SDK as a dependency in your app, and create a build.
00:13:46Now install the app on your phone. We are using the Daily Dozen Nutrition Facts iOS app in this example.
00:13:54Separately install the Evinced desktop client on your Mac or Windows PC, and log in
00:14:09Next you need to pair the phone with the Evinced desktop client.
00:14:13To do that shake your phone to get to the Evinced menu, and scan the QR code you see on your desktop screen.
00:14:22After it is scanned remember to turn on switch control.
00:14:26The next step is to start your app and browse to any screen
00:14:30then in the events desktop client
00:14:33click scan and Evinced will show you the iOS app screen in the desktop client
00:14:39and highlight any accessibility issues that are discovered.
00:14:43With time we will continue to add more validations
00:14:46like focus order, gesture conflicts, target hit size problems, and many more
00:14:52So remember to keep your desktop client up to date.
00:14:56After you're done with your analysis you can easily export an HTML report of the results and share it with your colleagues
00:15:05In this video we saw how to use the Evinced iOS SDK and desktop client to automatically discover
00:15:13and pinpoint accessibility issues in your native iOS app and see suggested fixes.
00:15:19We would love to hear your feedback.
00:15:21Reach out to us via the feedback button in the Evinced desktop client
00:15:26or email us at support@evinced.com
00:15:30For more information visit us on our website or knowledge base.
00:15:34You can also find morebinformation in the SDK guide or the user guide
00:15:40Thank you for watching this Evinced training video we look forward to being in touch