- Welcome, everyone. I'm glad you could join today. This is the Siteimprove First Steps Accessibility Fix-it Clinic. I'm Jane. I am the, oh, another person. Hello, I am the College of Engineering's Digital Accessibility Specialist. Got a few more people joining in. Welcome, everyone. This session is being recorded. If you have any objections, let me know through the chat.

First of all, let's, let's talk a little bit about what Siteimprove is. Siteimprove is, sorry, let me backtrack a little bit. We're going to go through Siteimprove first steps, and then we're actually going to fix one issue at near the, the end of the meeting.

So the first thing about Siteimprove to know is that it's just a tool. It's a tool that uses automated testing to find accessibility issues for your website. It's not going to, it's not, you know, all knowing. It doesn't find every single accessibility issue that could be present, but it will give you the results of the automated testing that it does, and it will give you the ability to monitor your progress on your site for those issues.

The second really important thing to remember about Siteimprove as you're using it is that you cannot break it. So don't worry about clicking something and you know, doing something really bad. You're not going to, it's not going to happen. So feel free when you go into Siteimprove to explore, see what it can show you. And if you do something that seems a little strange, you can always contact their help. - They have been pretty responsive for me - to help you get back to where you need to be. So don't worry, you are not going to break Siteimprove.

The third thing to know about Siteimprove is that it can be a little bit slow, a little laggy. So what that means is that if you're trying to click something in the interface in Siteimprove, click and then just wait just a second or two to, to get some action. And if it doesn't do anything for a few seconds, then maybe try again. But just be a little patient with it. Okay, any questions so far? We're all ready to jump in.

Oh, another, another person. Welcome.

Okay, I'm just about to go into the Siteimprove interface. So let me switch to that window. All right, once you log in, I'm assuming that everyone at this meeting has an account on Siteimprove already. If you don't, don't worry. It's really easy to create an account, you just have to try logging in. It'll, if you haven't logged in before, it'll just create your account on the spot. Once you do that, if you don't see information about your website on the first page that you go to right here in the corners where that information is, then contact me at coea11y@berkeley.edu. I can help set up your account so that you can see the data, the accessibility data for your site.

Okay, so here is the first screen that you will see once you log into Siteimprove. Notice that up here there's a box, mine has a dropdown. Yours may not. It depends on how many sites you are in charge of sort of monitoring and working on. And here's the lagginess a little bit. So you can see here I have 310 sites that I can see. I've chosen the one that I'm directly, directly responsible for, which is the accessibility, the Berkeley Engineering Accessibility website. So I've chosen that one.

And the first main dashboard view is for me is the accessibility at UC. So right now we're in this area. If I click dashboards, it won't do anything because I'm already there. This is the dashboard for accessibility at UC. This is a good one to start with. If you're new to accessibility topics or just, you know, web ideas in general, you can go through this dashboard and it gives a lot of sort of explanatory text about different things. So let me scroll down just a little bit. It'll talk about your score details. So this Siteimprove will assign a score, it does its automated testing and it gives you a score. And then as you scroll down more on this dashboard, it will start highlighting the most common and issues that you're likely to see on your site.

So one of the things is images, missing alt text. Alt text is alternative text or text alternatives for images. So if you put a photo or an image on your website, you really, you have to have something that's called alt text to describe that photo for people who are using technology to help them access the information on your website. So people who have vision issues, they may not be able to see the actual image, but if you provide alt text, then they can have a description, they can hear a description using their screen reader of what's in that image. So in this case, in my, for my accessibility website, it says there aren't any pages with missing alt text, which is good.

Let me keep scrolling down. There's bad alt texts. So writing good alt text is kind of a a skill. Bad alt texts. The way I think that Siteimprove is trying to figure out whether something's bad or not alt text is bad is they're looking for words in the alt text, like image of image photo of when you're writing alt text. You wanna not use those phrases. Also, URLs are not a good thing to put into alt text either. So it's probably looking for those to flag.

So the rest of this page goes through different, I, I don't know if popular is the right word, but common issues that show up on web pages. This is the dashboard again, and this particular one is accessibility at you. See if you click this caret here, it gives you options for other dashboards that have been set up already. There is an accessibility at Berkeley dashboard. If you click that, it'll pull up that view and that just gives you slightly different information.

