Changelog 014: Meet Issues Explorer: Find and Fix Faster

Steve: All right. We’re live.

William: Looks like it. Yep.

Steve: All right.

Let’s give it a second to make sure we’re, everything’s coming through. Looks like we’re coming through on YouTube. Hello, YouTube world. And it looks like we are coming through on X. Let me share this around.

Cool. So how’s it going, William?

William: Yeah, it’s going not bad.

Steve: I hear there’s quite the heat wave over there in Europe.

William: Yeah, apparently just had my air conditioner on for two days solid. No issue.

Steve: No. Yeah, if you keep the air conditioner on, then definitely- Yeah … definitely helps.

William: It does. Yeah. I did get to sit outside in the sun this morning, which was nice.

Steve: Yeah.

William: Too hot for the dog.

Steve: Yeah. So how hot is it for you?

William: I saw 28 Celsius, which is like 70, just over 80 Fahrenheit, so actually where I am on the West Coast has not got it as bad as the rest of the UK.

Steve: Oh, yeah. 80 sounds nice.

William: Yeah, but that’s 80 outside.

Steve: Yeah.

William: Inside it was quite a bit hotter, or would’ve been quite a bit hotter if I didn’t have the air conditioner.

Steve: Oh, yeah. Very cool. Glad you’re staying cool. Glad you got that air conditioner.

William: There, my son’s very glad he’s got one as well.

Steve: Yeah.

William: But my wife turned hers off downstairs, lost the cable, so she has to put up with the heat.

Steve: Yeah. Cool.

[00:02:14] Introduction

Steve: Anybody joining, welcome to the Equalize Digital Changelog live stream.

And we try to have these, we’re now moving to a cadence of doing these each month and, that way we can ensure that we have new, cool features, exciting features for Accessibility Checker to show you.

For those that don’t know, the Accessibility Checker is an automated accessibility scanning plugin for your WordPress website to help you become and stay accessible.

We have a full-featured free plugin on the WordPress plugin repository that you can download for Free and run checks on a per post or per page basis. And we have, for more Pro users, we have a pro plugin that extends those features to allow for full-site scanning and for site-wide management of your issues, which is why we’re here today.

We’re gonna talk about some new, exciting site-wide, management features. And we also have several add-ons that go with our pro plugin. We have a Audit History plugin for tracking your accessibility over time, a Multi-site Add-on for managing your Accessibility Checker stats and licenses at the network level of a WordPress multi-site, and an Export Add-on for exporting your accessibility data to CSV files.

[00:04:00] Issues Explorer

Steve: So today, like I said, we are talking about a brand-new feature that was a massive undertaking by our team, and which we are calling the Issues Explorer. A little bit about the naming of that, William?

William: I didn’t pick the name.

Steve: Yeah.

William: Our friend Claude helped pick that name.

Steve: Our friend Claude picked the name.

William: No, I think it does make sense.

Steve: Yeah.

William: I described what the feature is, and it came up with this, because…

Steve: Yeah.

William: …makes a lot more sense than Open Issues, which was the original work in progress title.

Steve: So in a nutshell, what this is, this is a new Centralized Global Management Application for your whole site. It replaces what William said, our Open Issues Panel, but it also replaces not just our Open Issues Panel, it replaces our Fast Track Panel, our Global Ignore Panel, and our Ignored Panel. So we used to have four different pages within Accessibility Checker where you would have to go back and forth to manage all of these things.

We’ve taken feedback that we’ve gotten over many years of having that feature pro- five and a half years worth of feedback on what works in the Open Issues Panel and, what doesn’t work, what is performant and what’s not performant. We’ve collected all that feedback, all of our own internal feedback about it and, taken that and constructed it into a single application where you can manage all of those things in one place that is more performant, that gives you more tools to be able to audit the accessibility of your website

So without talking about it too much, why don’t we dive in and actually start taking a look at it?

[00:06:13] The Old View

William: Yeah. I actually did pull up the old view-

Steve: Okay.

William: Yeah … if you wanna show that first.

Steve: Yeah. Let me switch over to your screen, William.

William: Yeah. So ignore the-

Steve: The color scheme.

William: … Update scheme. This is the only way I can know which site is which. But yeah, so this is the old Open Issues page. So the previous page broke issues down by the Check, sorted by Severity, and then a secondary sort by Count.

So on this test website, I have close to 200,000 issues randomly generated. They’re not real problems, but… So if I click on this, A Slider is Present, it will load up the individual Issues for this single, for that single check. So this is what the page looked like, we have two tabs at the top, Individual Open Issues and Fast Track. We have some breadcrumbs to get back to the Open Issues page. Some information about the check itself, the number that we have for A Slider Present header, the data about manual checking this specific Issue, and down here in the table below we have a lot of mostly randomly generated Issues, but some of these issues are legitimate.

So this is one side of the original setup we had. We also have this Dismissed Issues page, which I’ll click here in this sidebar under our top level menu. So because I have so many Issues on this site, it’s slow. So now these are all the Issues that are Dismissed. So the page looks very similar to what the initial Open Issues page looked like.

We have two tabs, Individually Dismissed Issues and Global Dismissals, some information about what a Dismissed Issue is, and then again, we have the list of Checks sorted the same way, firstly by Severity and then secondly by Count.

If I were to click in any one of these Issues, so let’s just… I’ll pick this one, Zooming and Scaling Disabled. Every time you click this, it does a fairly intensive query to generate this list of the specific Issues for each of these pages. So this is effectively what the old system looked like, behaved like. We do have in the Dismissed Issues page, we do have Global Dismissals. I’ll click on that, and it will bring up a list of everything that has already been Globally Dismissed on this website. And as you can see, it isn’t the quickest because the query to generate is based on this code snippet, and that’s… It’s a very slow query when you have hundreds of thousands of Issues.

But there’s this dropdown on this page where you can change between Posts, Pages, and a Custom Post type called Archived Pages.

But if I were to go all the way to the right-hand side of this column, we have a dropdown that opens up details about each individual affected code snippet. This is the check that fails Improper Use of Link, there is thirty-two instances of this code block, and you can click on this View Pages link to access any of these pages.

