[Grace Kirkley] I, everyone. Welcome to the webinar. We are going to get started in just a couple of minutes. Hello again. Thanks for joining. We will get started with our presentation in just a minute or so. Hang tight. It is 2:00, so I'm going to go ahead and get started. Welcome, everybody. Welcome to the second axe Monitor refresher webinar, today we will be focusing on common issues and page groups. Before we begin, I will go over a housekeeping items. My name is grace, I will be helping to facilitate today's webinar. Just to let you know, everything in today's webinar will be recorded and shared with the registrants after we wrap. 

If you missed the first installment of our axe Monitor webinar series, I will share that in the chat with you. That is recorded and you can refer to it at a later date. Halfway through we are going to have a couple of minutes to go through Q&A and then we will also revisit Q&A at the end of our session. As a reminder, this will be a 90 minute session because we have a lot to cover. If you would like captions during today's presentation, you can use the closed caption button located on your Zoom window. Otherwise you can use the stream text link which I will put in chat. 

You can follow that along in your browser. With that, I will hand things over to our presenters. Thank you. [Weston Cagle] Hello, everybody. I am Western, accessibility product specialist here at DQ. I'm going to be one of the presenters today going through the demo process on how to set up page groups and defining and setting up common components within axe Monitor projects. [Sailesh Panchang] I am Sailesh Panchang, customer success strategist, so greetings and welcome. It would be great if you could send that by email later on. Screen readers like me in the call find it easier to get it in their emails. 

[Grace Kirkley] I will make a note to put that in there. [Sailesh Panchang] Thank you, grace for facilitating this. Greetings to the second session in the refresher series. So the X Monitor refresher series we started adjusting this year. Axe Monitor is the workhorse of the Deque accessibility tools. And this is designed for users -- the intent is to get it to greater details of a couple of topics within Monitor. The introductory sessions that you were all introduced to at the time of implementation, we have covered the entire gamut of axe Monitor. It went through axe Monitor, the features and how you set up scans and how access the feature guided, covered all the features of axe Monitor in two or three sessions. 

That was a lot of information. You started using axe Monitor, but there could be certain features that you may not have used as much or have had time to study from the user guide. So these presentations will look at a couple of topics at a time and get into greater details of each topic. That's the intent of the refresher series. It will help you to get greater details of the different features of axe Monitor. What's the expectation? The expectation is that all of you have access to acts Monitor, have the ability to create projects, and it's not expected that you are signed in right now, but we expect that your focus is on this presentation and are not actually doing things in Monitor at the same time. 

That's the only expectation. The road map, what do we have planned, what do we have planned for the series? Ask greece said, the first session we had a couple of months ago, the focus of that one was mainly how to scope projects. How to ensure that your project is pulling the pages that you intend for it to pull. So how can you actually set up projects which are smaller in size of thousands of pages, what can you do in order to control that. That was the scope of that first session. You touched upon the iterative nature of setting up scans. 

That was covered in that first session, the second session the focus is mainly on another topic within Monitor, how to use page groups. We will cover that in a moment. And how to use scope definitions of templates to define-- identify common issues within pages so that those issues don't get repeated across pages. That's the purpose of this presentation. There are other sessions that we have planned. There's going to be one on axe supports. And the one on different way of getting information out of Monitor how you can save files in different formats from different parts of the project, different parts of axe Monitor. 

That's a session called data management within axe Monitor. And then we're also going to have a session on scripting, setting up logging scripts, workflow scripts, that's what we currently have planned. These are about a 90 minute session that we are going to do. They are going to be every month or so. So now let's focus on this current session. This current session we are going to cover 2 topics, page groups, and setting up scope definitions so that you can identify Common issues within your projects. So let's dive into page groups. So I think Western has pulled Up-- 

Weston-- project. This this looks a little differently. Normally when you run a project and run a scan, you have this snapshot table at the top that shows a single row. Project name, the total score, and the total pages, and how many pages were critical and how many pages here. There's a single data row. In this particular project you will see the snapshot table, that there are other rows below it. Page groups are essentially a technique within an axe Monitor to be able to pull Distinct dashboards for distinct sets of pages within your project. In the last session, we saw how you can set up scans that are very closely defined so that the project size is small and doesn't run into hundreds of thousands of pages. 