But you can see here I do have some WCAG A and AA failures for accessibility for the consent decree for, you know, our efforts, what we are trying to meet is the WCAG 2.0 level double A. So you have to meet all the As and AAs criteria to pass. So this table is showing me that there are some things here. You can see here's an A level issue, here's a AA issue. We'll sort of delve into one of those a little bit later. Right now, I just wanted to point out that this is just another dashboard.

The next part of the Siteimprove interface that I want to point out is the accessibility area. So over here on the left side menu, if you click accessibility, it'll go into this submenu. I typically skip everything and just go straight into issues. But let me just, I'll just go to the accessibility overview page so that you can see what it looks like. So in the accessibility overview page, it gives you some information about how you're doing in terms of the, the automated score for your site. It gives you issues, lists, it tells you what you've actually resolved, which is nice to see as well. There's progress over time if you're interested in that kind of data. That's the overview page.

What I like to go to actually is the issues page though, because I want to see the actual issues that, that are coming up for my site. So if you go to, you know, let me go back here, show people, this is the main menu, go to accessibility and then down to issues. And you get here, you'll see this table and the table's going to show at this by default, all the issues that are flagged by Siteimprove. But what I kind of like to do most times is go into the filters area and change this conformance drop down. And I'm just going to leave A and AA because that's, that I feel like should be my priority at this point. Let's try to get all those As and AAs taken care of. So let me select confirm, select, apply. And then now my table just shows me the As and the AAs for issues.

All right, I just sort of zoomed through a whole bunch of things. Does anyone have any questions at this point? Feel free to throw it into the chat or just, you know, turn on your mic and and speak. Alright, no questions so far. If you think of anything, let me know.

The other area, main area that I'd like to point out, let's go back to the main menu is the quality assurance area. And in quality insurance, let's, I'll do to the overview page real quick. There's a lot of information here for you. If you're, you know, you can just browse through and see. I'm not sure what this one is doing. This is the lagginess. Sometimes it takes a little time. But in the quality assurance area, I like to go to the inventory section. So select inventory. And within the inventory section I like to look at pages.

So I do this often for the sites that I'm monitoring. Basically, all of the College of Engineering websites and I like to look through and see what kinds of pages, how many pages there are on a site, you know, what their scores are. This one's just showing this, it's the Siteimprove. It's called the DCI score. Let see what that stands for. Digital Certainty index, it's a Siteimprove thing. It incorporates the accessibility score and the quality assurance score and other scores. But I just, this, the inventory page or view gives me an idea of what I'm working with. 'cause I work with all sorts of different sites.

This particular site, which is my own digital accessibility site, only has 11 pages so far. There will be more. It is constantly evolving. So that is the, if you're interested about your particular website, this is a good area to go into the quality assurance inventory pages area because sometimes you're assigned a website to do accessibly accessibility work for, and you're not that familiar with it. That's totally fine. This will give you a, a quick little overview.

The other things in this inventory area that might be interesting is the, the documents page. It'll tell you how many of these different document files are in your site. And let's see, site map also is an interesting one. It sort of gives you an idea of how Siteimprove is crawling your site. So this one's starting up here and then it's getting linked through to there. It hits guides and then there's some guide pages under there. This is a also a nice way to sort of get a, a good overview of your site.

Okay, any questions so far before I jump in? Back to the accessibility issues page. If you think of anything, feel free to throw it into the chat and I'll check that later. Okay, so here we are. Back to the issues page. One thing that's that I have not enjoyed about Siteimprove is that if you navigate away from a table or a a page and then you go back to it, it doesn't sort of hold onto your, your selections for filters and such. So let me go back in and change this back to just showing A and AA. And here we are.

I have two issues on this that Siteimprove has found in its last scan. One is called empty headings and then the other is the color contrast does not meet minimum requirement. So of these two, well I guess I could just address both of them. They're both very important. Headings are extremely important for people who are using assistive technology and they're just important in general for good website design. When you're trying to share information, you want to present that information in a logical way. And headings are one way to be able to sort of chunk up your information so that people can understand it easily.

So let's look at this empty headings one. So I'm going to select this link linked label here, this empty headings and what it goes to, because we're in the accessibility issue section. It goes to the issue empty headings. And what I want to do is scroll down here and look at pages with this issue issue. So here's the page that has the issue. Let me select that and Siteimprove will open up a new page or new tab in my case. So the, on this new tab, you'll see that there's this little red box that's been highlighted.