It also lets you know who Ignored the Issue, when, and there’s an action button at the end here to stop the Global Dismissal. So I’m gonna click on that. It changed quickly because there’s thirty-two instances that have now been Unignored, or Reopened.

Yeah, so this is effectively the old experience.

Steve: Right.

William: Do you have any comments on this, Steve?

Steve: This is where we’ve been for five years, and like I said, you can see as William was going through and clicking on different Panels, when you Dismiss things, you now need to navigate to a different Panel to find that issue that was Dismissed. When you Globally Ignore, you gotta go to a specific page and, this is where we’ve been, and we’ve derived a lot of our decisions on where we’re going based on, all this past feedback.

All of our own… in software there’s a term called Dogfooding, and which is basically, eating your own dog food, eating your own… or using your own software, right? Which we do a lot in our audits and our remediations, and some of these things were born out of our own desire to improve this UI.

So instead of going back and forth between four different pages, we’ve now unified this into one single experience.

William: Yes. So I can pull that up in one second, but let me just walk through. So I’m gonna go back to the Open Issues page, and when this page loads, I’m gonna head to Fast Track using the tabs. So what I’m planning to do right now is Dismiss a specific Issue on a post, or Globally Dismiss a bunch of issues on a specific post.

And I have clicked this Fast Track tab. That’s just how long this query takes to generate the details. Now I’m gonna use the dropdown to change over to Posts and the page will reload. Once the page reloads, the affected code snippets will be ones that are only found in the post type. And any day now it’s gonna load.

Yeah. So on the right-hand side of the table, we have the Review Issues action. Pulling it up, clicking on Global Dismissal, and now I’ve Globally Dismissed the Issue. So keep in mind how long that took, and we will see how to do an equivalent operation in the new system.

Steve: Yeah.

William: Did, you have a screen up, Steve, or do you want me to-

Steve: I have one up unless you wanna show yours.

Would you-

William: That’s all right. I do have this, but this is an unfair comparison because this website is brand new and only has 36 Issues.

Steve: I’ve got one with about, with, about 10,000. Yeah … so we will move on from William’s lovely purple color scheme that looks like some of our listeners are, like-

William: People like the purple.

Steve: Like the purple. Yeah, so Amber said, Amber says the… Yeah, the old experience was really slow on large websites. So-

William: Yes …

Steve: This is the challenge-

William: And we’ve done a lot- … to improve that, specifically with large websites in mind.

Steve: And this is, a huge challenge with doing what Accessibility Checker uniquely does inside of WordPress that I haven’t seen many other solutions even attempt to do, right?

Whereas most, solutions that check for accessibility are doing it one page at a time, they’re not storing this, all of this data at a site-wide level for you to have everything there to manage, to track over time, to make sure that you’re staying accessible, right? and it was time for this refresh.

It was time to look at performance because, this could be run on a website with a few hundred Issues or it could be run on a website with a million Issues. And, but without yapping on too long about performance, let’s look at it. I can pull mine up, William, but I need to re-share. Let’s switch back to our lovely faces here.

Then I need to re-share the correct window. Share window. Yeah.

William: But while you’re pulling that up, I guess I can talk about… Oh, you beat me.

Steve: Yeah.

[00:14:48] Meet Issues Explorer

William: I was gonna talk about some new features that may exist in this new review that weren’t possible in the old one.

Steve: Yeah.

William: Specifically this came up re-

Steve: Pause, William, one second. Sorry, I dropped you. But we’re back.

All right, what were you saying?

William: Yeah, so we had a customer ask recently how they could Dismiss a specific type of Issue on a specific page, and while that was technically possible in the old view, it was cumbersome. Now the new view, that makes,

Steve: Yeah.

William: …both Dismissals or Reopens as well are incredibly easy.

Steve: Yeah, totally.

[00:15:38] Orientation/First Impression (Layout)

Steve: So what I’ve pulled up is my screen here, and this is a test site, so these are not necessarily legitimate… they’re probably legitimate Issues, but it’s a lot of testing and, it’s not super real data.

But, what we’ve done and we’ve taken those four pages, we’ve unified them into this new application which we’re calling the Issues Explorer, and like I said, William’s AI, came up with that name. At first, I was like, “I don’t know about that name,” and then Amber Hinds, our CEO, was like, “I like that name.” And I was like, “Okay, we’re sticking with it.”

William: It fits.

Steve: It fits. it works.

William: It does.

Steve: So if you have, Accessibility Checker installed, this now lives in one tab called Issues Explorer. You click on it, and this is a single page React app. So this now gives you an application feel rather than kinda like the more traditional WordPress Admin feel, and this opens the door for us to be able to do all kinds of unique things to be able to filter out Issues.

A high level… I’ll go through a high level overview, and then I’ll let William kinda go a little deeper on things. But, a high level overview, the layout, is pretty straightforward. It should be intuitive. At the top, we have kinda your controls. We’ve got these tabs at the top to be able to go between Open, Dismissed, or Showing All States.

So this kinda takes the… We had the Open Issues page before, and we had the, we had the Dismissed Page before. We now do that in all in one place, and we default to the Open State. And you can click on this, and with one click, you’re instantly looking at all of your Dismissed Issues. And, if you want to see everything all together, you can just click on all.

[00:17:44] Search Box

Steve: Moving down to some of the Tools here and Filters, we have a Search Box. So you can, search by keyword if you’re looking for something specific. Of course, I’ve got a lot that say Test, and I can just Filter these down by Test. And then we have our Filters. We have, Groups which we will discuss here in a minute. And we have Display Settings. And then down below is the Table of Issues with the Default Columns shown and some Pagination and some Counts, Pagination Counts as well.

So that’s the overall layout of it, and we do have a Panel that will, if you click on something, that will show, Per Instance, Per Issue details and actions that can be taken.

One big thing that we wanted to do in this is not necessarily decide all the things for you. We wanted to curate a Default View and then give you the User Tools to be able to then, make this Report, this Table look and function the way that you would like it to function.

[00:19:17] Filters

Steve: So we could first go through Filters.

Do you wanna go through filters, William?