But sometimes you may have the need to set up a project that is large, and maybe a few 100 pages or more. In that situation, you would be able to set up page groups that will support different subsets of pages within that project-- you can have a page group here mike you can compare how different sections of that website are doing. You get a score for each of those substance or collections of pages within that website. Now, Western, you want to demonstrate how we can get into a particular and pull up your dashboard for one of those. 

[Weston Cagle] As Sailesh mentioned, I have a dashboard where there are multiple page groups, each one having a line with its individual accessibility explorer and the total number of pages that exist within that page group. So just ask this project has its dashboard that includes automated issues, each of these page groups is going to have its own individual project dashboard. Clicking into the first one labeled Curriculum, it has 100% score, so there are no automated issues. If I go back to that previous screen and click on one of these page groups that have issues and a score that's not 100%, you will notice that that particular project has automated issues as a normal project dashboard would have. 

[Sailesh Panchang] So when you click on one of those links from the main dashboard, you get to a dashboard as if you Set up a dashboard on that section of the website. That's the utility of page groups. Now, there is one limitation here, if you are using axe support to, you can't use individual based groups that Are presented axe support. You can't have the entire project. In this case there are some 900 pages, if you were to push this, all the 900 pages would be represented within the actual project. You cannot-- if you need to do that, then it's best that you define a project that doesn't use page groups, but set up a project for each of those smaller items separately. 

And now let's get into the process of how page groups are created . Weston, you want to demonstrate that? [Weston Cagle] Absolutely. I'm going to switch to a project,, the Mars commute project without any page marks mark notice that there aren't any lines below the snapshot for Mars commuter project. Where do I start? Where I would start is within the pages tab itself for this project. So for this project I'm am going to the pages tab in the main navigation, making sure that I'm in the correct project. And then taking a look specifically at this project, or at the pages table, table below on the pages screen where it shows the full list of urls and page titles that axe Monitor was able to complete. 

I am going to expand this to include the pages so that I can take a look at the folders or the URL specifically that I would like to set up page groups for. If you are unsure which page groups need to be set up, this is a great way to look at the URL's app axe Monitor was able to scan, and you would be able to get a better idea of which groups of pages need to be grouped together as page groups. So what I am noticing first is that there are a large number of urls that contain the word correcte and if you remember -- 

each group and I set up within the project specifically. Your curriculum is one that I might want to set up as a page group. Just to show the phone number of urls that contain that word, I would search the word curriculum in the URL contains filter. Click on search, and I will notice that 48 URL's contained the word curriculum and all of them are within that curriculum folder within that website. To show that this is the exact same number of urls that were in the initial page group, I will go back to the dashboard for that initial project that we were showing, and you will notice that for this particular curriculum page group, the total number of urls within that group is 48. 

So axe Monitor is able to group all 48 of those urls within the page group upon setting up the page group properly. [Sailesh Panchang] Often you could click on that entire link, and you can download that into a CSV, and you can sort them by the URL. That way you can look within excel you can use accounting function, for different folders or what have you, and check out how many pages are there in each category. So when your eyeball them, large number of pages within the CSV, you might get a better idea which of them needs to be defined as as a page group. 

The best way is if you know, you are familiar within your website design, and do you know within this large group of pages you want a separate group for category X or category Y. If you know that, that's the best way to go about it. And you can also check within your design team or developers to find out what makes sense within that large project. And you can define page groups for those specific groups. So that is the other way to do it. And the technique that is used is the use of something called the Javascript construct, regular expressions. 

So we need to define page groups using regular expressions. The user guide contains help on how regular expressions are defined. And regular expression will look at the URL and a substring within the URL or a folder name or something can be defined as a regular expression. You do this from the settings screen. I think Weston will be able to demonstrate how for this particular project we have set up page groups. [Weston Cagle] Absolutely. You will notice that here I am in that Mars commuter project page groups that I was initially on. The place where you would go to define these page groups is the settings tab. 

So clicking on the settings tab and clicking on project, getting to that project settings screen. Within these sub navigation you have general users, testing standard, scan settings and then you have the page groups tab. This is the tab we're going to use in order to set up the page groups. You will notice that I have already come through for this project and added several page groups. I mentioned curriculum, checklist, resources and so on and so forth. And within that table it has the regular expression that Sailesh was mentioning. There are a few different types of expressions that you could utilize in order to create a specific page group. 