And on this left hand panel, it gives you more information about what that issue is. So here we have the empty issues or empty head headings, and you'll see that site improve, sort of tries to give you some help along the way. So it will have this available here. Why is this an issue? If you open that up, it gives you information about why headings are important and it also points to the specific WCAG criteria that it's pointing to that the, the thing that it's testing against, let me close that back up.

And if I go down to occurrences, it's showing me that there's an H3, a heading, level three, that is empty. There's nothing in there. So either I want to add some text in there if it's actually, there's supposed to be a heading there and for some reason it didn't get added. Or what happens more often than not for empty headings is that you're in your CMS, you're in WordPress or Drupal or whatever and you're just, you know, using your, your WYSIWYG editor and typing away entering things and then inadvertently put in a heading, but it's not really a heading, but WordPress or Drupal thinks it is. So it keeps it and then IT Siteimprove will flag it.

So if you go here to this occurrence area right now, we are looking at the content view. It highlights that part of the page that's content. If you look at HTML view, it'll go into your page source basically and highlight the actual, you know, element that's causing the problem. So here we have that H3, but there's nothing in it.

So now what? Now what you need to do is go into your CMS or go into your development environment for your website and go in and fix this. So Siteimprove is just a tool to identify these issues. The fixes, the actual fixing needs to happen in your CMS. So let me switch over to, hopefully you're seeing my, this is my WordPress interface dashboard for the accessibility website.

I'm going to navigate over to pages and sometimes my site can be a little slow too. And the site, that Siteimprove found this thing is on is Sandbox-1. This is my, my sort of play around and test things page. So if I switch back over to the Siteimprove content view on Sandbox-1, this little empty heading looks like it's happening right here after this more topics area. So let me go back to, here's Sandbox-1 in my CMS. Oh, here's more talk. Oh look, look at that. There's a heading right here that's a placeholder that WordPress is showing me. Let me, let's see.

What I'm going to do is just delete that heading. Okay, so no more empty heading and then I will update. This will not show up. The fact that I've removed that empty heading will not show up right away. In Siteimprove. Siteimprove does its scans, I'm not even sure how often, maybe like once a week, I'm not entirely certain, but it's not instantaneous. So it's still going to show up in this list, but I know that I have gone in and fixed it.

Let's take a look at color contrast. The reason there are all these other issues here compared to the just two of the two issues that we saw in, in a previous table is because right now we're in that tab that's showing the page report for my sandbox page. So in the page report it lists all the issues that are there unless you go in and change the conformance filter here. So if I do that and apply the filter, then you'll see there's the empty headings.

Okay, color contrast. Let's look at this one. Color contrast. This one is not meaning specs. Why is this an issue? Well, if you know contrast isn't good enough, it makes it very difficult for people to see people with disability or not. It's going to make it hard to see. There are ways to measure color contrast. There are tools available. I'll point to those at the end of the session. They're linked off my website. But you'll see here that this text in here, it's fun to play with colors, but be sure to check color contrast that has a contrast ratio of 2.27 to one. In order to pass the specification, you have to be at 4.5 to one or higher. So we know where this is.

I'm going to switch back to my CMS that is up here and in WordPress, different content management systems do this differently. In WordPress, I can play around with text color and background color within this block here. So I'm going to change this text color, I'll just make it way darker and update that again, this change will not show up right away inside Improve. But I know that I have made it. So one of the tools, I'll give you the link to this tool or you can look it up in Chrome, it's available for Chrome for Firefox and Edge. I think I'll give you the, the general link, but it's called ColorZilla. And ColorZilla is this great little chrome extension where I can use this tool to check colors in the page or find the the Hex code and things like that. So that's one tool I use to get the actual codes for colors.

And then what I will then do is go to a color contrast checker to check it. I'll go to a different page to check it. That that is covered. Actually I did cover that in a previous Fix-it clinic. There is a recording available for that one. It was a clinic called Color Tools and I'll, I'll point that out later too. Any questions so far? I've run through this really quickly. Just to give you an idea of, you know, what you need to do with Siteimprove to start,

- Jane, is - so our goal is to have a hundred per or a score of a hundred on A and double A

- The goal, okay, so the score, it's, you know, the score, the number, it's funny, the number is there to gauge your progress. So wherever you've started, like if you're, if that number just keeps getting higher, I think that's a total win.