William: Yeah, sure. So in the toolbar, we now have this Filters Button. You click on it, it opens a Panel, which contains a Search Bar as the first thing. You can Filter or you can Search for any Individual Filter you want that exists here. We have a set of, I think it’s 10 different Filters, like the Status, Severity, Type. You can also search by WCAG Level or Filter by WCAG level, Content Type, Post Statuses, which has been a common request. People wanna know whether Issues are on Published Pages, Draft Pages. So now it’s incredibly easy to do that. Check is the Rule Name. You can search by… Filter by Landmark, whether things were Globally Dismissed.

[00:20:20] Fixed Status

William: Or the Fixed Status. So we do have Fixes as a feature in both Free and Pro that can auto-fix certain types of Issues we’re certain about. You can have toggle those fixes or find Issues that are potentially auto-fixable with our built-in Fixes using-

Steve: Yeah

William: … those Filters.

Steve: Yeah. Can you expand on that a little bit why we actually added this Fixed Status?

William: So when you’re in an Individual Post and scanning the Post, you can Automatically Fix an Issue right there from the sidebar. You can click on the Issue. You will be presented with details telling you whether a fix is enable- available or not, and you can toggle it right there. But if you are using the Pro plugin and potentially full-site scan, might not- You may not be aware of all the Issues that are available to be Automatically Fixed.

So you can come here and you can see how many there are. You can also see which ones don’t have a Fix or which ones have a Fix which has been Enabled. And if that’s been the case, you will probably need to run a full-site scan to get the number then. Come in here with this Filter, we’ll let you know whether that’s the case or not.

Steve: So it’s just to help identify what’s been fixed, what can be fixed and apply those Fixes.

Cool. And, you can filter by whether or not an Issue is Globally Dismissed, right?

William: Yes. Correct.

[00:22:01] Active Filter Bar

Steve: And not Active. So a secondary component to the Filters that we’ve added in was, we wanted to not…

‘Cause of course this is a, the Filters Panel is like a button that you click open a panel that you then can make your selections. Like I only want to view Open Issues that have a Severity of High, that are problems, that are WCAG AAA, although there are none, let’s go with A. So I can curate this list instantly with the click of a button, and it filters… Like William has done an amazing job of, making this real snappy and, to be able to get to this quick.

But the secondary piece of this is when you close out the filters panel, there’s a little blue bubble next on the button that tells you how many Filters you have Enabled, but you don’t have context to what they are without reopening it. So what we did was we expanded the Filter capability into what we call a Filter Bar, which is, if you ever use, like GitHub or, things like that where you can actually, you can set a query, you can define the Query Parameters real quick in a Bar.

So you can see, based on the selections that I made in the Filters Dropdown, I now have a Filter Bar that shows Status is Open, Severity is High, Type is a Problem, WCAG is A. And if I go back into the Filter Panel and I go to Type, say I want Problems and Needs Review, which is basically, would cover all the Issues. You can now see that the Type is, it says Type is any of two, right? So we show you that there are multiple, but if there’s more than one, we do just break that down to a number.

So at a glance, this gives you really good context to what the Current Filter State is of your Issue List here in the Issue Explorer.

William: While you’re doing this, I do wanna call out something that might not be entirely evident as you Filter things. So the tabs at the very top of the toolbar, the numbers actually do update as you Filter things. So you can now see there are No Dismissed Issues that meet these Filters.

Steve: Yes.

William: And, Open and All are the same number because of course they are. There’s no Dismissed Issues Open. They’re all open.

Steve: And that’s a great point because I’ve selected my Status as is Open. So I have the visual indicator of the Filter Status. The Tab, the quick Tab Bar at the top, the Count is updating, like William said, to account for this Current Filter State. But, I can also Dismiss this Filter right from the Filter Bar. I can just click it and it’s gone, and now it’s Refiltered. But, if I wanted to add another Severity into here, I don’t have to go back to the Filter Dropdown. I can just click right on the bar here and it automatically opens it, and I can hit, “I want Medium and High Severities to show,” and it instantly updates.

So all of our Filter Bar Filters are just quick links to get back here and refilter these any way fit, Dismiss them and Add New Ones. So if I click this plus button in the filter bar, I can then just, say I want to Post Status of Draft, and I click that, and now it’s down here in the Filter Bar.

And maybe I didn’t want Draft, maybe I want Draft and Published, I just click right on it. Quick actions back to the Filters. I can add more here, remove these, and Clear them all out to go back to my Default State. So that’s the filters, we’ve put a lot of work into this UI and this UX to try to make this a very pleasant experience for those auditing and remediating Issues.

[00:26:42] Groupings

Steve: And, so we didn’t wanna just show you just a list of Issues, because in the pages that William showed you earlier in the live stream from previous versions of the plugin, that you were able, even though they were four different pages, you were able to Filter out the Issues into Groupings, like our Fast Track.

So we’ve removed the Fast Track in favor of, using Groupings. ‘Cause what it does is it allows us to work within this singular list of Issues, but then we introduce what is commonly called swim lines in, or Swim Lanes, inside of the Table here to divide things out.

Do you wanna talk through, Groups a little bit, William?

William: Yeah, sure. So the Group View that you are seeing right now is None. There is no Grouping applied in this Table at all. The Issues are listed as they’re discovered in the database, not necessarily as they’re discovered on your website. So there is no Group at all on the Default View.

We provide two additional Groups if you wanna swap or open the Group thing.

Steve: Yeah.

William: Three options in total. None, which is what as the default. We also have Check Type, which is grouped by the accessibility rule, the check. And we also have a Code Snippet View. Code Snippet View is equivalent to what Fast Track was in the old system, and the Check Type is effectively what you would see on the first page of both Open Issues and Dismissed Issues in the previous system.

Steve: Cool. Yeah, so let’s drill down on each one of those a little bit. we’ve gone through, we’ve already gone through the No Grouping State, which is your Default State here.

if we go to Check Type, like William said, this is like the Default initial page that you would get to when you went to Open Issues or to Dismissed Issues before.

And,

William: And this is sorted equivalently as well. It is sorted by Severity, followed by Instance Count. So this is sorted in the same way the old view was.