One of which is if I am wanting to include a folder, just as I have in this curriculum option here. The user guide is a great resource to show you how to set up different types of page groups, whether that be page groups within a folder or page groups that are containing a certain word, has the duplicate page group is here. One thing you want to make sure as you're keeping in mind when you set up your page groups is that you're setting them up intentionally so that you don't have overlap. Each peach group is containing a unique set of urls then another page group. 

In order to set up page groups, you will click on this button. I'm going to design Page group a name. I will go ahead and put duplicates, and these are some of the examples that I have. Since I am wanting this particular page group to include all pages that include the word duplicate, I will use this regular expression, which is not star, the word duplicate, and then followed by period star. I will go ahead and click on create. I am getting a notification that this group already exists, however you will notice that this particular page group will be added to the list as the group name duplicate followed by the particular project domain, and it's a regular expression that is associated with that page group. 

[Sailesh Panchang] You will notice that if you look, Weston set up quite a few of those page groups that are based based on the folder name. If you look at the regular expression, except for the name of the folder, everything else within that regular expression is the same. It begins that you have these star dot etcetera, the backslash and all of that is the same. So you can copy this if you want to create a regular expression for a different folder, you can copy this and just change the folder name. Let's take a look at the user guide. 

So you can get to the user guide from the top. [Weston Cagle] So I am navigating to the user guide. As seen in the last session of this webinar series, accessing the help guide of the user guide will reflect information for the page that you are currently in or on within axe Monitor. As I was on the page group screen, the information within the user guide surrounding relevant page groups will populate. And then we are going to want to navigate to creating a new page group. Here the user guide telling you how to create page groups, what an example of regular expressions are, and so on. 

[Sailesh Panchang] So you notice that there are examples where folder names , there are also examples where the URL contains questionmark and something, questionmark product code equal something else. So you can pick any sub screen both the URL and frame it with a regular expression, and that can be group. If you look at the settings page for page groups, you also have the ability to add a regular expression. It can add one regular expression and you can add another. So if you want two folders to be defined as part of a page group, you can do that too. 

That's certainly a possibility if that's your need. Touching upon a point at Western made About overlaps. Consider you have an URL the Deque.com/-- you can define-- and that will pull up everything within the product folder. At the same time, suppose on the Deque website you have Deque.com/customersupport/produc t/
 have your urls like that, even that particular URL would get pulled into the one that you defined for slash products. If that's not your intent, if you wanted only Deque.com/products those that are in customer support slash product, you would have to make sure that your regular expression is designed accordingly. 

Your regular expression would not just have slash products, but it could also perhaps include part of it, storycouldinclude.com could include-- so that way you know you could include the product folder right from the root of the directory. That's an example of that overlap. So you need to make sure that the page, the URL that you you are pulling, doesn't get into two or three different page groups unintentionally. Do you want to go back to the beach group screen, the product dashboard, and we can open that for questions. [Weston Cagle] I am navigating back to the product dashboard. 

And we can open it up for questions. [Grace Kirkley] Just as a reminder, if you do have any questions, feel free to pop them into the Q&A module in the bottom of your screen. To kick things off, the question here. How many pages groups can be defined for a project? [Sailesh Panchang] Well, It depends on your needs. I seldom have seen a situation where you have more than half a dozen page groups. So of course there is no limit. You can have any number of page groups, but it will make your dashboard look pretty difficult to consume the data on your dashboard, whether you have a large number of rows rows within that, you might then want to break up that entire project into at least two projects or three projects and then define page groups for each of those. 

That may be a better way to do it. There is no limit as how many page groups you can have. Typically 5, 6, seven would be a good number of. It doesn't mean that the entire count of all the pages within the page groups has to add up for what you have at the top. Of course you can do that, but your intent is to identify the major subsections within your project and use that as a page group. [Weston Cagle] If you don't mind, I might add on to that a little bit. It is the potential that the more page groups you define, differential higher risk for overlap is possible. 

The more folders you intend to set up as page groups, as Sailesh was mentioning before, you run the risk of creating overlap between those page groups. [Grace Kirkley] Thank you. Question here. Is the backlash the only escape key or known rejects, REGX? [Sailesh Panchang] Backslash is the escape key, that's not part of the syntax that Deque has defined, it's just a regular expression of construct of the escape key, part of the regular expression that we created. So the backslash is the escape key there. [Grace Kirkley] Great. While the accessibility score for a project included the overall score for all of the page groups? 

