 All right, thank you. This is the link to get the slides. The slides are pretty much a bunch of resources you are going to need today. So go to EqualizeDigital.com slash WP, y'all, all lower case. And that will redirect to the Google Sides. This is our outline. Yes, you will get food. But just to give you an idea of what we'll be talking about today and how it's going to go, I'm going to give a brief intro of some information for about 15 minutes. Then I'm going to demo automated testing and then keyboard testing. At noon, we will take a break. Everyone can go get food. I'm going to kind of do a 30-ish minute break. And then at that point, we'll do a screen reader testing demo. And then I have time set up for everyone to independently test using some of the tools that we have talked about. And then we'll come back as a group and talk about some of the things we found, things that maybe surprised you. Or if you saw something and you want to know how to fix it, we could talk about that too as a group, which might be kind of fun. So that's the plan. I want to start. I know everyone just came in from a break and sat down. But we're going to move around for a minute. And I'm going to start by asking you to stand if a question applies to you. So if you have ever coded a WordPress plug-in, can you please stand up? How about if you have ever coded a WordPress theme, can you stand up? Stay standing. Don't sit back down. How about if you've ever written content on a WordPress website, stand up? Yay, everyone. Great. Just in case you're wondering, if you are standing, you are responsible for accessibility. So it's really important that we all know, you can sit down now, that accessibility is everyone's responsibility. My partner, Steve, talked a little bit about that accessibility on the dev side. And some people think that accessibility only happens in development, and only developers have to know how to test for accessibility. But that is not the case. Anyone who touches a website, whether you're writing content, whether you're designing it, whether you are coding it out, or whether you're just the person who maintains it and updates plug-ins, hitting a little button, you still need to know about accessibility. I have a graphic up here that shows our process in the different phases we do on sort of a timeline. It goes from discovery to content to design to development, testing and debug, user testing and remediation, then launch, and then training and post-launch support. And the timeline just keeps going off the screen, because that part never ends. And above it, there is a graphic with an arrow pointing both ways, and it says accessibility. And this is really to highlight that accessibility happens all the time. We don't think of accessibility when we're building websites as something that only happens in development or only happens in testing. When we're doing discovery, we're talking about accessibility with our clients. When we're writing content, getting content from them before we even start building, we're figuring out if there are things we can do to improve the accessibility of that content before it even hits the website. So it's really important to know that. When we come to actually testing a website, which is what we're going to talk about and practice here today, basically we have a four-ish step process. And the way we approach it is we run automated bulk scanning tools to check for obvious accessibility problems. We'll be looking at automated tools first. Why do we do this first? Because there are some problems, not all, but there are some, maybe even many, accessibility problems that can be definitively found with an automated checker. And you can save yourself a lot of time by using a quick tool and then fixing those problems before you actually have a human being test the website. So do automated scanning. If you can use a tool that bulk scans the entire site, that's even better because then you can get a high level overview instead of having to go one page at a time. And it might help you figure out how to prioritize problems. Then after that, we manually test a representative page of every type. So what does this mean, like our home page? If we have post types, whether it's a blog or a portfolio, we do the archives and a single for that. And then any pages that have special features. So your contact page with a form, your checkout page, if you have a WooCommerce store, anything that has special functionality you want people to be able to engage with. And when you are manually testing, we do three things. First, we do keyboard-only testing. Then just on the normal desktop or laptop, as it were, version of the website. And then we do it with the website zoomed in 200%. And then we do it with the website zoomed in 400%. And again, we're going to demo all of this. And then after the keyboard testing, we go back through the website with the screen reader. So then in our process, we resolve all of the issues from the scan and the manual testing. Maybe some of those issues are getting resolved from the scan before manual testing is even done. But we resolve all of those issues. And then bonus points, if you can, is having actual users, typically screen reader users. But it could also be other people, people with neurodivergence, people who have mobility challenges and maybe use voice to text or eye tracking in order to use the web. You might want to have them come and test as well. So today, I do not have a lot of time to tell you about everything you have to find. I wish I did. But unfortunately, we'd probably be here for about 10 hours if I tried to explain every WCAG guideline. But what I do want to do is give a quick intro to these links that I have here because you'll want to reference them as you're doing your own testing later. So the first one goes over to the W3 website where you can actually get the web content accessibility guidelines. Maybe I can zoom in here. There we go. When we are testing, I have this open all the time. Each, what is important to know about these guidelines, they're grouped into four groups, anything with a number. So right now, we're looking at the very first one, which is 1.1 text alternatives. But what falls under that is the very first success criterion, which is 1.1.1 non-text content. And this is a level A. There's three different levels. Level A is the lowest, then it's double A, and then triple A. Double A is generally considered the standard for what you need to do in order to comply with most laws. Triple A is better. It may not always be achievable in certain situations. So it's kind of long. It takes a little bit with each of these of reading through. If you're not sure what something means, there are links in that section right below. The first one is understanding, and this says understanding non-text content. So they'll have one that explains it, and it has very detailed information about what does this success criterion mean, where can it maybe imply, what's the intent behind it, that sort of information. And then they also have a link, how to meet non-text content. And that jumps us over to the new version of 2.1, which you could also just use. But I've been more familiar, and I tend to stay on the other page. But if we expand the high techniques and failures, then we can see a bunch of resources that are helpful for us in actually meeting this. And there are more information about testing for it. That is incredibly dense documentation, and we might have just lost our feet. Let me check. Maybe. I see now it has a tie, so maybe I should take advantage of that in a minute. So the other thing that I've shared here is a spreadsheet that we have created for our own internal use. And what it has is it has each success criterion, which version it is. So 2.0 or 2.1. Why does that matter? In the United States section 508, which is what applies to federally-funded websites, which could be higher ed, could be government, could be a nonprofit getting a federal grant, they're technically only required to meet 2.0. Now, most of our clients are doing 2.1 anyway. But you could have someone say, I only care about 2.0. So that's where you might pay attention to what version they're from. We have the impacted population, who this might apply to. And then this summary sheet explanation has some more detailed list out of these or specific things. So the things that we were talking about for non-text content were images, form image buttons, image map hotspots have appropriate or equivalent alternative text. Images that do not convey content or are decorative actually have an empty alt. You need to have form buttons that have descriptive value, form inputs, have associated text label, so there's a label above the field, and a few other things. But basically, this is sort of like our checklist that we've created for ourselves internally to help us know what are specific issues we might see and how can we map that to a success criterion. And the reason why is because when we're delivering audit reports to clients, we're always telling them what success criterion it maps to. So that's what that one is. Then the next reference material that I have linked for y'all is our what we call our shift left with accessibility checklist. And basically what this is is a checklist that we created for our internal use on everything that needs to happen at each phase of our website process in order to ensure that we are meeting accessibility. So again, I said accessibility starts with discovery. It starts with discovery, content, design, development testing, user testing, training and post launch. So this is also a very helpful resource and especially when you get to like some of the stuff under design. So again, this is in the design phase but if you're testing a website, there may be things that we've grouped under design that you would see when you're testing that website. Again, I don't have enough time to go through all this but I'm trying to give you guys the tools and then later on, if there's questions about them where I'm happy to discuss them or answer any specific things. And then the last reference material that I've given you is a spreadsheet which you are welcome to copy. This is the actual format that we use when we are providing audit reports to our clients. So this spreadsheet, we give it an issue number. We'll put in a code snippet and I have an example issue in. So I'll give it a code snippet. Then the check is like our little summary of what it is, kind of a brief explanation. If there's an image, we'll put an image in. We use an extension called image kit which is a free Google Sheets extension so that you can add images in. Then we'll have a description that's kind of like an explanation of why it's a problem or what the problem is. We will say where the issue exists on the website. Sometimes this is like, this one says header. Sometimes it'll list a specific page or if we're testing just like an element or a block we might list the block name that it exists in, those sorts of things. Then we'll have a recommended fix. And then we give a severity. We think of severity in three ways. Basically we say high, medium, low. High is anything that is a critical failure that would stop someone from being able to use the website. So form fields missing labels, critical failure, right? Cannot submit, someone on a screen reader wouldn't know what goes in one field. So that is a high priority item. A medium for us is something that is a clear WCAG violation but it could be worked around. So it still has to be fixed if you want to be accessible and compliant but it's something like, for example, missing skip links on a website. If you don't know what that is, that's okay. We're gonna talk about that in a minute. It's annoying. You have to add them to be compliant but it's not a critical failure. And then low, for us we only call things low if they are a best practice or they're not clearly a WCAG violation but it's a usability thing that could impact folks that we think is important and then we'll report that as low. And then the way the sheet works, it has two tabs. The second tab is that same WCAG thing that we looked at before, that little cheat sheet I had. If you choose a success criterion from the drop down here, it will automatically, well it should, if it's going to function, yeah. It will automatically fill in the next three columns from the WCAG version and the level and the impact of populations from the WCAG map that we have on the sheet. So those are the resources I have for you all. And now we're gonna get into automated testing. I know I'm flying but I think everybody came here for the demo so I didn't wanna talk to you about all the different rules and everything like that. We're gonna be talking about a few different tools and I'm gonna show you different ones. So the first one is, and they're all listed on here if you wanna find them, the headings map plugin. What we're gonna do is I have, and I actually took the password protection off this. So if anyone wants to go to roadwarriorprd.wpngen.com you are welcome to. The password protection will go back up after today. This is my old company's website. So it's nothing like showing where you used to be. We took it down but I saved it because it's really great for demoing accessibility problems. And we have all been there, right? Sorry? It's a hate press. It's a hate press. There is a reason why my company does not have this website anymore. So what I'm gonna do actually, yeah. So I am logged in right now and I think I'll stay logged in but I may at some point flip back and forth. So one thing I will know is that there are some issues that will come up in the WordPress admin bar that could be distracting. So a lot of times I find it helpful to not be logged in when I'm doing testing. So for, yes. Can I get your URL please? Yes, it's road warrior, w-a-r-r-i-o-r p-r-d dot w-p-n-g-n dot com. Yep. So the first little tiny helpers I wanna show you, that's what I called them. I don't know if that's a good name for it but there are little tools that do a few things. I'm on the homepage of this website. I have the headings map, Chrome extension and there's also Firefox extension for this one. Let me see if I can zoom in a little more. All right, so what I have done is I've just, I have that installed. I just hit it real quick. What this does is it gives me an outline of all of the headings that are available on the page and it will flag for me in red if they are out of order. So right away I can see when I'm looking at this that I go from a heading one to a heading three, then to a heading four. So that's the right order but we skipped heading two, right? And then there's sub items. When I'm looking at this and assessing this, I look at a couple things. Not just is the heading order skipped but also is anything here tagged as a heading that maybe shouldn't be? So if we look at this right now, the main website has that heading of we build brands online and then it says below it in a heading three, data-driven strategy and innovative digital solutions for non-profits, social good and enterprise organizations. Is that really a heading? What do we think? No. We probably tagged it as a heading three because we wanted it to be big. We've all probably done that once, right? So I'm looking at this and it's not just about, oh, that needs to be heading two. Like you have to sort of think critically about some of the stuff, right? And that's why automated tools can only get us so far. So I would go if I was gonna fix this and that would not be a heading. So I would go through all of that. I also look for headings that are missing or that aren't clear. I can see there's definitely some stuff down in the footer that is a little confusing. Like I see I have an H2 that's our phone number. Let me scroll down over here. Well, we'll talk in just a minute about reflow. But I've got this, where is that phone number? Okay, yeah, so again, the phone number and it has a weird email address because we did search and replace. But again, I don't think that's a heading and then below that we've got the scene on and connect. So one thing that I think about is I could either make those scene ons and connects also H2s so they're higher up in the hierarchy, the outline of the page because they shouldn't really be nested under whatever's above them. But sometimes we don't like doing that. So another way that we frequently will do this on clients websites and our owns is we'll have a hidden screen reader only H2 that says footer. And then we make these sub items, the scene on and the connect, we'd make it an H3 and they're nested over the footer and the nice thing about having that hidden screen reader link is that a screen reader user could hear all of the headings and they could go, oh, I just want to jump to the footer and they could use that H2 footer to skip right to the footer. So there's different ways. So this is this tool and some things you might think about if you're using it on your own website. Let me reset my. So another tool that I find super neat is Taboli. It's TabA11y, Chrome extension. I don't know that this one has Firefox extension. So basically I turn it on and I can change my colors and set some different things. I'm only default settings. I just hit run Taboli. It's gonna tab through my page. And then what it does, again, we're gonna ignore at the top bar where we come back up to the word per seven bar. Normally I'd be logged out. But I can see a zero on my skip to content, then a one on roadwear creative logo, two going across the naps. So what it's done is it has found every tab stop on this website, every focusable element and it has put a line and a number. So I can see, are they in the right order? You still have to do this yourself, but it is really important to, it's really important, or it's really helpful, sorry, to have a tool like this because if I wanted to screenshot this real quick, so what I'm noticing right here is my go button. Doesn't have a tab stop on it. Maybe it's not a button. We could look at that in a minute. I could just screenshot this and give this to our dev and be like, I don't know why, but I can't tab to that. Or if the order jumps back and forth, you really want it to follow left to right and down the order of the page. So you could look and see if there's something where I was down here and it skipped something or it jumped back up or it went to the right and then to the left. So that's sort of a cool tool. Yes. Yep, so this is a Chrome extension. It's on, it is linked on our slides called Tab Ali, Ali, A11Y. So let me turn it off. Oh wait, I'm just gonna reload the page, that might be faster. And then another one that is kind of neat is ColorBlindly. What I like about ColorBlindly is it allows you to very quickly mimic different levels of color blindness. So we could toggle a different one on and one of the things we want to look at, now this website, it fails color contrast, I'm gonna tell you right now, that bright green with white, I just know that, looking at that, it's gonna fail. But if you had different colors where you were, you should never communicate something with color alone, but let's say you had two different colors, you want to make sure that even if someone can't see all of the light spectrums, that they still look sufficiently different and so that's where a tool like this can be helpful. So we'll go back to normal. And I know I'm going fast, you guys. So those are some of the like tiny helpers that I'll use. And then what we get into then are scanners. And we can do some, you can use WordPress plugins. So I have ours, there's also two others that are similar to ours, different in different ways, but WordPress plugins that are available. And then you can also use browser extension scanners or you can use SaaS software that will do like bulk scanning, two examples of which are Site Improve or Monsito. So when we're testing our own websites, we do use our tool. We will go, it has the ability to run a full site scan in the pro version. And so I can come in and I can just scan everywhere and I can see something like there are 7,380 links that open in a new window or tab on this website. In our plugin, we have errors and warnings. Errors are something that is definitively a problem. A warning is either a best practice but not a clear violation or it's something that it just requires human assessment. So Aria Hidden is a really great example of that. And we could click into Aria Hidden and take a look at some of these. So right here what I have in, and right now it's definitely pretty developer friendly as far as the code. We're working on some things to make it less so but we're not less developer friendly but more friendly to non-code readers. But for example, what I have here, this is a warning. I have an Aria Hidden on a link. I happen to know this font awesome just because I'm familiar with this website. It's my website. It's down in the footer. We have some links here, right? Now Aria Hidden means a screen reader will not be able to access the icon. But what I would do if, oops, wrong, sorry. We don't need to go LinkedIn. Okay, so what I would do is I would inspect this. And I would want to see if there was any alternative. So in this instance I can see I have a link. I have a link that goes to the LinkedIn page. Like it's opening in a new tab. I'd probably remove that. We don't link to new tabs anymore on our social media. And then the icon that's hidden. And then inside that same link I have screen reader text that's hidden that says LinkedIn. So what I know actually is that it's correct that this icon is hidden. People don't need to know there's an icon there because they can still hear something meaningful. So you do have to do some looking at HTML and getting familiar with what HTML structure would be as part of your testing. So in our specific tool, this is what we might call. It's not really a false positive but it's something that I had to review and decide. If it's a problem or not. But I don't want to see that again because it's going to show up on every page. So on the fast track I would actually go in here. This happens to be the Instagram one. I find the LinkedIn one but this one's at the top. And I could hit, this one already has one actually. I could hit global ignore. And then it wouldn't show me that ever again on any current pages or any future pages. So that's sort of a tool. So we do a lot of this where we go through and we'll look at what's in the header and the footer and some of those reports. When we're editing individual pages, we'll go through and look at the reports here. So this is another example of a false positive. I have a Facebook pixel. And we've noticed it doesn't have all text but Facebook pixels don't need all text. So I would also probably enter a global ignore for this. But I could look at things like ambiguous anchor text. Oh, I've got a button with a learn more. I could go find that and make that be more meaningful, learn more about what and explain what that is. Oops, sorry. So we'll go through and use the automated tool first. There are other automated scanners. I don't have time to show all of them to you but I did want to show you all acts pro because one of the things I really like about acts pro is that they have some tools to help you with some guided manual testing. It is paid. They have a free version of acts. The pro is 49 a month. So let me show you that real quick. So if I go into acts dev tools and I actually think I'm going to now log out of this website. So I'm just going to start by scanning all of my page and it has found what it thinks are eight issues that are serious. If I click on one of them, then so what it's flagged for me is color contrast. What I think is somewhat useful to note about any of these tools and ours too. Like you may notice that we miss some things. You noticed our tool found that learn more button and was like, hey, this doesn't work, acts didn't. But there are things that acts might find that we won't find. So a lot of times we are using multiple tools because it's better to have more thorough testing in your automation. But what I really like, oh also one thing that's nice about acts pro if you pay for it is you can actually save and export the reports if you need to to like a CSV. So let me go over to guided tests. I'm going to, the first time you go it's going to ask you to save it, you just give it whatever you want. It'll default to the page name. Oh, there we go. Okay. So there's done some automatic testing and then I could do different things. Let me see what's a good one to show you. So we could do the image check. So you pick a test, it says let's get started. This is where we're going to do, we're going to hit start. Now it's going to go through and capture screenshots of all the images it finds on the page. And then we can select what we want to test. Right now I'm going to select all we might not actually finish them all, but. So the first thing it says select all of the images that are used solely for decoration. So what I could do is I could look at all of the screenshots and some things are a little weird. Like there's a group here where it took, it's actually text. But I could look at, for example, this Tommy's logo and let me see if I can find that one. Yeah, okay. So these are down here. I actually know that's not negative. That's meaningful because it tells you who your clients are. So let's see, are there any decorative images? There might not be. So okay, there are no decorative images here. So I would just hit next. Now if I selected one, and you don't have to worry if it took a picture of something that's not really an image, it doesn't matter because it'll skip it, but we could just pretend that actually I'm saying, oh, this image back here, it found this one, this is a decorative image. So I'm going to hit next. Then it wants to know, select all the images excluding logos that contain text. Well, I know right now none of the images, we don't have images of text, so I'm just going to skip it. And then does the accessible text tell you what the image is for? So what it does is it shows you the image and it gives you the alternative text that we have on it. So in this one, it happens to say, road warrior creative logo. And also it's a link. So does that tell you what the link is for? No, where do we think the, what would be better alternative text for this? Anyone have any ideas? Yeah, go to the home page, road wear creative home page. So that's something really important with images and alternative text. You want the alternative text to explain the purpose of the image, not necessarily what the image is. Sometimes the purpose of the image is what the image is, right? But sometimes it's where it goes or what it does. So in this one, I would say no. And then what happens is it would actually go through all of them if we were going to. And then it ends up saving all the things that I said, oh, this one's actually decorative. If that one has alt text, which it shouldn't, it would save that as an issue. In this one, it would save that we said, no, this doesn't have it. And it would create issues. So this is a handy tool because it can help you learn about some of those tests that you could also just do manually on your own. So that's why I like X-Pro. So you would have a normal HTML A tag for a link. And then you'd have an image inside it. And the point specifically was that when you're linking an image, the alternative text on the image is what gets read out. So we can actually listen to this. After lunch, we do screen reader stuff. And it will, so this would say link, roadwork creative logo. So if I were to hear that as a screen reader user, I would think that that link would take me to the logo. Like maybe I wanted to download the file or save it, right? So that's why you would want it to say, go to roadwork creative homepage. And there's a whole nother conversation about whether on the homepage that link should actually exist. Because it just reloads the same page, which is a little bit weird and confusing. But again, that's one thing that it's not really an accessibility violation, but it's nicer for usability. Does that kind of answer the question? So the other really popular automated tool is Wave. A lot of people like Wave, it's the most used. It's also the one that I've noticed when I've read lawsuit briefs mentioned. I think Wave is handy. I'll quickly use it, especially on a plugin demo website, if it's a new plugin I've never used before, and I'm trying to see what issues might exist. There's some stuff about it that I don't think are as great, one of which is that it lists, yes, you can see, look at, we have 438 contrast errors. Which you might say, there's not actually 438 issues here. I'm sidetracking, but this is actually good. So anything you see in a Wave report that looks kind of grayed out and not full means that it's visually hidden on the page. What I know about this page is that this whole section here in the green, it actually changes depending upon what you choose in the dropdowns. So there's a couple of ways, and if I were to click on one of these, so if I click on something I can see, it will jump me there and show it to me, but if I click on something that is hidden, it wouldn't be able to show me this particular element. So you can either expand the code up and then click on the hidden thing and it would show you, start it well in that instance it showed it, but it will show you in the code, or you can also just quickly turn the styles off for the entire page. That's a little harder with the color contrast error. To actually see what the problem is, but if there's something else you can't find, that's another quick way to now make everything as visible because display none or whatever might be on that is no longer on it. What I caution about Wave though is for example, images missing or with empty alternative attributes, they call that a feature, which it could be a feature. If it's a decorative image and it's correct for it, but it could not be, so don't just think, oh, I only have to look at the errors, you also need to go through the features. Yeah, so that's an interesting question, right? The alt text on this image is the whole inch a lot, which really is not good alternative text at all. Could be a decorative image, but I tend to err on the side of any photograph is not decorative because that photograph is communicating something. So the text here, which probably many of us cannot read because it fails contrast as hello startup, so you need the whole inch a lot of, we can help with that, whether this is your first venture or your fifth, blah, blah, blah, right? And then it has a picture of inch a lot is and the idea of being, it's trying to communicate like a personality thing, right? Like we're not just, yeah, we're not just being like, here's your stock photo of a website, right? So also this website, we did a lot of work for food brands. So what would be better is if we like, I think people need to know that there's an image of an inch a lot of there because it communicates something, but I would be more descriptive of what it is. You know, okay. Does anyone have any questions about automated tools before I do some keyboard testing? Yes, so the question was, can I address when it's okay to open any link in a new window? Generally, it is almost never recommended to open anything in a new window. The exception being, for example, on a form, when someone has to accept privacy policies and you wanna link to that privacy policy, obviously you wanna open that in a new window because you don't want them to lose their progress on the form. That would be like one example in which you should do it. You still have to warn about it, but generally you should not open anything in a new window. That is a massive battle that we have with clients all the time. And they're like, well, any offset link should open in a new window. Well, really you should give users the ability to control and decide how they wanna open links. It is not a clear WCAG violation, so it's harder to convince them with, this is the success criterion that you are failing and so therefore you can't do it. But what is recommended is having a visible warning and an auditory warning for screen reader users. So we actually have a plugin that's free on dot word, it's so basic, I don't even think it has a fancy image. But it's called Accessibility New Window Warnings and when you turn it on, it looks for any of those targeting cool blanks and it will add a little icon and it will add screen reader warning. And it works too if you have linked images that go, like it'll put the little icon next to them or social media icons, that sort of stuff. Okay, so let's say I've done all my automated testing and I fixed all those problems. So there was a ton that I just could have fixed off of my automated scans, right? So we're gonna pretend I did that. Now the next thing I'm gonna do is, I'm gonna come and I'm gonna keyboard test. The first thing I do is I hit tab. So I noticed something, I hit tab and it went right to the logo. What you need on a website is skip links. So the first thing that I should expect to see and they do not exist on this website, but I will show you on, this is not a live website yet. It's for our podcast, we're starting. And I'm showing you on this website for a specific purpose. So if I hit, well, where was I? So if I hit tab for the first time, I want to see a link pop up that was previously hidden that says skip to content. What this allows someone to do is bypass the navigation and this does have a success criterion. It's called bypass blocks. Bypass the navigation and get right to the content so that they don't have to go through the navigation menu on every page they visit. Like every time they click a link then they're forced to go through nav and before they can hear what they want, right? Obviously there's other ways they could just do an H1 and skip that way. But what if there's content before the H1? Cause that happens, not great, but it does happen. So really we want to have a skipped content link. So I check to see this is here. On the other website, fail, it's missing. If one exists, I then test the functionality and this is really important, don't just say, oh, it's there. So it's a link, which means you use the return key. So I hit the return key. It visually scrolled me down. But what I want to make sure of is that it actually shifted my focus to that area. So you might expect to see a focus outline, around the content when it goes to that if the styles have been added for that. And that's super ideal. But if not, you can quickly check that just by hitting tab. So if I hit tab, I'm gonna expect my tab to go to the first focusable element. So that happens to be a listen on Apple podcast, SVG that is link. So I'm gonna hit tab. What did it do? It went to accessibility craft, which was actually the next focusable item. This thing drove me bananas and there's a whole other conversation we're gonna have on this podcast about why I chose to build this website this way just to torture myself. But why did it do this? And I see this a lot of times. This website is using Astra and Astra has a fancy scroll to option in the customizer that will make things scroll nicely down the page instead of just jumping to any anchor links. When that's turned on, it breaks your skip link. So anyone who uses Astra do not use that feature or go submit a support to it right now. So anyway, this is an easy fix. We can just go turn that off. It took me forever to figure that one out, but you can turn it off and it works. But I wanted to show you because it's important to not just know that it's there but know that it takes you right where you wanna go. So again, that would be something we would mark as a fail. So the navigation, I don't have dropdowns on this one. So it's not a great example, but if you did have dropdowns, you would wanna make sure that you would be able to get to everything in the dropdowns. I've seen a lot of times on a lot of themes where the dropdown menus don't open. You can't tab to them at all or you can tab to them and they're tabbing but you can't see anything because the CSS isn't there to make them visible for on keyboard focus. So you really wanna do that. Steve actually gave a talk at WordPress Accessibility Meetup that we'll have a recording for about accessible navs and we could answer more questions about that later. So I go through and I make sure I can get to everything that is focusable. So I got to this dropdown, that's good. Am I able to control it with my arrow keys and then pressing return to change what it is? Yes, same thing, I hit tab, go to the next one. Look, I can't get, we knew that already because we used tabling but I can't get to that button. Now in this instance, it did actually work because of the way it's been coded, it changed the content. So now it says enterprise business and social media management but a person wouldn't know that unless they hit tab or went down, right? So the button still has to work even though the dropdowns alone changed the content. I don't actually think like that, I would probably actually mark as a failure because normally we only want people content to change on a submit. So the fact that the content changes when the dropdowns change is a WCAG failure. So as far as this specific button, like again I do a lot of just inspecting and looking at it, oh, look at that, it's a div. What should this be? Anyone know? A button, look at that, we have that. Now of course if we're fixing this, we might be like, oh man, it came from a plugin. I can't change that. So maybe it's easier for you to take JavaScript and inject role equals button, that is sufficient. There's a lot of ARIA that could be added to dibs. Of course if you can make it the correct semantic HTML tag, that's the best thing to do. But again, I'm kind of doing a little bit of like checking things out and then looking at them and the inspector to try and figure out what the problem is. But if you're not super HTML friendly, you could still, it would be enough to be like I can't get to the go button with a keyboard and send that to your developer. And she or he will be able to figure out why. Sometimes it's easier to just be like, this is what I'm, you know, because I know it and I'm just like the go button is a div. I roll emoji. Hey guys. So this is the thing of. A lot of frameworks. Yeah, the thing that's weird about that and what you really wanna think about is and we have a check for this in accessibility tracker which the documentation explains really in detail which we call improper use of link. So a link is intended to be something that goes to another section of a page or goes to a different page. And a button is something that submits information, opens a modal, triggers an action. So while hitting this and if I actually will just change this to let's see internet traveler who's interested in, oh look at that, I can't even see the whole dropdown. There we go. Free stuff, go. So it does jump to that section but I still don't think it's a link because it's submitting information and changing the content. So therefore I think it is a button and not a link. Even though part of the function of the button includes the scroll action, I'm a little questionable on the scroll action. I'd have to go back and spend time looking at WCAG and decide whether I even think that's okay. But yeah, actually so the Accessibility Craft website, I'm building an Elementor because I wanted to torture myself. And while also I really want to prove that you don't have to be a developer to build accessible things. And so I intentionally was like, I'm gonna use a theme, I mean it took me a while to figure out what theme I was gonna start from. And then I'm gonna use Elementor, I bought a template kit so I was like I don't want to design it, like I'm gonna pretend that, and also let's be real, I'm not a great designer anyway. But a big part of that, or yeah anyway, so I want to prove that you don't have to be a developer to do it. So I decided to do an Elementor. While all of the links that are styled as buttons and Elementor have roll equals button on them, which is not actually the case because they're links that just go to a different page. So I a little bit failed because I had to go to Steve and be like, Steve will you write me some JavaScript to remove that? Right? And so sometimes I think there are things where you just have to get a developer to fix it, but like a lot of times if you pay attention, you can get very close without of the box tools. And also I could have just decided not to use those little button things and I could have used, like I actually checked the ultimate add-ons for Elementor, they have a button group block that doesn't do that. So I might just say, well I'm not gonna use Elementor Pro Buttons, but I'm gonna use it from some other add-on for Elementor, or I'm just gonna add links in a text widget or something. So there are always workarounds I think generally, but anyway, so you want to kind of go through the goal is to go through and ensure that you can get to everything on the page. So again, this is sort of an interesting test, right? We were here, let's say we were here, we can't get to that, but if I hit this, if I hit tab, so this at least it shifted focus and now I hit tab and I'm down where you can't read it because it's hard to read. So I'm making sure every link, I'm also looking for this focus state, so I don't know if y'all can see this on this particular background, but it's a blue and a white, so I wanna be able to see where I am every time I'm going through, I wanna see a good focus state. So this website has a pretty good focus state on it. It should have good color contrast with the background, so it needs to sufficiently contrast. We typically do a two pixel solid. So let's see, now I'm down here in case studies. It looks like, yeah, this is just text, it's not a link, so that's the link. I would check this out, because case study and I noticed, well, there's three case study buttons, links that are styled as buttons. So I would kind of, in my head go, oh wait, are these, oh, I think I know how to right click by now. All right, like, are these unique in any way? And in this instance, they're not, so there's a couple ways we could make these unique. We could add hidden screen reader text into them. There are tools for doing that in the block editor, even in Elementor, you can add a span, you know, when you're adding stuff. You could add an ARIA label also, but we need to be able to differentiate between the three case studies links, because it's not helpful for somebody to hear, link, case study, link, case study, link, case study. Where would I go? Why would I pick case study two versus case study one if I can't see any of the other information? So that's something that I would flag. Let's see. All right, here's a fun one. You can get our seven week course. We have very neatly designed forms with a green line underneath and no field outlines. That green fails color contrast. Color contrast applies to borders for fields. You should really have a full border. Designers like to design things like this, not good for accessibility, because people have to know where to click. You know, a user that maybe has low mobility, but they still use a mouse, it might be harder for them to get into a certain area, so let's show them the borders or the boundaries of where they can click. So I would flag that. I would flag the lack of color contrast. I would also flag that when I start typing in here, Jane, Jane Jetson, I have now lost my labels. Actually, we haven't looked at this yet, so I don't even know if these are labeled for screen readers at all, because what we were using, placeholder text. Even if you have a screen reader label, which I suspect these do, because this is probably a gravity form. So let's see. So this field, it does have a label. So a screen reader user would hear last name, and they would know, and they'd have no problem with this. But you always have to have a visible label, even when the information is typed in. And that is for people who maybe have memory issues, or who have cognitive disabilities. It's especially important because let's say I go, and this website, I don't have anything saved, but I did auto-fill, and it auto-filled in my name right there in the company name, or put my address, because I don't know why. Browsers do weird things. How would I know before I submit the form that it put the wrong information in the company name box? It wouldn't. So I do a lot of that kind of looking at forms, and again, that's something that an automated text and cool can't really tell us, because this would not come up as a problem, because it would come up as a problem if it was missing this label here. But because this label is present, an automated tool is not gonna realize that this label is visually hidden. For people who are sighted. So that's why you have to do some of this manual testing. So I look for all of that. I'm also going to, when I keyboard test, I'm going to try and submit my form, and I wanna see that I have good error messages. One, there's good color contrast, they came up. Do they help? So this one phone format is telling me what format is expected for my phone number. Those sorts of things would be important. And then basically it's sort of the same thing down the rest of the page. Can you tab to everything that you need to and engage with everything you need? And those are the basics of what I'm doing on keyboard testing. The other thing I would probably do, but we'll wait and do this with a screen reader is I would try and submit the form. So it is noon and I'm sure everyone wants to move around a little bit and get some food. So we're gonna take a break for about 30-ish minutes, maybe 20 if people want extra time for screen reader testing. Go grab some food and then we'll come back and I'll turn on voiceover. Welcome back. So we're gonna talk about screen readers. There are three primary screen readers that people use. They are device specific. So I am on a Mac. I will be showing you today voiceover. If you have a Mac, voiceover is just built into your Mac. You have it and it's pretty easy to turn on. If you have a Windows machine then the screen reader you would use would be either NVDA or JAWS. JAWS is a paid screen reader. NVDA is open source and it is free. So that is what most people use. The most common, yes, Chromebook would also use an NVDA. So it works on anything that's, yeah, yeah. NVDA I think is gonna work on Chromebooks. If it doesn't and you have trouble installing it today, if you haven't tried yet, we can try and figure it out. The most popular desktop combination for blind people is NVDA Windows using Chrome. That is what they most frequently use. On mobile, the most popular device for blind people is iOS. So they are more frequently going to be using voiceover on mobile. There are some users, obviously, that use the full spectrum of devices and different browsers and those different combinations, but those are the most frequently used. On the slides I have links to keyboard shortcuts for each one. You have the ability in your settings and I don't have enough time to go through all of the settings today in voiceover. If you're really interested in getting proficient, we're actually running some webinars this month on that. One on voiceover and one on NVDA with the Carroll Center for the Blind, they are gonna be teaching those. But having these open is very helpful. If you are a voiceover user, one of the things that is good to know is that the caps lock key, if you hit it, will make it stop talking instantly. When you first turn it on, it will start talking to you and if you've never done it before, it can feel overwhelming. So that's what I'm telling you now. Caps lock key, be quiet. But basically there's a whole bunch of different keyboard shortcuts. I also have a link to the one in NVDA that you can find and use. So I am going to turn on, I'm gonna go back to our lovely road where your creative website, refresh it. I'm going to turn on voiceover. So you can get to voiceover if you're on a Mac by going to System Preferences. I'm already actually have it open, but if you go into your accessibility, so be here, accessibility, and you enable voiceover and it will start talking immediately. Voiceover on System Preferences, accessibility, window, accessibility, features, table, voiceover, selected. All right, I don't know if we want to volume that down slightly, but. So one thing I like is it has the speech viewer, so you guys will also be able to see what it is saying at the same time. I hope it's not muting itself. That might be someone else's computer in the room. That's all right, all good. So what I'm going to do, yes, Steve? Yeah, I can put that on the top, I'm gonna sing it. Road Warrior Creative Marketing Agency, Web Design, SEO, Social, Google Chrome, Window, Word, Camp Birmingham, Accessibility, Testing Workshop, Google Slides, Tab, Group. You are currently on the Tab, Group, Inside of a Group. Okay, so what I'm going to do, and I'm gonna tell you right now, a blind person does not do this when they go to a website. But what I like to do is I will go to the page and I will ask the screen reader to read the entire page to me. I will watch it go through the page. You're going to see it highlight elements and I will listen to what it says. What I am doing just initially in that overview is listening for anything that sounds wrong or weird. And then I will go back and re-listen if I need to. A blind person is not going to come to your website and be like, read the entire page to me on every single page. They're gonna use shortcuts like headings, they're going to hear lists of links to jump around, they might even use a search function to search for certain words that they're looking for if they know what they're looking for. But as a sighted person, I find this helpful for me to compare what I'm seeing visually and to just listen and then go back. So what I'm gonna do, and I will not talk over the screen reader, so that is one thing that I do wanna say. If anyone ever demos this, I've seen people try to talk over their screen reader, it's so bad. So if you ever do that, don't. So what we're gonna do is we're gonna go to this page and we're gonna listen to what we hear as if we were a screen reader user. And I'm gonna make it slightly bigger. R-O-E-T-W-E-R-I-O-R visited link image, road warrior created logo banner. Road warrior created, you are currently on Link. To click this link, press visited link image, road warrior created logo. List six items, Link, culture, Link, services, Link, case studies, Link, insights, visited Link, certify, decorporation, All right, so I'm going to stop for just a minute. So on the navigation, what's really important there is it told me list six items. Navigation menu should be coded in list. It's really helpful for users of assistive technology because it provides information. So when they heard that right away, they knew how many navigation items were going to be there. One of the frequent mistakes that I see on a website in WordPress, especially with certain themes, is that, let's say I had wanted my contact link to look fancy like a button. Frequently, we see this being done with maybe a widget area added over there, and you stick a button in your widget area, and then what would happen is I would get here and I would hear list five items, and then it would read me the first five, and then it would tell me there is a contact there. So that button would be outside of the navigation group. I see this, it's like a very frequent problem. So if you ever want to style that, that's why you can add classes. So you add classes, and then you style it with the class. So that's something I'm listening for on the navigation menu is are they all grouped together? Do they have the right number? If we have time later, we could go look at a much better navigation that has drop-downs and things like that if people are interested. So now I'm going to keep going on the page. Heading level one, two items. WE, build brands online. WE, build brands online. Heading level three, two. Oh wait, hold on. That sounded a little weird, right? So WE, build brands online. So screen readers can have trouble with all caps. This can happen, and we'll inspect this right now, and see, I don't actually know right now. I don't remember if this is typed in in all caps, or if we use CSS. So that's what I'm going to check for right now. WE, selected. You are currently on menu. DevTools, web content, elements panel, DevTools is docked to write. You are currently on the table. To enter this. All right, so it is typed appropriately. It's using CSS to transform it to all uppercase. You should never have anything in all uppercase unless it is an acronym. And this is a really great example of why, because a screen reader, even when you're just using CSS to style it that way. So designers take note. Nothing should be in all uppercase. It's also harder for people with certain reading disabilities to read things that are in all uppercase. So that's another thing that we think about there, too. Yes. So for best practices and accessibility, you never use all uppercase on anything. Either title case or sentence case is what is recommended. So designers have a really hard time with that. They like to put these, especially when they're doing the little eyebrow accent headings. They're all like, this is going to be all uppercase. And you just have to tell them, I went back and forth with our designer in the beginning and I was just like, I will not approve it. I don't want it. It's hard, too, because the letters, when they have that, designers are like, it gives it a uniform shape. But a uniform shape is what makes it harder for someone with dyslexia to be able to read, too. So that's not just a screen reader thing. This is a great example of where a screen reader would read something weird. And something like that, it's just extra processing to hear that and have to go, we build brands online. And so we want to make it as easy as possible and not require extra mental processing for our website visitors to have to figure out what our website says. Road Warrior Creative Marketing Agency, web edit text, blank, blank, contact, list six items, blank, contact, heading level one, two items, WE, build brands online, WE. Okay, I want to talk about this also. You notice how it said two items inside that heading? That is because we have this span tag here. Because this page, if you load it, it actually has text that changes. So let me refresh the page and hopefully it will work. Road Warrior Creative Marketing Agency, web, banner, visited blank image, Road Warrior Creative Logo, list six items, blank, culture, blank, services, blank, case studies, blank, insights, visited blank, contact. All right, so what's happened is we're changing, we have like five, I don't know, four or five different things that we say. We're not looping it, which is actually good. Because there is a criteria that says anything that plays for more than five seconds has to have the ability for a user to stop it. So if we were looping that, we'd probably actually have to have pause button right next to it that's like, stop this. But here's an interesting thing. If we think those words are important, we amplify personalities, we tell stories, all of those things. Someone on a screen reader by the time they get to this heading, they're not even gonna have that information. All they have is we build brands online. We try very much to advise against this. I don't think it's as common now as it was maybe in 2017 when this website was built. But that would be a problem. That would be something I would fly because there's no way to get the other information. Also, that reads out as two items because of the span, because we're making one a different color. And that's, again, it's disruptive to know that there's two items in the heading, like it should all just be the same color. And just be one thing without the span class. By the way, if you put like a hard, like a BR tag, that will also sometimes cause it to read multiple items. And the flow is just not good. Add a text, blank, main, blank, contact. List six items, blank, contact. Heading level one, two items. WE, build brands online. WE, build brands online. Heading level three, two items. Data-driven strategy and innovative digital solutions for non-profits, social good and enterprise organizations. Data-driven strategy and innovative digital solutions for non-profits, social good and enterprise organizations. Heading level four, nine items. I'm E-N, startup. I'm E-N, menu pop up, collapse button. Start up, down pointing small black triangle. That needs the whole inch lava. That needs menu pop up, collapse button. The whole inch lava, down pointing small black triangle. Bell, I'm E-N, I'm E-N, startup, startup, black down pointing. All right, this is super overwhelming. If you heard that, you would probably leave. Or you'd immediately try to move forward. You'd be like, I don't even know what's going on. It read out the little down pointing triangle or something. Right? It also told us there's nine items. Again, this is because we have different things contained in here. I'm going to actually tab through one of these drop downs. Now remember, these drop downs worked for us with a keyboard. But what's important to notice just because something works with a keyboard doesn't mean it won't sound strange to a screen reader. I edit text blank, edit text blank. You are currently on a button inside of a heading level four to display a list of options. Press control option space. Yeah, so it's reading to me as a button. I can use my arrow keys to go up and down on these. But you notice as I move my arrow keys up and down, I'm not hearing anything. I edit text blank. You are currently on a button inside of a heading level four. It also told me edit text blank, which is what I would expect if it was an input, like a text field. Like I should be able to type in here, which of course, even if I typed like. Indeed, you are currently on a button inside of a heading level four to display a list of options. So I could type a letter and it might jump me to that thing. But it also just told me I'm on a button. But it didn't tell me what the button is or what it does. So obviously, there's a lot. Poor Steve. There's a lot here that is a little weird. And so this is a great example of something that works OK, I mean, besides the go button, works OK for a keyboard-only user. But for a screen reader user, it's not functional at all. And we could look at that for a second. So what we have, and I think this is probably using some third-party JavaScript library is what we were discussing at lunch. So it's using Selectric with the scroll. So these are lists, items, just in a div. So this isn't actually coded as an input or a drop-down at all. It's just been styled to look that way. And then it has JavaScript that makes it work with a keyboard to select and with a mouse to select. But it doesn't have anything that communicates meaningful information to a screen reader. So we can move on. So this is sort of interesting. We're going to hit Go and watch our content scroll up. Let me just make sure I'm doing it again. I'm trying to see if it'll read me that out when it changes. Let me just make sure I'm doing it again. I'm trying to see if it'll read me that out when it changes. All right, yeah. So this visually scrolled me down. It didn't tell me that there was a change. I'm going to show you in contrast. Of course, this isn't a carousel. I don't have a good example of something like this, but I want to show you on a carousel something that has a really good focus management on it where when the carousel changes, it moves over. So we have WCAG 2.1. On our website, on one of our service pages, we have these carousels that are text carousels. They have navigation dots down below. And just listen what happens when the active carousel changes. Yeah, it's a free risk assessment. WCAG 2.1 WCAG, where web content accessibility guidelines serve as the basis of accessibility. Go to WCAG 2.1 slide button, list six items. Go to section 504 and 508 slide button. You are currently on the button. All right, so quick point. If you're doing carousels just out of the box, these would do something like go to one of five. That might be five dots. That's better than sometimes they just say button. But even that isn't super meaningful. So if you're building carousels, it's nice to give meaning. So this tells people go to section 508 and 504 and 508. So they would know what they would go to if they would select that as opposed to going to two of five. Like why do I want to go to two of five? So I'm going to hit the return key to trigger this. And then you should visually see the slide move. And then we'll listen. WCAG 2.1 section 508, Canadian Website Accessibility Audits, Article Section 500 and 508. These laws most commonly applies to government agencies, K-12 schools. All right, so what we've done there is we have made the visual effect happen, but we've also moved the focus to that element so that they are able to immediately start hearing what they heard. So that would be if I was going to keep that scroll up on that website that I don't use anymore. That's what I would expect. It would scroll up. And then I would want it to read the heading and start reading the text to me, not keep my focus up here in the dropdown that I've already made a selection in. Road warrior, creative marketing agent. All right, so we can sort of continue down through this. Selected, blank. Strategically create the marketing vision. You are currently on a blank, blank. How we help? How we help? You are currently on a blank. To click this blank, press control, option, space. All right, so I'm going to just have it read a little bit ahead of me here. Blank, how we help? The whole enchilada image, heading level four. Word for solutions panel, heading level two. Connecting individuals, employment assistance services, virtually. Case study, heading level four. CSUs down, heading level two. Building bridges to support sound education in the community, blank. So this is a really great example of, when we're talking about headings and how they don't make sense. Normally, you nest headings hierarchically. We talked a little bit about that before. But in this instance, the name of the company is a heading four. And then the case study title is a heading two. Well, the way this would sound to someone if they were going through it potentially is that the CSU STEM name would actually be the company that goes with connecting individuals with employment assistance services virtually because it is a four under a two. So in this sort of instance, there's a couple of ways to do it. You could wrap the entire thing in a heading. What's a little weird about this is there's not really any information. There's just a button. There's, well, a link, sorry, that's been styled with button under this. Normally we like to see content below headings. Like I might not even make these headings at all. They might just be large styled text. And it might be even more helpful to hear that this is a list of three items. So I know that there's three case study items that I can potentially choose from. So maybe these are, even though it's styled this way, it could still be grouped in an unordered list with each case study in an LI. So I'm kind of like trying to think those things too, like what might make, communicate more information to people as we're going through. So this slider here will be interesting. It moves very slowly, but it does go for more than five seconds because it never stops. So it needs a pause button. Someone with ADD might find this really distracting. Luckily we have it set up where, luckily or not luckily, I don't know. Some carousels when they play like this, every time they change, they read out. They announce the change. So even if I wasn't looking at this and I was higher up on the page or lower down on the page, no matter what I was reading, I might interrupt my screen reader and say, Colorado State University, lesbians through tech. We can start up just in the middle of whatever I want. So this is not doing that. I suspect it's not doing that because I can get no information out of it. We're about to find it. LENG, case study, heading level four, tech jobs tour, heading level two, building diversity attack. LENG, case study, heading level two, two items, our clients, our clients. Tommy's superfoods logo, image. Bond logo, image. Include.io logo, image. Tech jobs tour logo, image. Colorado State University logo, image. Lesbians who tech logo, image. Lead and start up code, logo, image. All right, so that was okay. Again, the break there is what's causing it to read a heading out twice like that. And it's really disruptive, so really you don't want to. It'd be better to not have a break and style the container or something so it forces it to go to two lines. I'm gonna turn this back on and we're gonna see if it just keeps reading. I don't actually know because I don't remember. Tommy's superfoods logo, image. Bond logo, image. Include.io logo, image. Tech jobs tour logo, image. Colorado State University logo, image. Lesbians who tech logo, image. Lead and start up code, logo, image. Tommy's superfoods logo, image. Heading level two, two items. Marketing strategy, perfect. All right, so I didn't, I was actually expecting to get a trap. Where we just keep going and going and going. But it looks like it didn't. So that's good. I might argue that we don't need to say that it's a logo because if the heading is our clients, it's probably enough to have image, CSU. Image, Lesbians tech, like who cares if it's a logo, right? So again, really thinking about the information. Heading level two, two items. Marketing strategy, perfect. Marketing strategy, perfect. Heading level four, seven weeks to a better online presence. Enroll in our free digital marketing strategy course and receive weekly access to online course materials, including videos, virtual worksheets, and actionable advice. First name is our first name. Required, edit text, list seven items. Oh, that was interesting. Let's see. Oh no, it worked out. I didn't need to go that far though. I just want to look at. Customer engagement. I want to look at these check marks. What's helpful if you want to get somewhere just in case you don't know, you can just select it with your mouse and that will shift your focus to that space. So then you can start reading from that point. I'm hitting caps like A and that's what's making it just like start reading from where I am. But again, look at those cheat sheets. Resulting an increased whether you manage marketing for a food brand or a social organization or you're an entrepreneur just getting started, we will send you relevant real world concept examples and information you need to go in the street. This course will help you to develop a targeted marketing strategy that increases community and customer engagement. Resulting an increased ROI from your digital marketing efforts by the end of this course. Checkmark. A deep understanding of your audience and target demographic. Checkmark. Knowledge of how to write marketing messages that really work. Checkmark. Learn techniques for researching and creating the content. Checkmark. Develop an editorial calendar for your blog and social media sites. List seven items. First name star. First name star, first name. Required. Edit text. Last name star. Last names. All right. I take full responsibility for those check marks that are not in a list. That's totally me. They should be in a list. Also the checkmark is decorative. It doesn't need, it's probably an emoji or like I copied and pasted it somewhere. I'm sure. So that should be added with CSS. Or if we really wanna put it there, we put an aria hidden on it and then it won't get read out. The form I thought was a little weird that it said that it was a list. So we're gonna go back up and we're gonna kind of listen to the form again. First name star, first name. Link. Case study. First name star, first name. Required. Edit text. List seven items. You are currently on the text field. Last name star, last name. Required. Edit text. You are currently on the text field to enter text in this field. Type. Yeah, so that, it sounds okay. It might just be a weird like how it was grouped. Normally gravity forms, like gravity forms would be what I recommend for building. So generally it's okay. But if you have one what you wanna do is you wanna go through, you wanna make sure you listen for every field that it makes sense. I don't super love that it's got like, it says multiple times. Now why is it saying that? The first name. First name. It's because it's reading out the label that we can't see. And then it's reading out the placeholder. Just don't use placeholders unless you really need to explain the format with a placeholder. But I wouldn't use placeholders at all. Company names dot company name. Required. Edit text. You are currently on the text field. So another failure that are not made until won't miss. A screen reader gets this because they hear it's required. But because we've hidden the labels, a sighted person wouldn't actually know that this is a required field. The only field that looks to be required on this form is the dropdown send me the course for. Increasingly we're actually going to, instead of having the asterisks, having the word required because it is more clear. Notice this doesn't have a key that explains the asterisk. And sometimes I've had clients be like, everybody knows that the asterisks means no. There are people who don't, like we're all in tech, we know what the asterisks means, but there are plenty of people who don't know what the asterisks mean. So we tend to go with the word required. So. So. Thank you. Email is ours now required. Undersore, undersore, undersore, closer. Undersore, undersore, undersore, undersore, undersore, undersore, undersore, undersore, undersore, undersore, undersore, undersore, undersore, insertion on word, undersore, undersore, undersore, between character. What are you doing? So this is one area where, you know, gravity forms, this is a default gravity forms thing. It's trying to be helpful because we've set this to require a US format phone. People on screen readers have told me, like they'll listen to it and they'll be like, oh, I get what it's doing, it's trying to tell me, but they're like, it's again, it's not a failure, but they're kind of like, this is distracting and weird, right? And we're all listening to it and we're just like, what? So yeah, I don't know. So in screen readers, you can change your verbosity settings and change like how much, I have mindset to medium. But I think like, no, I think in an ideal world, we wouldn't have the format here and if we needed to show the format, it wouldn't be in the placeholder position, it would be in a description above. It's not a clear failure on gravity forms part, but it's like one of those things that's less ideal. Also, I need to really warrior creative monthly newsletter so I can keep up with the latest digital marketing insights and news. Don't wanna subscribe to that. Send my free marketing course, but main, you are currently on the button. Please contact me so I can also add me to the word. Please contact me so I can learn more about partnering with road warrior creative to accelerate. Okay, I was just checking because I hit tab and it skipped it. So sometimes I'd like shift tab, I'll go back and I'll be like, wait a minute, but it has focus. I don't know why it missed it. So it's probably fine. Like five, one, two, nine, four, two, five, eight, five, eight. You are currently on the link. So phone numbers are an interesting thing because that is sufficiently fine. But it would be really helpful if it actually said like phone number or telephone link, which you could do with an ARIA label because it takes a minute to have to be like, oh, five, one, two, nine, four. Oh, I'm hearing a phone number, especially if maybe they're not from, like, you don't know five, one, two is the Austin area code. That might be an extra thing. Fine, a new client inquiry form here. You are currently on the link Fine, a new client inquiry form here. Heading level four, seen on list items, link image, Forbes, link image, The Wall Street Journal, link image, CNBC-Maked, link image, Glover, link image, Non-profit Learning Lab, link image, Thick Business Journals, link image, Golan RV, Dialogue Pop-Up, link image, Williamson County's on it, link. See more press, heading level. I don't know why that said Dialogue Pop-Up on the last one. The other ones were telling me it was a link image and it would say like the name, which makes me think, you know, it's going to the Non-profit Learning Lab website or something. So that's one that I would go back and I would investigate. Dialogue Pop-Up, link image, Williamson County's on it, list items. You are currently on the link. So I would just investigate this. Williamson County's on it. Look. And one more item, and one more item, dialogue. You are currently on the dialogue inside of web content. Two minutes. All right, so it's because it opened a article that is a PDF from the newspaper. That's myself and my husband with an iPad. Well, this is really interesting because, so a couple of things with Modals, the, there's some general expectations of you should shift your focus into it. And if there's any interactive elements, so the buttons we need to be able to hit, they need to be coded appropriately. I should not be able to tab out of it. So I'm just going to kind of investigate this a little bit. And then there's the obvious of, this is an image of text. So unless I have alternative text on this that has every single word in this image that I have here of this article, then obviously that would be a failure. Williamson County's on it, and one more item, and one more item, dialogue. Link, close, visited, link image, road warrior, created logo, banner. All right, so I hit tab and I left. So I did have the close button, but I was able to get out, like miss it. Link, cultured link, services. So why is this a problem? Because if they don't hear the close button and they can leave the modal, they might, it might get in the way of other things, or they might be lost and they might be like, I want to come back to this modal. They won't know how to get back to it because now they're at the top of the page. So you have to lock focus in the modal. I'm going to see if I can. And one more item, and one more item. Link, turn. Yeah, I suspect the alt text on this is just Williamson County's on. So not very helpful. So now I'm going to close this and hopefully I go back to the button that triggered it. Link, county's on, and dialogue, pop-ups. Okay, so that actually worked. It took me back there. A lot of times with pop-ups, it goes like to the footer because the pop-ups actually living in the footer of the website, like below the footer, or it'll take you to a weird place. So I want to give time for people to test. So let's take maybe 15 minutes. If you have a computer, pull it out. I'm happy to walk around and answer questions. And, but my goal was that this would be interactive and that you'd maybe try out some of the tools. So if there are questions, we can do kind of live Q&A. We can also just take a minute and all work independently and then come back at the end and discuss what we found. Yes. Yeah, so the button on this says send me my, send my free marketing course rather than submit. I don't think, I don't think it's a clear failure as long as there's an obvious heading that, like, and this isn't, right? Really? So I think what would make this better is having a more clear heading above the form that's like subscribe to the seven week e-course or something like that. And then you could have a call to action on your submit button. You don't always have to use the word submit as long as there's a clear connection. I think you're right here. Like I might flag that as, is it obvious to all users? And that's sometimes where user testing comes in because it's not necessarily a WCAG failure to not have the button say submit. But if you had several users come and they're going through and they're like, wait, how do I submit the form? Or I don't understand what this other button is. Then you might say to yourself, okay, I need to change the language on my button. Any other questions before we do a little independent stuff? I'm gonna meet myself for a minute and then I can walk around if anybody has any questions. But we're gonna take just a few minutes to do some independent. Interesting that they did not expect on their website. Yep, do we have the microphone? Okay. Okay, are you able to tab to it at all? Or not even that? Oh, so it didn't even say the word for the page it goes to. Oh man. Yeah. Well, I'm having to look at that later and give you a tip, but yeah. So that's something until you turn a screen reader on, you'd never know, right? That's a great example. I mean, a frustrating example, but a decent example for today. Anyone else find anything that they didn't expect? Could you, do you mind using the microphone? As a accordion dash page. We were trying to figure out if any of these were better than the other at doing accordions, because you know, accordions of tabs are such a pit of hell. Yeah. And so that was one of the things, because you're going along and you're fixing things and then you get to a tab or an accordion, whether it's a block or an element or widget or a Beaver Builder module or even a third party plug-in and then everything breaks down because it does so many different things wrong. Can you kind of list of all things to look out for when you're doing those? Yeah, so on a accordion you want, so the element that opens the accordion should be labeled as a button. It should tell you with a screen reader whether it's expanded or collapsed, so there's aria of roles for that. And then if there are links inside it, you shouldn't be able to focus on those links when it's collapsed. I've seen that sometimes where you can still go inside there when it's closed. Those are the main things for accordions, which is having an appropriate open and closed state and that it's a button. Oh, Steve might have extra, maybe we can take the, let's have him answer this question. Can we take him the microphone? I was just gonna add that it is required for accordion, so like the button that Amber said didn't have an aria of controlled by and it would be equal to the div ID of the element that is expanded. Yeah. Is that correct? So do you remember where the link for the US web design, where'd it go? Let's see. So the best resources for this is if you go to designsystem.digital.gov, they have a ton of components where you could look at, so I've opened the accordion and they have examples of how they should function and different guidance about what's expected. And obviously there's some other things, like you can see the history of when they've been updated and that sort of stuff. So this is a really great resource if you're trying to figure out what the expected behavior is for something like accordions or tabs. With tabs, they should announce that they're tabs, they shouldn't just be a list of links. They should actually tell a screen reader user that they're tabs. Yeah, that would be incorrect. So, yep. Someone has something over there? Having very little experience with accessibility stuff. Aria-hidden is new to me. Is there an equivalent Aria explicit or something to force a screen reader to spit something out that wouldn't normally be on screen to gloss over some of these issues? No. So Aria-hidden equals true is what hides things. But there's no like Aria-hidden equals false. That's not an attribute. Pretty much if it's there, it will be read out. If something's not in the focus order, you can add a tab index to it to force it to be focusable. And, but no, there isn't really, so. Wait, Steve might have more. I'm not the developer, you guys, I just test things. You could be referencing to screen reader text. Oh, yeah, maybe. So, we talk about adding screen reader text quite a bit. A good example, so when we were talking about those incorrect or like ambiguous links or buttons that don't mean anything. So you can see right here, this just visually says see episodes, but they're going to two different places, conversations and meetup. So if we look at this and inspect it, we actually have see and then an SR only span, so screen reader only text episodes. So on a screen reader, they would hear see conversation episodes and likewise see meetup recording episodes. Because a sighted person has the context, so they don't need that information. And this is a way that you can make your learn more buttons or like those case study buttons still just say, view case study if you don't want it to be the big long name of the company, view blah, blah, blah as case study, but convey that information. Otherwise you could do it with ARIA labels too, that's another things as well. I think I might be about out of time. I am happy to answer any more questions. Afterwards, and then if you want to get a hold of me, this is my contact information. I'm on Twitter, I did the Macedon thing. I don't know, still trying to figure that one out. And I run the WordPress Accessibility Meetup. It is free on Zoom live captioned by Human on the first Thursday at 10 a.m. central and the third Monday at 7 p.m. central. You can register for it at EqualsDigital.com slash events. And if you go on our website, we also have recordings from every meetup that has ever happened with full transcripts available too. So if you wanna find one that's interesting, you can. Thank you so much.