Steve: Yes. So on the left side you can see that, I’ve got an icon for the Type, which is, this is a Problem. And then I have the, Check title, which here it’s an Ambiguous Anchor Text, and then I have the Severity Critical.

And then to the right, we’ve added a little bit more context to how deep these Issues go, and it, we have Instances and Pages. In this one we have, 692 instances and 658 pages. So that kinda shows you the depth of the effect of the Issues related to this Rule.

So what you’ll notice is that, these are actually what we call Swim Lanes, and they can be opened. So when I open one, I now see all the issues related to Ambiguous Anchor Text within the Swim Lane here. So I don’t have to go to another page to manage these. They can just be viewed right here.

[00:30:14] Performance

Steve: And William, do you wanna make a note about performance here?

William: Yeah. So as far as performance goes, in the old system, all of these Issues would be retrieved at page render time, which, when I was going through this earlier, you could see with a lot of Issues the pages are slow to render because the query is intensive.

In this new system, we actually only query for the Top Level Items, the Checks, we do the Counts, but we don’t retrieve all the data about each individual instance within these Checks until you open the Swim Lane.

Steve: Yeah.

William: Now, there is a Setting, which we’ll get to later, which changes that behavior a little bit.

But by Default, these only load when required, and pulling the individual instances is the intensive part of the old query. Now we offload that to when it is required, meaning that this page can load in two seconds versus 10. Is an incredible difference in terms of performance.

Steve: Yeah, if you… I am on a local site here, but if you can catch it, you can kinda see the loader for just, a split second when I click on this, when it queries for the, Issues related to this, Check.

William: Yeah, and there is some options that allow you to change how many items that appear. If you’re on a shared host that might be having Issues retrieving all these Issues, you can actually reduce the number that it finds per Lane.

Steve: Yeah.

So we can do that in the Screen Options. This is your traditional Screen Options in WordPress. There’s two Pagination Settings here: one for Items per page and one for Max instances per group. These default to 20. If I increase this to 50 now and I hit Apply, and I open this up, I will now see 50 Issues within each Swim Lane under each Check. One thing to be mindful about this is the more you add, the more performance implication that there may be.

For display purposes, the performance isn’t too much of an issue because we do have a max here of 500. Where you might notice some implications on performance is if you’re running a Bulk Dismiss Action, that may, it may take a little bit of time if you’re viewing 500 Issues or Dismissing 500 Issues at a time.

I’m gonna set this back to 20.

[00:33:05] Side Panel

Steve: And so yeah, so this is the Group by Check Type. And of course, when clicking on any of these will open the same Side Panel, which we will discuss in depth here in a little bit.

All right, so the next Group Order is Group by Code Snippet. And as William stated, this is the replacement for the Fast Track.

And, these are Swim lines as well, or Lanes as well. And, you can see in each Lane, you can see the Code Snippet, and you can see the Severity. And what’s interesting about this first one that I’m showing here too is that, a Code Snippet can actually pertain to multiple Rule Checks.

And, we wanted to kinda give you a little indicator that what we’re doing is we’re surfacing the most Critical Severity Level, which here is Critical, the Highest Severity Level. And but there actually is a Severity Level probably lower than this that pertains to this as well.

And then to the right of the Lane here, we show the Number of Instances and the Number of Pages affected by this.

[00:34:31] Global Dismiss

Steve: And then we do have an action on this one, which is a Dismiss All. So the cool thing about the Fast Track was that it allowed you to create Global Dismissals. So when you would Dismiss All, when you choose to Dismiss All, you’re choosing to set a pattern that when any new scan happens, if this comes up again, that it, automatically does not get flagged as an Issue. It automatically gets Dismissed. So you can still do that. if I open up the Lane here, you can see that, we can see the Issues that pertain to that code snippet as well. But one thing you will notice is that there’s multiple checks here, right? We got Improper Use of Link. We got Ambiguous Anchor Text. And the neat thing about the Filter is when we’re in these Grouped Views is I can actually, I can Filter those out as well. So if I wanted to go to check and I only wanted to see Improper Use of a Link, let me search Improper Use of a Link. I can actually Filter out and only see those in the Code Snippet View as well. So your filters will work across all of the Grouped Views.

If I go back to Filters and go down here and hit Reset Filters, it goes back to normal. So again, these columns are all the same that you would see, although we have pulled the Code Snippet out of being showed in the Grouping because it’s here at the top.

Let me go through the Dismiss Action. So if I hit Dismiss All on this, so this is essentially creating a Global Dismissal, and it, doesn’t just Dismiss it, but it actually tracks this and Dismisses any other Issues that come up about this again. You’re presented with this, with just, a Dismiss Modal here that shows the Code Snippet at the top and descriptor, and then Dismiss As, which is a feature that we recently added to the plugin to be able to give a little more context to why you’re Dismissing an Issue. So if I hit Dismiss, now see I get a success message, Issue Dismissed Successfully, and Remove Global Dismissal. So you can now see that this is a Global Dismissal and that I can actually remove it. And if I close this and, now look at the Lane again, you can see that I have a little badge here that says it’s Globally Dismissed, and then the button now says Remove Dismissal. I can click on this and hit the Remove Dismissal, and I’m back to, it being, all those issues not being Globally Dismissed.

William: Yeah. So now that we’ve looked at this, can we do a little bit of an experiment? Before I went to Open Issues, Fast Track, Change to the Post Type, and Globally Dismiss an Issue. Can you just do that?

So just reload the page.

Steve: So if I go to Issue Explorer. So you want me to, you want me to Globally Dismiss an Issue?

William: Specifically a Post Issue.

Steve: Specifically a Post Issue.

William: Yes.

Steve: So if I only want to see Post, I’m going to, go down to Filters and I’m gonna Filter by Content Type. I’m gonna choose Post, and then I’m going to, to…

Do you want me to do a Global Dismissal?

Is that what you said?

William: Global Dismiss. Yeah.

Steve: Yeah. So then I’m gonna Filter by Code Snippet, and then I can see this is an Issue here, for this Code Snippet, which is,

William: It’s the same one we were just looking at.

Steve: … Same one we were talking about, Improper Link, Ambiguous Anchor Text, and I can hit Dismiss All, and then hit Dismiss Issue, and it’s gone.