[Sailesh Panchang] Yes, it does. The top row that you ssee --see Is the accessibility score for all the projects come up with all those 900 pages. When you look at any of those page groups, if it's those 48 pages, it's the score for those 48 pages. If that is a separate independent project. That is a comprehensive score that covers all the pages across the project at the top. [Grace Kirkley] Got it. Another question? You missed in folders and parameters for page groups. What are all of the different types of page groups that can be created and when should they be used? 

[Sailesh Panchang] We said folders is 1 common instance. Parameter pages. As they give you an example of product codes or any of those, equals something within your URL stream, that's one way of doing it. It could also be a substring of the URL. To give you an example, recently there was an airline for which we set up page groups. The substring in the URL was flight-from-, and then there was a flight-from Charlotte-- I was flights from Denver. If you wanted to set up page groups for each of them, you could do that. If you wanted all the flights from URL in one category, you could do that too. 

You could just say flights-from-, and after that you would have the star and forget the Charlotte or Denver or whatever other name it was. All the flights from pages would be pulled into a single page group. It is entirely your need. You can write a regular expression that suits your needs. [Grace Kirkley] What would the benefits be for creating page groups to obtain the snapshot versus not having that in favor of axe Report? [Sailesh Panchang] So in axe Reports, currently the abilities only to to include the entire project, so not the page groups. Axe support, you can define the entire project to be included within ac axe support. 

You cannot define individual groups to get into axe support, that's the way it's supposed to be designed and you can relate a project, but not page groups. [Grace Kirkley] Thanks. It looks like the end of our questions here. And if more come up, we can address them them at the end. [Sailesh Panchang] We can pick them up later on. Sorry about that. We can move to the next topic here. That is common issues, how do you identify common issues? What is the purpose of this topic? Essentially web content web pages, as you park where when they are designed to, nobody codes web pages by hand, so it's always content aggravation, management systems come in. 

Components that are shared across web pages and sections of web pages. So you have those components that are occurri components that components that appear on different pages. Issues that you're in a component component to be reported on every page that that component is used. So if you have -- your pages 500 pages coming you don't want 500 issues to be be repeated, so you would want-- that's the purpose of defining combinations. You get a more realistic count of issues when you use and final what are called scope definitions, or templates to identify or isolate common issues. 

And people come up your remediation, web pages, they will be extremely pleased if they see those issues just once they know where they they have to go and where to fix it. Color contrast issue in a Footer --- to be repeated every page count so be done the Footer in-- they know that they need to go and adjust the CSS for the Footer section. So that's the benefit of setting up scope definitions and identifying common issues. One other benefit sometimes is when you are defining scope definitions is that you might end up with a better accessibility score. 

That's not always the case, but it could happen. And how does that happen? The accessibility score is a weighted average score based on how many critical pages come how many seated pages there are on that project. Suppose it's a common component of the mini bar that has that critical issue, and nothing else, no other issue on the page is of of that magnitude. It's not critical. If you were to segregate the items in the mini bar into a common component as a common issue, that would get repeated, that would be reflected as a single page. 

Not all pages would be reported as critical, but one page would be reported as critical. Now what Weston has on the screen is a dashboard and has not just the automated issues table, but you have these snapshot at the top, the snapshot table, and it's followed by common issues table. So the common issues are reported for what's called a template that has been defined for this project so all issues that are found in the template would be reported in that common issues table. And then you have the page level issues reported in the table that you see that follows the common issues table. 

That's the regular automated issues table that you see. So that is how your project dashboard will appear to you whenever you set out common issues. The process of doing this it's not too complex. It's just a two step process. Just like for page groups you went into settings and page groups, here you go into settings for the project and then there is a tab for scope definitions. That's where you go and define the common components that occur on that template page. So we will get to the details of actually doing that in the next few minutes. 

So that is step one. You are defining common issues or common components on this page, and then you define what page needs to be be used as a template. You do that from these scans page. Go to these scans at the top, the scans menu, and there you edit the scan and you add a template URL. Ordinarily you would have these single task that would be the start URL for for the project. And now you would define a template URL also from this particular page. In order to do this, so these are the two steps that need to be accomplished-- 