Ultimately, we want our websites, anything that we put up online to be accessible. But accessibility is really sort of this ongoing process. It's like you're kind of never done because technology changes, content changes, all sorts of things. But in terms of the site improve score, yes, let's try to get those scores as high as we can. But the most important thing is making sure there's movement.

So getting into Siteimprove and checking regularly to see what issues are there and then regularly setting aside time to actually fix them in your CMS or you know, your other environment. Great question. Any other questions so far?

Let me go back to this accessibility. I'll go to the main menu here. Or maybe I'll just, let me just jump to the dashboard. If there aren't any questions about Siteimprove at this moment, let me jump to, let me go to the, a couple pages I wanna, or a couple websites I want to point out for help.

I've mentioned this Sandbox-1 is my test page for the the Berkeley Engineering Accessibility website. I'm going, this is the actual website itself. Digital accessibility from Berkeley Engineering and Engineering. It's a work in progress. The site as a whole, I will be adding more and more content as we go along. My next projects will probably be little short screencasts showing how to fix certain things like we just did with empty headings or you know, color contrast or alt text.

If you go to the Guides area, guides page, you can link to the different Fix-it clinics. I have one video on the guides page actually that if you haven't done this already, you should consider doing in Siteimprove. There is a way to make it so that you can click one link or one button, one link to go directly from an issue that's been flagged to your page in your CMS. It's called CMS - Siteimprove calls it CMS deeplinking here. Let me just go back to Siteimprove, go back to the issues page so I can show where this would show up.

So, so in Siteimprove, okay, this, this just opens this page in a new tab. Your webpage will just show up, which can be fine. That'll, it's opened it right here and that could get you, you know, you could then log in through your admin interface to your WordPress da-, to your WordPress dashboard and fix from there. But what would be nicer is if, if you had deeplinking set up, there would be another button here that said CMS. And if you click that, it would automatically go right into your WordPress admin interface for that page. So you can make the fix.

It just eliminates a couple of steps. But if you're fixing a lot of little things, it could be a good timesaver. So I would encourage you to set up CMS deeplinking. It doesn't take very long. This video itself is five minutes. Essentially all you need to figure out is the URL for the CMS editing page. And then, or tell Siteimprove, okay, that's the editor's URL, what is the actual, you know, general public viewer's URL and they'll figure it out from there and then they'll activate that feature.

So this is the Digital Accessibility Berkeley Engineering website. There are Fix-it Clinic recordings for previous things. I mentioned the one on color tools earlier. So this recording will go through that clinic and you'll learn about different color tools that are available. Let's see. Here's the deeplinking one.

Again, I, the first clinic covered Canva accessibility. Canva seems to be a really popular tool that's in use. And then my plan is to add more and more of these little videos. So come back to this site. There's also a resources page that links out to other people's resources because there are a ton of accessibility resources out there, including for the UC Berkeley Digital Accessibility Program.

So I'm just going to jump to this tab I have open. This is the Berkeley campus level Digital Accessibility Program. They have a lot of information on their site and if you go to the Learn page, you'll see they have lots of information. They have training, they run training sessions. I don't think there are any scheduled in right now, but I suspect that they will probably run another series of those. And then they go through and cover some of the main topics for accessibility.

I think for everyone, anyone who's just starting out looking at, at accessibility focusing, let's just start with alt text for images and color contrast. If you want, you know, two, two things that are quick wins that can be quick wins. I would start there. And I see that I have reached the end of my time. Does anyone have any questions?

- Yeah, Jane, I do actually. For Siteimprove, can we get a staging site added to that as well? Or how does that work?

- I don't think that, yeah, they're not, staging sites are not covered under the consent decree. But I would, you know what, send them an email and and just ask. But normally, no, they're not usually added in there.

- Okay. Thank you.

- Well, I really, I'm so glad that all of you joined today. If anyone has questions in the future, actually me go to the page that, okay, the recap we had, we, we looked over three areas of the user interface, the accessibility section, the quality assurance section, which is where the inventory and pages were, and then the various dashboards. Definitely think about setting up that deeplinking option. And then just go in and start. Remember, you're not going to break anything. And then if you have any questions, email me at coea11y@berkeley.edu and this is the URL for my website. Thank you everyone!