William: Yeah. So you went up through that quicker than it took me to load half of the pages in the old system.

Steve: Yeah. So what we’re trying to do is we’re trying to make this quicker and a unified experience to where you can do all the things in one application. Not have to jump around pages.

And when you-

William: Yeah, ’cause, ’cause do this in the old system would require one, two, three, four page reloads.

Steve: With a performance time load issue as well, right?

William: Yes. On every one of those pages.

Steve: So we’re being much more mindful about what we’re querying when we’re querying it, to make sure that you get a real snappy user experience.

Cool. So I’m gonna reset my Filters here. I’m gonna set my Group back to None. So those are the Grouped by Categories.

[00:39:53] Sorting & Columns

Steve: So now we went a little bit step further with some feedback from our own team about, what should the Default Columns be, or what, does everybody prefer the same Default Columns? Do you need to see everything? So what we’ve done is we’ve made a little bit of a decision on what we think the default columns should be, which is, Page, Check, Affected Code, the WCAG Level, Severity, and Status. And, but what we are doing now is we’re putting Tools in your hands for you to make that decision.

William, do you mind talking about Sorting a little bit?

William: Yep. So effectively every Column you see here is a Sortable Column. Now, previously in the old system, could you even Sort the Columns?

Steve: No.

William: I don’t think you could. So yeah, just to take an example, maybe you wanna see only AAA WCAG items, or you wanna sort by WCAG. You can actually just click on the Column Headers now and sort by any of these Column Headers. And, it sorts as you would expect. WCAG is best practice, A, AA, AAA, or the inverse, and the other way around. You can also sort by Severity. You can sort by all of the available Columns. Now, what is visible on this page right now is there’s a Page Column, Check Column, Affected Code, WCAG Level, Severity, and Stats. That isn’t the only available Sorts that we can apply. So in the Display Menu.

Steve: Before we jump into that, can you explain the Sorting. I think we did approach this slightly different than most Sorts. Where, most sort is ascending, decensending. You click and you toggle between the two. We actually have three states, right?

William: Yes So we have Default State. And then which column are you talking about? All, I guess All of the Columns-

Steve: All of them.

William: … Have the default. Yeah. Default is Unsorted, and that is theoretically by Order Discovered in this View?

Steve: Yes. So as they come in.

William: Yes.

Steve: So when you click once, you switch it to ascending I think, or descending. I always get it backwards. And you can see that the arrow turns, to an Active State and it’s pointing up. And then if I click again, it goes to descending and the arrow is pointing down. And then if I click a third time, it goes back to Default Sorting

So I will go back and I will Sort this again so we have one Sorted here. So you can continue on with the Display Settings, William.

William: Yeah. So these Columns here that are also are the Default Columns that we have chosen to make visible.

There is other Columns available. Anything that is available as a Filter should feasibly be available as well as a Column.

So we have in the Display Dropdown, we have Layout Options first, which we will cycle back to. But Expand Groups by Default is for the Swim Lanes. Below that, we have the Column Options, which, Check, Affected Code, Landmark, WCAG Level, Type, Severity, Content Type, and Post Status, and each of them are available to be toggled on or off as desired.

You lay this out how works best for your current workflow, and some people’s workflow might change depending on what they’re auditing, what type of pages they’re trying to fix. So now you have the freedom to just pick and choose what and when. And the Column Sorts are remembered, so if you come back to this page later on, these same Columns will be Set as by Default.

So you don’t need to reconfigure it every time you revisit.

Steve: And those are saved at the User Level?

William: Correct. So those are User Level Settings. So whatever you choose your Settings to be will be what next time.

Steve: Yeah.

William: Other people will get to choose their own Defaults, or they can just use whatever our Default choices were.

If you want to get back to that, there is two buttons at the bottom. There’s the Reset Sort and the Reset Display.

Steve: So when I hit Reset Sort, it clears all Sorting, and then if I hit Reset Display, it goes back to the Default Column Settings, or all the Default Display Settings. So you saw me toggle all of these Columns on, which start to be a lot of Columns, and what happens is you end up with some horizontal scrolling in the Table. And we added a little bit of a design embellish here to give you context, and this was a request that came in from Amber. And I think was a very subtle and elegant way to convey to a user visually that this Table, there’s more to this Table. So if I scroll over, you can see now that I can see all the Columns, and actually the shadow shows on the other side now since there’s more Table beyond that, and if you’re in the middle it’ll show on both sides.

if I go back to Display Settings and I toggle them all off, you’ll notice that there actually are two Columns that we don’t currently allow to be turned off, which is Page and Status, because those are the two base level pieces of information you need to understand what is going on here at all. So without those, you would just have a blank Table, and doesn’t really make a lot of sense not to have these as just base Columns that can’t be removed. Because even with just the Page and Status Columns, I can tell this Page has some Issue. I don’t know exactly what it is, but I could decide to use my Filters, as a way, if I wanted to go in and see only Ambiguous Anchor Text, I can see that, and I’ve got it Filtered, and I can see that’s the Filter. So I have context to what it is, even though I don’t have the Column open, right? But I can go back in if I really wanted to see that in the Column, I can turn that back on.

So this puts a lot of the power of how this Table outputs and looks in your hands, and it gets saved. Your preferences get saved in your User Settings, and each User can now curate their own experience when using the Issue Explorer.

Did we want to touch on the layout now, or was that later?

William: Yeah, while we have the Display Settings open, let’s have a quick look at it. But to showcase this, you are actually gonna need to change the Group Type to something that has Swim Lanes.

Steve: Yeah.

William: This Setting does only pertain to Swim Lanes.

Steve: Yeah. So in the Display Settings, I can expand Groups by Default. I can check that on. So what that means is, I don’t have to open all those accordions. They’ll all just be open when I go to the page.

William: Yeah, and there is a subtext there that does warn that there could be potential performance implications if you have a very large website.

Steve: Yeah.

William: Doing this.

Now, I have mitigated some of those performance concerns. You might be able to see it, dependent on how slow Steve’s website is.

Steve: Yeah. So what he’s talking about is that they will load… They don’t all… Each Grouping doesn’t all load at once. They will load one after the other.