in order to do this there are some data that needs to be collected, some analysis that needs to be done. We will show you how to identify the common components and the selectors for that. That will follow on the next section. So you want to go with these steps, Weston. [Weston Cagle] So these apps that we are going to cover here for common issue management is identifying common components. So what that means is which common component needs to be set up within your axe Monito Monitor project. And next is to add a selector for component as this cop definition. 

And following that we are going to briefly cover how to identify template pages, adding a template page to your project, and then what you would want to do after you have done that is start scan and review the results and make corrections to selectors or templates templates as necessary. So I think Sailesh is going to describe a little bit about common issue strategy and how to identify identify the common issues. [Sailesh Panchang] Thanks, Weston. [Weston Cagle] Absolutely. [Sailesh Panchang] So how do you identify the common components within your website? The best way is knowledge of the website. 

If you're familiar with how your website is laid out, and you know that you have a header area, search form component, a Footer, or in certain parts of your web application you are using the calendar widget. If you know that, you can identify those as common components. Often is also a good idea to collaborate with people who have been involved in the design slash development of the website. So if you do that, the the benefit is they will also benefit from the output of axe Monitor. So once they have a hand in the design of the scan, they will wait for the results of that scan. 

So using their to identify identify what common components have been used. So that is the ideal way to identify common components. And there are constraints and you can't do that, the other way is to look at the project dashboard. So from the project dashboard, you are able to analyze and identify issues that could be pulled into the common issues table. How do you do that? Now let's look at a project, the same project that Weston showing you earlier, the one that doesn't have any common components defined. So you want to go there and describe that? 

[Weston Cagle] As Sailesh said, I am on the project dashboard for the exact same website. The only difference being scope definitions have not been defined here, and notice how you are not seeing any common issues table. Within the automated issues table, you have the option to view the number of issues and the number of pages. So Sailesh mentioned wanting to review the project dashboard or critical or serious issues with large accounts that appear on a large percentage of the pages. Things like these top three issue types are great candidates for this. So what you would then do is click into the issues for one of those issue types, and you will notice that a lot of the elements source code it's pretty much the same or exactly the same, and that's how you would know that a particular element that you can set up with using scope definitions. 

[Sailesh Panchang] So that code up here is for repetitive. So you can analyze that particular page and see whether-- and another page, and you will see that the same issue occurs on that page, and that way you will be certain that that is something that can be pulled into a common issues table. So we are analyzing data from the project dashboard is the other way to go about it. Weston said look at critical issues and serious issues. Yes, because when you look at critical issues with the large count that impact the large amount of pages in the project, if you isolate those into the common issues table, you might end up with a better score for your project, but that doesn't mean that those critical or serious issues are the only ones that you need to-- 

you could also be other issues which have a large impact and could be minor or such. Even if you do that, even if you pull goes into the common issues table, you have the benefit of being able to address them in a single place if there are ways to running component. Any of these issues which have large counts and impact a large number of pages within the project are good candidates for identifying-- for pulling them into a scope definition. [Weston Cagle] So Sailesh and I have mentioned a few times now a template page, or exactly what the template page is. 

So Sailesh it's going to describe what a template page is. [Sailesh Panchang] A template page is any page within this collection, within the website that you have scanned, so any of those pages can be defined as a template page for the purpose of this analysis, for the purpose of this project. A template page would have the common sections that you want to identify for that particular project for which common issues need to be identified identified. That would be a template page. That could be any number of pages that could qualify as a template page from within your website, if they have those common components on them, that could be a template page. 

A template page is defined by its entire URL. When you are defining, the scans page, that's how you would define the template URL. The template URL would appear if you go to the page section. If you go to that project where we have set up scope definitions, so if you go to the pages tab, you will see there is a filter which will let you identify which is a template page for this project. So if you select the template checkbox and search, then it will show you that page that has been used as templates for this particular project. 

A template page would be listed twice for this project, once as a template and once when it's scanned as a part of the regular scanning process, when you start from the start URL and through the website, that page will again get picked up. The difference is when it scans the template, only the issues in the section that's identified as common, have been defined for the template, only those have been identified on that template page. But when you scan it from the task URL, and the issues that are found in other parts of the page, those will be listed against that URL . 