Let me go ahead and open up Code Snippets.

So you saw a little bit of a loader, but it went really fast. On a live website, on a live server, you probably will notice this a little more, especially if you have lots and lots of accessibility Issues. But if I go in, you can see that they’re all open now.

William: Yeah, every Swim Lane is open, and they are honoring what the Pagination Numbers are. So each one of these issues is capped to 20, I think you had said.

Steve: Yeah. That’s the, yeah, that’s the Default, yeah. Yeah.

William: So every one of these Code Snippets opened. So there will be up to 20 as the Default Code Snippets on this View, and each one might contain up to 20 Instances inside each one. So when Steve loaded this page, each of the instance Groups loaded back to back, one after the other. And by the time you scroll to the end of this list, they should ideally all be loaded. But as I said, if you’re on a very large site, it might take a moment for these to load in.

Now, that doesn’t block you interacting with other things already. This does happen in the context of a page thread. So the page will load as fast as it feasibly can, and the individual instances will load afterwards.

So you can interact with Issues while it is doing that in the background, no problem.

Steve: Yeah.

William: So you no longer actually need to wait. The previous… In the previous system, you would need to wait till all of this is gathered and rendered before you could interact with the page, before the page would even load.

Now the page will load as fast as it can, or the data,

Steve: Yep.

William: Supplementary data will load in later.

Steve: Yeah, an interesting thing to note here while we’re here, if you hit the max number of Issues in a Group, it does show a message in the Table Footer here, it says, “Showing up to 20 instances (limit reached). Increase max instances per group in the Screen Options if more exist.” So this feature is not released yet, so we’re showing you a pre-release, but we do have a feature that we’re going to add to this, hopefully before we launch. But it will be a Link Here that will allow you to View All Issues related to the Grouping. And what it’ll be is you’ll click the Link to View All the Issues, and what it’ll do is it’ll grab those, and it’ll switch back to the None Group, and then it’ll update with a Search Parameter in the Search here, with a Code ID to actually Filter this whole list by all those Issues. That way you can see all of them if there’s 5,000. You’re not limited to 20, and you don’t have to increase your Pagination Size.

So it… I think that’s how we’re gonna do it. What did you call that, William? In the Search, like a Flag…

William: Yeah, some kind of Custom Flag, a Replacement Value

Steve: Yeah, yeah. Or like, snippet with an ID of something-

William: Yeah.

Steve: And then it’ll Search by that.

William: And if people are used to using the Advanced Search queries on Google, it’ll work very similar to that.

Steve: Yeah.

William: Yeah, I wouldn’t expect anyone to manually type it in, but it could be manually typed in if needed.

Steve: Cool. So that is, the Display Settings, and the Sorting.

And I don’t know if we mentioned, but just a side note that Sorting works per Grouping as well, so you can sort within Groupings just the same.

William: Yeah, and because this Sorting is actually handled by React wherever feasible, no page reloads required, no requests are needed to the server. It Sorts just the live data that’s already on the page. So it’s basically instant.

Steve: Cool. So we have… We’ve gone deep on this Search, this Filtering, the, Display of this Table, right?

[00:53:18] The Table/Rows

Steve: But, how do I get to remediating? How do I get to fixing things, right? So what you’ll notice in the Table, if I switch back to the Default View here, you can see when I hover, I get a little bit of a Highlight, on the border left and on the background here that these can be clicked.

And what we’re doing is we’re making each Issue in the Table a Single Action Issue at this point. We did get a little verbose with things on our end, trying to bring like Quick Action Features into the Table Row itself. But, we felt like we were mixing the UI into what is for Identifying Issues and what is for Taking Action on Issues.

So we’ve moved everything into a Side Panel where all actions can be taken. The action you can take here is to click on a Row, and by removing quick actions within the Row, we we remove some accessibility concerns with having a clickable area with links inside of it. And, there’s a lot of things in regards to keyboard users that you have to consider when you do that. So we’ve simplified that a little bit here with this current version.

[00:54:41] The Side Panel

Steve: And if I go ahead and click on one, it brings up what we call the Side Panel. And if you’ve been using our Sidebar that we released, several months back on the Single Issue Page, this will feel familiar, because what this actually is, this is the Single Issue Modal that can be found when going through your Issues from the Sidebar.

So what we’ve done is we’ve unified the UI between these two places so that, when you’re there and you’re here, it’s a familiar experience. You know what to do. These UI components feel familiar.

William: Yeah. And just for the nerdy people involved, they’re not just familiar. These are actually the exact same React components.

Steve: Yeah.

William: That are used in the Modal. They are exactly the same. If one gets changed here to improve something, the Modal gets that same improvement.

Steve: Yeah, totally.

What you’re looking at in the Side Panel here is at the very top you have an Issue ID, and to the top of the bar here you have the Close Button to close the Panel.

And the reason why we chose a Panel that overlays instead of going to a Full Page, Single Issue Page is because we want to encourage speed and context when you’re remediating. Like here, I’m on this one, I click on it, right? I can see the Active State of the Issue below the kind of the screen here, but I have my issue to the side, and I can just click out and keep going back and forth. I’m quickly going back and forth between Issues and the Panel where I can take action on the Issue. And the issue Panel is off to the right side to give you a Split View here. And, I felt like this was a very quick way to be able to do this, and it turned out… I think William did a great job. It turned out, real nice.

The moving down, you have the same stuff that you see in the Single Page Issue Modal. You have the Check Name, you have the WCAG Success Criteria, and you have a Show Explanation, which expands, and you can see Why it Matters and How to Fix It.

And then you can click over to our documentation for more in-depth documentation on how to resolve the Issue.

You have the affected Code, which is a Code Box that is now highlighted Code to help it be more readable to you.

And you have a Dismiss Issue Accordion, where you can choose to Dismiss the Issue, choose a Dismiss Reason, Add a Comment, and Dismiss it right from here. And you can reopen it if it already has been Dismissed as well.

If I close this, then I can reopen it. And this all happens like a React App. You can see the Status Change when you close out of this or look behind it.

In the right side Sidebar of this Panel, we have some Statuses. It tells you the Type. Is this is a Problem, or is this something I Need to Review. What’s the severity, the WCAG Level, the Landmark. If I click on the Landmark, it’ll actually open the Front-end Highlighter and highlight the Landmark that this Issue is within. I can view this on the page, which will highlight the Issue. Is it having a hard time finding this one?

William: It’s behind the-

Steve: Oh …

William: Highlighter.

Steve: Oh.

William: You’ll need to move.

Steve: Look, I can grab our Highlighter Panel and move it around.

William: Yep.

Steve: And I can dock it too, so it doesn’t get in the way. And then, you can Edit the Page. I can click here and it’ll jump over to the Page Edit.

And we’re doing all this in an effort to make things quick. All your actions you can take, you take them right here. All the information you need to remediate it can be found here as well.

William: Speaking of quickness, because of the way this is set up with this React router, you actually can copy paste this link from the address bar and give this to someone else.

Steve: Yeah.

William: And they will land right here on this exact issue.

Steve: Yeah, so if I click on, the little Copy Icon, if I click that, it says Copied. So now I have a link, and if I paste that link in and hit Return, it’ll auto… It’s a direct link to that Single Issue. So this is a whole new feature we didn’t have before.

In the old panels that, in the old pages that we went through, before everything was within a Table, it didn’t have a Single Issue View. But now with this direct link, we now have, you now have the ability to copy this, put it in your Remediation Report, send it to a developer. Say, “Here, can you work on this issue?” Attach it to a GitHub or Linear or Basecamp Issue. So we are now allowing that deep linking and it was a small feature, but we think it goes a long way.

Cool. that is the Side Panel. I don’t think… I think that’s it on the side panel, William?

Oh, actually no, we can go a little further. If I look at something that pertains to an image, you can see now in the Side Panel that I do have an Image View here, and it displays the images. It’s not the best image, but, there, that’s a better image of the clouds with the airplane flying into this beautiful sunset, pink sunset. A little descriptor for those listening. And of course, I’ve got the Dismiss Issues here as well.

[01:01:24] Fixes

Steve: But I think what William was getting ready to touch on a little bit was Fixes, right?

William: Yes.

Steve: So if I Filter down, if I go to my Filters and I go to Filter Status, and I choose Has Available Fix, so I can see items that have an Available Fix if I click on one of those. And this one beautifully has another image of a beautiful castle. Maybe this is a castle in Scotland, William.

William: Maybe. Yeah, this looks like my house.

Steve: This is William’s castle.

William: Yeah.

Steve: This is where he lives and writes all of his React code.

William: The only way with castles.

Steve: You can see now I have the Fix Accordion here as well as the Dismiss. So this is a Panel with all of the available Columns that… or what we’d call Sections that could be here.

So Fixes. You wanna walk through the Fixes a little bit?

William: Yep. So anyone who has used the Sidebar and seen the modal, this looks familiar. This is exactly what you would see inside the Modal.

So this particular issue actually is interesting in the sense that it has two potential Fixes. Now, these would be mutually exclusive. But yeah, you can toggle this Fix on here, click Save. It will not reload the page because you don’t have the editor context. But if you were using this in the individual editor, you would be able to scan the page immediately. It isn’t possible here, so can you just pick either one of these Fixes, Steve, Enable it, and we can talk about one of the other Fix Features.

So yeah, now that Fix is Enabled. Feasibly, these issues would go away on the next page scan. We can’t scan the page here, so if you wanna, exit out this, the out of the drawer, Reset your Filters, and then use the other toggle.

Steve: Reset.

William: Yeah, Reset the Filter, and then use the other Fix toggle that says has Fix Enabled or-

Steve: Yeah.

William: Has Enable Fix. So now these Fixes are Enabled.

If you were to visit the individual editor page for one of these, it should actually go away. So this is the actual use case for having Has Enabled Fix.

Steve: Yeah. And it did-

William: So you probably… Yeah. Those numbers went down by one.

Steve: Right.

William: Or if you now know that you probably wanna run a full-site scan-

Steve: Yeah

William: To clear these issues out. But you’ve verified that one of them does get Fixed by Enabling it, and yeah, feasibly all these Issues are now resolved.

Steve: Yeah. So if I Refresh this, you can actually see that issue is gone because it was actually resolved as a result of the Fix. A thing to note too about Fixes a little bit is that fixes, while we do service Fixes in this View, at the Issue Level, that Fixes our Global Setting and Enabling a Fix for this or for Add a Warning When Link Opens in a New Tab, these actually do get Enabled Globally, so they will Fix all Issues that pertain to this. And, I will put in a side note on that as well, that when our Fixes are applied and you re-scan the page, it re-scans to ensure that our Fix actually worked, and if it didn’t, it stays an Issue.

William: Yes.

Steve: So, you’re not blindly adding a Fix that might work, you’re adding a Fix that should work. But if in for some reason it doesn’t work, the scanner will still catch it and will still identify it as an Issue even if the Fix is Enabled. It only goes away as long as the Fix Enabled actually works.

And it should work, but, given websites being built in many ways and how JavaScript can lay on top of a website, there’s infinite possibilities that could happen or things that could get in the way of that Fix actually doing what it’s meant to do.

William: Yeah. Like for example, we had the support request open this week from someone who has a headless WordPress site, and there’s some particular complexity there-

Steve: Yeah

William: With our scanner and these Fixes where we do our best to make sure they’re gonna work, we can’t cover every output of every website. We try our best, but that is why we verify. And if you were in the Editor, we would verify immediately. But in this View we can’t. Actually, I haven’t told Steve this yet, but I tested and it turns out we can. And that might be a follow-up feature.

Steve: Right.

William: We might verify that Fix right away

Steve: Yeah. Cool.

So, you’ve seen we’re trying to handle Errors throughout the application. We’re handling Empty States, like if I Search for weird words and stuff, like Empty State, we try to show you this nice little Check Icon that, No Issues Are Found. And, we’re trying to make sure that, we’ve gone through some extensive internal accessibility auditing to make sure that this Issues Explorer is keyboard operable, that we’re following accessibility best practices and standards, and meeting color contrast and WCAG requirements. Because we don’t just, make accessibility tools. We try to practice what we preach and make the tools that we are creating for accessibility accessible themselves and further creating the reach that these tools can have, for any person of any ability to be able to use them.