So you will see the template page listed twice over here. The other point is that a large website, sometimes you may have to define more than one template. Sometimes there could be sections or comment sections, sections that are common to a few of the web pages. So your website is 1000 pages, you might find there are patterns within those thousand pages. There are sections within those thousand pages that are applied to 300 pages. You may find some components in those 300 pages, and then some other 400 pages you might find other components,, so you might define a template for those other pages, which is separate from the template you defined from the 1st 300 pages. 

Depending on your project and the design, you might have more than one template of each as well. [Weston Cagle] So we talked about how template bridges are identified, about how are common elements defined, so the types of elements-- different types of elements are identified by selectors. Axe Monitor will identify a element by selector, and there are four types of elements that are used based on the element source code. The different types are ID selectors with an example id=topnav, and then the select --selector For that particular source code would be #topnav. Furthermore, there's an element source code example or element name, and the elements source code example is form action equals Search.php method="get" Followed by an end form. 

And therefore the element selected for that would be simply form. There's also dots selector or CSS selector or the source code example might be be class equals, and class equals footbox last is the example that we have identified for this type of selector. The selector might be for that element .footbox.last. Finally, there might be a need for identifying an element based on its qualifying by its attribute. First code example here is UL role=menubar. The selector selector for that would be brackets, role=menubar. And those are the ways you might select elements based on the source code. 

[Sailesh Panchang] That's good. So now I would like to go to a webpage and pull out a selector. [Weston Cagle] Absolutely. Before I do that I will go over what we will briefly go over here, which is how to identify these selectors. Via the website itself, navigating to the elements source code, or the source code within the web page, followed by using the element source code provided by on the issue screen within axe Monitor. So I'm going to navigate to a website that was used to set up the project that we were just looking at in axe Monitor, which is the least A11Y her site set up by Deque. 

I set up in the previous session, accessibility issues, and it's used mainly for demo purposes. How do I go about electing the elements for this demo? The top section here, the header, the navigation bar and the search form. If I navigate to a different page within this website, you will notice that the same components or elements are present on this page as well and so on and so forth as I click through the website. Another common element that I am noticing that is the stream on each page is this quarter. Based on my knowledge of the website, I will begin to define a scope definitions from axe Monitor. 

From this axe Monitor project that
 doesn't have scope element definitions defined, I'm going to navigate to the settings and I am going to go to the project settings, and as Sailesh, Clicking on that scope definition tab within the scope settings. And from this website, I am here on the website and I am going to want to right click and then inspect, select the inspect option from the menu after I right click, noticing that this will pull up the source code for the website, and I have the option to navigate to certain elements within this source code. 

First and foremost, I am going to identify this header, which is div id=header. Right click on that element, navigate to the copy option and select select or from the side menu that populates when accessing the copy option. After I have copied that selector, I then have that particular element source code identified. So within this particular project, I can then go to the scope definitions page, click on add scope definition and it type in the word header, and paste that selector that I copied into the selector field and click create. [Sailesh Panchang] My name can be anything clear my header or something that allows you to identify that that's the header section. 

On the previous screen, when Weston was talking about types of selectors, there's one that said element name and he showed you an example of form. You often have header as another element, so sometimes at the top you just have the HTML dag header, or at the bottom you have the HTML tag Footer. So those are elements you could directly use as elements to identify a section-- component identifier. [Weston Cagle] Just to Sailesh's point, Identifying this particular search box, which is going to present the source code for this particular element for the search box, you will notice that this element name is form. 

Within X Monitor, scope definition screen, you will notice I have added a search box, scope definition and the selector is scope form. Sorry, I was just going to mention just as the options showed within the slides. [Sailesh Panchang] The benefit of doing this is when you pick up the entire component named, that component might have more than one accessibility issue. For instance, the search form, the field for the search form, the text box might not have a proper label, or the button for submitted the search may have a contrast issue or something like that. So if instead of picking up individual elements you pick up the entire container. 

So that entire container component is what's common, is what's used across the website in different pages. So all issues within that component would be flagged as common issues. So it's always a good idea to navigate to the parent or the container rather than a particular individual element. Sometimes you get contrast issue flagged for a list type or something-- the anchor text is not discernable, and you might have that for multiple links. So it's not a good idea to flag each of those links as they come in item . It could be a list, UL, a Footer with some-- 