[01:07:52] Bulk Actions

William: So I think there is one feature that we haven’t actually covered yet.

Steve: Bulk-

William: The bulk actions.

Steve: Yeah.

William: So-

Steve: Walk us through Bulk Actions, William.

William: So the specific person who reached out recently had a very specific requirement for Bulk Actions, which was the inspiration for even adding this feature. So can you use your Filters to find all the ARIA Hidden on a specific page? Doesn’t matter which page.

Steve: I’ll, Sure. ARIA Hidden?

Okay.

William: And on any specific page. That doesn’t matter which one, but let’s just pick a… You can use the Filter as one.

Steve: On a specific page?

William: Yep. Oh, no, you can’t Filter it from there. You can end the Search.

Steve: I need to Search, right? Yeah. yeah. I was like, “Huh?

What?”

William: Yeah.

Steve: So if I just do, screen reader. So this page.

William: Correct. So now this is all of the ARIA Hidden issues on this specific page. Let’s Bulk Action on them. Let’s Dismiss All of these Issues.

Steve: So I check the Checkbox in the Table Header?

William: Yes, and that selects every visible item, and a new operation appears above this which says there’s three Issues selected. There’s two operations that you can take here. You can either Dismiss them or Reopen the selected, and there’s also a Clear Selection Option.

So yeah, let’s just Dismiss these three Issues. You get a Modal that pops up that has the same options. You can Dismiss it with any one of the Default reasons. You can leave a Comment, and you click the Button. It takes a second. Now all three of these Issues are Dismissed. So the person who needed to be able to Dismiss All of a specific Check Type on a specific page can now accomplish that with the Bulk Actions.

Steve: Yes. And you’ll notice too that, we’re in the open tab here. We’re using the open tab at the top, and, these are now in a Dismissed State, and this kind of practice follows throughout the whole application, is that we don’t… we’re not taking things away when you change the State, not until an actual page re-render or page refresh. It’s a Single Page App, so you’re not necessarily gonna get a page refresh, but when you change a View or a Status here, that then they will Filter back where they belong.

William: Yeah. And to carry that back to what the previous behavior was, when you Dismissed a Single Issue in the previous iteration of the Open Issues page, the page would reload immediately, and that issue would be gone.

Steve: Yeah.

William: You wouldn’t be able to see it. So we now have chosen to keep these. They’re still selected in case you wanna change your mind and reopen them.

Yeah, and it’s just a couple of clicks, similar pattern, modal open, Issue Click to Reopen. Now they’ve reopened again. And you can see the State on the right-hand side of the Column is open.

Steve: Yeah. So that is the Bulk Actions, and if I reset my Filters back and I go back to None here. So I did state that, we’re trying to make the Table a Single Action, right? Which is basically get to the Panel to take actions, whereas this Bulk Dismiss has an unintended benefit to being here, is you can actually Dismiss an Individual Issue just by clicking on the Checkbox in the first Column of the Table and then hitting Dismiss Selected. So you actually can do one at a time if you really would like to. You can see that one’s Dismissed. Now, you can click on this and go into the Panel here and reopen it and… Take note of this, William.

William: Yeah, I did.

Steve: And, reopen- That’s it … reopen it here. So it does have a side benefit, and you can go through and just manually pick the ones you want and Bulk Submit. They don’t have to be in order. You don’t have to pick them all. Works a lot like kind of the Bulk Actions in WordPress kind of work out of the box.

[01:12:37] Wrap Up

Steve: Cool. So I think that is all the features of the new Accessibility Checker Issue Explorer. William and I are super excited, and the rest of the accessibility, or the Equalize Digital team are super excited to get this out to you here in the next coming days and to get this into Users’ hands and to get your guys’ feedback on, on what you like and what you don’t like. And we can fix things and move along based on user feedback to improve this even further than this massive improvement that we’ve made from the Legacy Open Issues Page.

So Amber posted on here, she watches in on our livestreams here to make sure that we are saying all the right-

William: To make sure we don’t swear.

Steve: To make sure we don’t swear, yeah. Saying all the right things. But Amber said, “This makes me so happy.” And I think it makes me happy too. And,

William: Yeah, same. I’ll be honest, I didn’t use the old system very much. I found it too slow and cumbersome, and I actually created WP-CLI commands-

Steve: Yeah…

William: To perform some of these operations to save me having to use those pages.

Steve: Yeah, developers always find a shortcut, don’t they?

William: Yeah. I spent a whole day making a thing that I could have done in one minute.

Steve: Yep. So yeah. So better improvement, better discoverability, quick auditing, quick remediating. We’re trying to continually improve the experience that you get when using the Accessibility Checker.

William, can you give me a release number of-

William: You will need to update both Free and Pro. 1.44.1 of Free, which is available right now, is a requirement at minimum for this. And in Pro, I believe it will be 1.23.0.

Steve: All right. And just to tag onto that, the Pro has not been released yet, but we are looking to release it here in the next coming days.

And so hopefully by the time you watch this, if you’re watching this back later on, that this has already been released.

Download it

William: Or actually, if someone is watching it today and would like a Beta copy, reach out to me-

Steve: Yeah.

William: … On support and I’m happy to send that to you. I would love to get early tests.

As you noticed at the end, we found one singular bug. We found lots of bugs as we built this, and hopefully fixed them all, but seems like maybe one or two-

Steve: Yeah.

William: … Might’ve slipped through.

Steve: Cool. William, I appreciate all your work on this. I appreciate you being here today and, helping me walk everybody through this.

And, if you use Accessibility Checker, we would just encourage you to update to the latest version. If you haven’t, please give us a glowing five-star review on WordPress.org for our plugin.

William: I’ll even take a four-star review if you are willing to update it to five if it fixed your problem.

Steve: Yeah. There you go. If anybody listening has any questions or feedback, we are always open. You can find us on our website, you can find us on X and LinkedIn and many channels.

So thanks everybody for being here today, and we look forward to joining you next month in the next Changelog Live Stream.

Take care.

William: See you.