so it's always a good idea to pick up the entire component . And define that as your common component. So Weston showed you a method of inspecting the code and identifying the components. You also have the ability to look at just the issues within axe Monitor, and if you're lucky you might be able to pick up an appropriate selector right there from the issues table, so without having to do a whole lot of work like expecting code and trying to find what the selector should be, you might have to hand it over to you in a Platter right there with the issues table. 

So maybe there could be an example of that somewhere. [Weston Cagle] So I have pulled up a separate project where you will notice that this element source code looks a little bit familiar, as it is the example that we use or element name qualified by attribute. So the element being UL equals. It would be a great example of source that you could use from that issue screen and be able to identify the selector for that element . Scroll by this particular element would be UL in brackets roll equals menu bar close bracket. [Sailesh Panchang] So here sometimes you would have div id= something, div class = something. 

So you might see that in multiple rows, and you might see many issues that you can navigate to some other part of the issue screen, say table 5, and you will see the same code being repeated there. So you know that this is a common item that impacts many pages. So you would be able to pick up that class selector or ID selector, straight from the source code display in the issue screen without having to inspect code. So that is the way-- that is that the homework that is required in order identify identify the selector. 

When you have the selectors identified, once you know what page has these common components, then you are ready to define those within acts Monitor and get your project rolling. [Weston Cagle] Absolutely. On this particular slide, the next step would be to discuss the specific actions or user flow within axe Monitor once you have gathered all the information and identify telephones, identified template page, you can then go into axe Monitor and perform those two step process at Sailesh alluded to at the beginning of this section of the webinar. The process is rather simple. Going to the settings tab, clicking on project for scope definitions, clicking on the scope definitions tab within project settings, adding a scope definition by clicking on the add scope definition button, and in putting the name for the element element or common components, and inputting the appropriate selector and clicking on create. 

The next step after that would be to take that template page that you defined that showcases or contains all of the common elements that you find by scope definitions and creating that template page via scans tab, edit, screen, adding a task URL, input in the URL for page page, clicking on the use of the template button, clicking done and update update. We will go through that right now as a way to show exactly how I would go through that specific flow. What I will do is I will navigate to the project dashboard for the A11Y test site that has no scope definitions defined, and now we'll go to settings, projects, click on these scope definitions and I will add a scope definition here. 

Navigating to that website, I will scroll down to the Footer, inspect, find the specific source code for the Footer. I will use the copy selector option. Go back to axe Monitor, where I'm on the scope definition screen and input the name Footer because that is the appropriate name that I would like to use. Based deselected that I found, click on create, and you will notice that these scope definition has been defined and added to the list. Now I have previously added two other scope definitions to this particular project, header and search box through the process of this webinar, now I want to picture that incorporates all three of these common elements. 

What I would do is go to the skins tab, click on edit action under the edit column, and add a new template page, so axe template page that can be used is the one that I am on right now, which is web testing course. Dequecloud.com/-- so I will go ahead and copy the URL and add it to this list by clicking on add task and inputting the URL into the URL input field, and I will click on use this as a template option, and click done. Beyond that I will click update to make sure that all of my additions and changes have been saved, and I will start a scan. 

[Sailesh Panchang] Those are the steps for setting up a project. And you can show for this particular project how the score changed. [Weston Cagle] So project dashboard, you will notice that the project without any scope definitions defined received a score of 0, all pages are critical, and then a project where the scope definitions are defined and common issues are present from the project dashboard. You now notice that the score is 23.16%. Simply by identifying these common issues, you are able to increase the accessibility score because four of those pages that were once critical issues are now good pages. 

[Sailesh Panchang] So that is the other benefits. Sometimes you might divide by defining scope definitions. So I think we have enough time for question and answer session. [Grace Kirkley] Let's get into some questions. First question, can both page groups and common issue tables be defined for a project? [Sailesh Panchang] Yes indeed, you can do that. There is no restriction in that. You can have a project with page groups and the scope definitions. They are unrelated, so you can have a project that has page groups and then snapchat pages, and you will also have a common issues table and the other automated issues table, so all of that can be 1 dashboard if you need. 

[Grace Kirkley] Great. Is there a best practice that set up scans with common issue? [Sailesh Panchang] Best practice in the sense, if your intent is to identify issues that are common, because they're not just developers that are going to be fixing issues, but accurate reporting of the issues on the website. From that point of view, it will give you an accurate idea of how your website is doing. It's always recommended that you put in that extra effort to define common issues. It's easy to just say scan Deque.com and start the scan. But if you identify the templates, the common issues containers, you get better results from your dashboard. 

[Grace Kirkley] Thank you. Have a certain components don't have issues, should they still be identified the project ? [Sailesh Panchang] Yes. Because you never know. Content keeps changing and content can get added to components. Today the component doesn't have changes, but in your next iteration of the website or the next thing that happens to your website, something gets introduced unintentionally. So if you know that this is a component on your website, it's a good idea to have it there. So if there are no issues, nothing will be reported. You might not have a common issues table at all, but two weeks from now, next month when you run something, suddenly the common issues table might pop up because that component has an issue. 

[Grace Kirkley] Great. Thank you. The accessibility score is based on a calculation of issues, how does identifying common issues affect the score? Are the same number of issues still there? [Sailesh Panchang] Yes, the same number of issues are still there, but the way the score is computed is it's based on classification of the pages. So when you have 100 pages and 70 pages are critical, you get a weighted average in order to calculate the score, the critical pages getting width of 0. Of the page is 0, it gets a weight of 0.4. Of the pages moderate, it gets a weight of 0.8. 

And that's how your average weighted score gets calculated. If your page is critical just because an issue in a common component, that page is going to be created as critical. If there are no other issues that are critical on that page, that page might get a grade of moderate or even good if there are no other issues on that page. That's how your score can change. It's based not on the count of issues on the page, the count of issues may still be the same across the website. How the page gets created. So that's important. 

[Weston Cagle] And that's kind of what I was alluding to before when I was showing the difference in score between the project that had common elements defined or scope definitions defined and the same project that they're not. The difference in critical pages on the project that did not have scope definitions defined was 18, and you will notice that I have the project dashboard pulled up for the A11Y test site that has have scope definitions defined and a critical pages are 14. So the difference in identifying that's called definition was a difference in the number of critical pages that was identified. 

[Grace Kirkley] Thank you. What is the add selector button on the scope definition screen? [Sailesh Panchang] You want to take that question? [Weston Cagle] So going to the settings tab and going to the scope definition screen, if I were to click into one of those scope definitions that I had already previously defined, there's a potential for multiple selectors that you want to identify under these same scope definition. This isn't to say that there's two elements-- two selectors that are going into the same element, but rather it's adding another element to definition that you would like to define. 

So within the header, if the source code-- within this entire header here I wanted to consider this entire section from the A11Y as site as the header of this search box and the main navigation, I can add all three of the selectors for those three elements under the same same scope definition and it will tell axe Monitor that that's one scope definition for three elements. So within the header option, instead of listing the top nav and the header and search form separately, I can have them listed under the same scope definition. [Sailesh Panchang] In this example you have a row that says header and then the selector is ID equals header. 

You can also just give it a name like header-footer in one row. And the selectors could be ID=header could be 1, and then you add selector button, and instead of having two rows, you could have a single row, and the selectors for two components defined in one row. That's the only benefit. You could increase the number of rows in this table or you could have a single row. So what happens is sometimes contrast issues in different sections instead of having four rows, you might define a row that says contrast issue. In three sections of your page, if you have contrast issues, you could have a single row for all of that. 

Likewise, something about-- if you noted that in two separate sections of your website or of your web page you could probably have a name that just says audio-row, Accelerated from 1 component and then we select another component. And it helps your readability and understanding of how these scope definitions have been set up. [Grace Kirkley] Thank you for that. It looks like we have reached the end of our questions. If you have one final question, please be sure to put it in the Q&A box. Otherwise, you can look to find this recording in your email within the next week or so. 

I will also include the link to our first webinar recording if you missed it or wanted to review the material again. And to be on the lookout for our third refresher session coming in the next couple of months or so. [Sailesh Panchang] Thank you, everyone, for taking the time to attend. I hope you found this useful. If you have any questions that come up later, do not hesitate to send them to my email. [Grace Kirkley] All right, thank you so much, Weston, Sailesh, And thank you everyone for joining. We will see you next time. [Weston Cagle] Thank you. 

[Sailesh Panchang] Likewise, likewise.