This month we held our inaugural WordPress Accessibility Meetup. As part of our commitment to giving back and sharing knowledge, we applied to the WordPress Foundation’s community team to run an official WordPress meetup centered around building more accessible websites with WordPress. We were excited that our meetup was approved and held the first event on July 1st. This post has a recap from the meetup and video recording of the presentation.
This Month’s Topic
In our first meetup on July 1st, Amber Hinds, CEO of Equalize Digital, discussed how to test WordPress websites for accessibility problems. Having an accessible website – one that can be used by people of all abilities on all devices, including assistive technologies – is increasingly important, especially in the post COVID world where e-commerce and online ordering has become especially prevalent.
In this presentation, Amber demonstrated how to test websites for accessibility, both with automated tools and manually with a keyboard and screen reader. We discussed how to fix some of the problems that are identified and how to prioritize fixes during remediation.
About the Meetup
The WordPress Accessibility Meetup is a global group of WordPress developers, designers, and users interested in building more accessible websites. The meetup meets twice per month for presentations on a variety of topics related to making WordPress websites that can be used by people of all abilities. Meetups are held on the 1st Thursday of the month at 10 AM Central/8 AM Pacific and on the 3rd Monday of the month at 7 PM Central/5 PM Pacific.
Learn more about the WP Accessibility Meetup Group.
Watch the Recording
If you missed the meetup or would like a recap, watch the video below or read the transcript. If you have questions about what was covered in this meetup please tweet us @EqualizeDigital on Twitter or join our Facebook group for WordPress Accessibility.
Links Mentioned In This Video
The following resources were discussed or shared in the chat at this Meetup:
- Accessibility Checker Pro Plugin on Equalize Digital Products Site
- Accessibility Checker free plugin on the WordPress.Org repository
- W3C
- jQuery Plugin
- WordCamp Santa Clarita 2021
- W3C guidance on screen zoom
Read the Transcript
Amber Hinds 0:07
So welcome everyone to the first official WordPress accessibility meetup. I’m super excited to see how many people we have here. I’m Amber Hinds. I’m the CEO of equal d- Equalize Digital. We specialize- we’re a WordPress VIP agency, a certified B Corporation, and we specialize in accessibility. And it’s sort of a passion of ours.
Amber Hinds 0:30
And I really started this Meetup or wanted to start this Meetup, because there’s not a lot of people that do accessibility in my area. And it was a little bit of a, “I want to have the opportunity to learn from people outside.” So 100%, the goal of this is not a sales pitch, or even for me to be the speaker all the time, I’m super excited about some of the speakers we have lined up. And we will be bringing in people that hopefully, I want to learn from as well as everyone else. So it should be a good community.
Amber Hinds 1:01
So on that note, if you are, you, doing something with accessibility and WordPress, and you would be interested in speaking and sharing with the group, we are looking for some speakers, I think, still for September, or- and October. So you can reach out to me or Emma on Meetup and give us your idea, and we can talk about dates and get it scheduled. So.
Amber Hinds 1:22
I am going to share my screen. And the fun thing about this one is that we are- I am going to be doing something a little more casual, which is showing you sort of a live demo of how we do audits. I don’t have a slide deck for this, because I’m just gonna be doing some live testing on the screen. We will have the video posted once we’re able to get it captioned, so you can look back on it. But unfortunately for this one, I don’t have slides. Because it’s more sort of like how do we go about it.
Amber Hinds 2:04
What I have up right now is a Google Doc, which is part of our accessibility audits that we do for clients. Obviously, there’s a lot of words here, and I’m not expecting that anyone can read them. But I’m going to highlight a couple of things in this and then I’ll move over. But I think it’s, it’s good to know, and let me just zoom in, here a little bit. Let’s go this much. It’s good to sort of know what we do and what, what we’re striving, what information we’re striving to get out of the audit before I actually go in and show you some of the tests that we do.
Amber Hinds 2:44
Our goal, of course, if we’re building a custom website is to try and do a lot of stuff early. So we have accessibility design reviews and stuff, which I’m not gonna be talking about today. What I’m going to talk about is how we either test a website that is new before we get ready to launch it, or if someone comes to us because they have an existing website, and they want to have it audited.
Amber Hinds 3:05
Our basic methodology is, is we use the Accessibility Checker WordPress plugin to do some automated scans. We also use Deque’s Axe DevTools, which I will demonstrate. Those are the two automated scanning tools that we use in our audit process. And then we will use a variety of screen readers. Most commonly what we use is VoiceOver on Mac and NVDA on Windows. And JAWS usually comes into play if we have users involved in our testing process, because our testers typically have JAWS and use it. I am way less experienced with JAWS, so I won’t be showing that today, and I’m on a Mac, so I’m going to be showing you VoiceOver today.
Amber Hinds 3:55
With our audits, we generally have at least two people on our team do screen reader tests just to make sure we’re not missing anything. Different screen readers say different things in different browsers, but generally, you can get most of it just with a single test. But we like to really cover our bases and make sure there’s not anything funky that we’re missing. Once you are familiar with them, you sort of know “Oh, it’s going to say this,” when it encounters certain elements.
Amber Hinds 4:23
We always have a note for clients about severity of issues. And I’ll show you sort of how we write out for people, because we track or suggest what the severity is. But we like to explain to our clients that a low issue, we typically would say low issues are lower priority, right? Than something that is high or medium or critical. But if you have a lot of low issues on a website, then that can cause a problem that results in, that results in a lot- like a very unusable website. So just because everything is a low issue doesn’t necessarily mean that the website is almost usable for everyone if there’s a ton of low severity issues.
Amber Hinds 5:08
So we sort of give them an overview of the scan, which I’m going to bypass right now, because we’ll actually talk about that and look at that. And then this is what I am looking for when I’m- the information I’m collating while I’m doing a manual audit. So we create, for every issue, a number and a title for the issue, the title’s just like a short summary of what it is, so that we can easily reference- reference back to it, the number is helpful for us, especially if there’s a lot. And then we’ll- for each issue, have a summary of what has come up and and what it is sort of at a glance. So we have the severity, which I talked about previously. And then we’ll talk about which components are affected by the problem. Sometimes we write go- global, if it’s something that exists everywhere, or is sitewide.
Amber Hinds 6:00
We include affected populations. I don’t know that everyone does this. But I’ve found that this is really helpful with our clients and knowing, like, what- like who is impacted by this problem, especially if they have to figure out, like, how they’re going to budget for fixes and things like that, they might need to have that ammunition to be able to go to their board and discuss what the problems are, and be able to explain more about who they are. And then we’ll list out the relevant or related WCAG success criteria, WCAG standing for Web Content Accessibility Guidelines. And those are usually linked, which you’ll see in just a second.
Amber Hinds 6:35
And then we have an issue description, which is a long form description of the problem. It can include screenshots, where relevant. If applicable, we’ll have issues code, so snippet of code that is related to her causing the problem. We typically simplify code snippets, so if the problem is on parent elements, we might just like cut out stuff in the middle, so they only get the parent, so that we’re not giving them pages and pages of code. Sometimes we don’t include code if it’s not- if the item isn’t really, like, it’s not necessarily something that is just “go change this code,” or if it’s like “oh, it was just the way the content was entered,” it’s, we don’t necessarily have to give them code for that all the time. We’re just talking about how it was entered and how it needs to be changed.
Amber Hinds 7:23
Then we provide remediation guidance. So while I’m auditing, I’m usually creating all of this for each individual issue as I go. And, and including the guidance, so I’m not just thinking about what are the problems, listing them all out, and then going back through, because for me, I found that it is most helpful to be- while I’ve identified the problem, be thinking about “what is the solution for this problem?” instead of having to go back and remind myself of the problem or where it exists. And a lot of times, if it’s like, “Okay, this code needs to be changed in this way,” then, usually, it’s easier when you’re getting the code for the issue to write the correct code for the guidance.
Amber Hinds 8:06
So, we- in order to do a good audit, on that note, we- you don’t have to be a developer. But I do think you need to have a strong understanding of code and/or of how WordPress works in order to really understand how you might fix the problem. If you don’t have a strong understanding of code, I think you can certainly test and you’ll see there are things that will do and you can identify that this is a problem. But then you’re probably going to need a developer to come back and look at your list of issues and figure out why that issue is being caused. Because there may be instances where you can’t tell or you’re not sure. And then, and then figure out how to fix the problem. So it’s definitely ideal if you have a strong understanding of code when you’re doing audits, but you don’t necessarily have to.
Amber Hinds 8:54
So basically, what this looks like is- so this is my section, we break up, we put general issues on one section, and then we’ll do like per page issues. But that way, we’re not repeating every time, like, this issue that’s in the header, because it’s not really useful. We only want to give them that issue one time, we just note for them that it occurs everywhere. Um, so basically, what this would look like is we would have we put like, an acronym for a client here, and then we have the number and the title is “missing skip links,” what the severity is, what’s affected, who are the people that are affected by this, what is the relevant success criteria, and then we’ll have a description, a write up that explains about what it is.
Amber Hinds 9:36
Sometimes we link out to other sources. So this specific link on this element, it links over to w3.org, where it talks specifically about the success criterion. This website in this example was one that we audited for a nonprofit that they had, they had us audit it before they launched their website, but they had another developer build the website. So our write up on some of the items on this were a little bit like, I don’t always provide, here’s something that really talks about it in detail and what the code might be, but because we knew they were going to hand it to their developer. And so then we’re like, okay, we can provide maybe some more technical information on this. And then we provide remediation guidance, which might include like, here’s literal instructions on how to code this in your theme, or here is a plugin that could solve the problem for you. So depending on what it is.
Amber Hinds 10:31
So basically, when we’re auditing we’re going through and creating issues, and, and then sort of writing in- and this is an example of one that has code- so we’re saying, “this is what it should look like.” And we often, give them, this is like best practice, and this isn’t best practice, but this is acceptable and would also be considered a pass.
Amber Hinds 10:58
So I feel like it’s helpful for you guys to know that background information. And now I’m going to actually do a little bit of auditing. And what I’m going to audit is, this is the website for our company before Equalize Digital called Road Warrior Creative. And we built this website in 2017. And I know it has accessibility problems, and it’s something that is- we’re like, on the fence on whether we’re going to fix them or just get rid of the website because we’re you’re on a rebrand process, right? So I figured this would be an interesting like, it’s a real world example of a website ,and I can talk through some of the thoughts that we’ve had as a team as we started to work on remediating this website a little bit already.
Amber Hinds 11:39
But what I do, the first time I get a website is we go and install Accessibility Checker, we use Accessibility Checker Pro, because it allows us to go in, if we go to the general settings, I can choose any post type, so I select off what I want. And then I go- and I would need to go down and hit save- and then I can go to the scan page, and I can then see these are all the things will be checked, and I can run a full site scan. It batch processes, so it’ll take a while, so I’m not going to do it right now. But you can sort of see like, these are all the things that would be checked. And then we do a combination of looking at the individual report on the page and looking at the overview.
Amber Hinds 12:30
So in this particular instance, and this is the overview of all of the open issues, which is available in accessibility checker Pro, and I can see that in that full site scan, I have- right here is the number. So 10,923 issues, which sounds like incredibly scary, right? You might look at that and think “oh my gosh, what is, you know, that’s a huge monster job.” So where we have found what is most helpful and useful is we have our Fast Track feature. So if I go over to the Fast Track feature, then I can, I can actually look at the issues grouped by code snippet. So I can see, for example, that this specific code snippet right here, which is a link to our Twitter account, which uses, it has font often, a Font Awesome icon, and then it has hidden screener for text for Twitter. It’s on 232 pages that were scanned, right? So it’s on every page, it’s in the footer. I know this, if I look at my website, what we’re looking at right here is this element, right there.
Amber Hinds 13:49
And I can click on this to review. And I can see the problem is is that it opens in a new window or tab. This particular item is a warning, not an error. And if you click the “i”, you can get more information about it. But our recommendation is that, and most recommendations, is that you have, to you need to warn users if you’re going to open a new window or tab because they expect fun, um, people expect that links won’t open in a new window or tab. And I know we all like to and this was even us, right? We used to have our social media links open a new tab because we didn’t want people to lose the website. But for someone that’s on a screen reader, it’s challenging for them because they can’t use the back key to go back. They may not, if they’re not alerted, they won’t necessarily know and they’ll have to figure that out.
Amber Hinds 14:44
So, so this is an element where I would actually, now that I’m aware, I would actually go back and I would change my settings on this particular block and I would do it and it would impact every single one of these links. So you can imagine, what we have right here is five links that are all opening in a new tab without warning people. Or the other option is, is that we have a free plugin that that will automatically add those warnings with JavaScript. So I could install that. And either one of those would be a correct solution. And then it would make that issue go away for, so 232 times five, right? So it’s a really large number of elements or problems that would be fixed with one thing.
Amber Hinds 15:37
So we sort of do where we move through, and we try and identify things that are in the header or footer first. And we assess them and we decide, you know, “what do we need to do?” So all of these, I can tell you are related to the “target underscore blank.” If I install our plugin, it just makes it go away. So in an audit, I’m going to try and look at these things first, because this is what will give me the biggest bang for my buck. Anything that’s on multiple pages, and, and then what I’m going to do.
Amber Hinds 16:09
So let’s say I’m going to actually test this homepage and, and take a look at the homepage. If I, this particular page, just so everyone knows, it’s built with, it’s old school, right? Launched like five years ago. It’s built all with ACF. So it has a bajillion ACF fields down there. So this is my summary. And I can go to the detail section, and I can take a look. The first thing I want to tell you is insufficient color contrast, I have noticed that I can test the same page with Wave, and Axe, and our plugin, and every single one of them will have a different number on color contrast and what needs to be assessed. So I always consider insufficient color contrast to be something I manually have to review.
Amber Hinds 17:00
So if I open this, and this is where it might get a little bit hard if you’re not familiar with code, we’re working on trying to have a plan for improving this if you’re not, but I’ll show you Axe’s tool in, um, next, which does, like, front end testing. But basically, this, in this instance, we have a really big block, because I think that there is probably something globally. So it’s under this container on “services.” And kind of like everything in it, it’s not able to tell. So I would need to assess whether or not this actually, and it’s my website, but what why that looks so big is it’s this. And what I happen to know about this is this is actually dynamic. So the content and this changes, which is why that block looks so huge, because there’s actually a lot of content in this, i’s just you can’t see it all.
Amber Hinds 17:57
So this fails. And what I have to look at and think about is, this is our brand green. But we weren’t really thinking about accessibility when we created our brand many, many years ago. And and so what we actually need to do is we need to realize that this green only passes if we have black text, not white. So we would need to change the white text. So in my audit, I would leave this open. And I would know that I need to make that change in order to actually fix this element. Or if I didn’t like, and that’s where sometimes you have to go back and forth with a designer, if they’re like, “Well I don’t want the blind text on the green.” So then we talk about, okay, well can we make this white or light gray? Like, Is there a different background that we can put here.
Amber Hinds 18:47
But basically, what I do is I go through every item here and I assess it. And if I determine that, so here’s a good example, we have one image that is missing alternative text on this page. This particular image you can see with the height is one pixel by one pixel, and it comes from Facebook, this is our facebook pixel. This is not actually an image that matters, if you will, it’s not a visual image. So what I would do on this is I would actually ignore it, and I would just put, you know, “facebook pixel,” this isn’t something that we want alt tag on. So this would be considered a false positive. So I’m just going to ignore it. And that will allow it to no longer impact my count. So, so this would change things there. Look, I don’t have any errors anymore. And then I can see the one ignored item.
Amber Hinds 19:39
So the first thing I do is I go through it with Accessibility Checker because that kind of shows me in the backend, and sometimes I’ll see things that I can immediately fixed because it is in the content. And I can just fix it right away if it’s my own website. If it’s a website where I’m doing an audit and then we’re going to do fixing separately, then obviously I wouldn’t do that. But I would go through and I would ignore things that are false positives or that I’ve assessed. So there are some warnings, for example, if you have a slider on your page, you’ll see a warning that says a slider is present. And then you need to go through and look, manually look for things on the slider. And once you say, if you realize, “Oh, it’s missing a pause button, it has a problem,” that I leave that warning open. If I know, there is no problem, it’s fully accessible, I fully tested it, then I would ignore that and say, “Okay, this is not actually a problem.”
Amber Hinds 20:31
So my goal is to try and get an accurate view here of what the errors and warnings are. If I see something that comes up on this page that is in the footer or in the header, then what I’ll do, when it comes up here is I’ll flip back over to this Fast Track tab. And I would actually enter, for an item that I’m like, “Okay, this is in the footer, but it’s actually correct the way it is, it’s not an accessibility problem.” So like, I could try and find that Facebook pixel here. Rather than necessarily ignoring it on that one page, I would, I can hit “global ignore,” and that will ignore it for the entire site, so that it won’t ever come up on any other page, even if I add future pages, it will be ignored for future pages, too.
Amber Hinds 21:17
So that’s what I do first. I go through that. And then the next thing that we do is we use Axe. But I’m going to pause real quick and see, because I can’t see the chat. Does anybody have any questions about the Accessibility Checker like bulk scanning? Feel free to unmute or if you want to throw it in the chat, Emma probably read out if there are any.
Tarik A. 21:42
I have a quick question about the opens in new window. So normally, I put “opens a new window” in a span, absolute span. And if it, if it’s that way, or if it’s an aria label, will your, will that plugin pick up either one?
Amber Hinds 21:56
Um, so currently, I have to check and see if, I don’t know the answer to that, unfortunately, if we have our rule logic is coded so that it will look for that or not. I can check and I can post a note in the Meetup page. I know that it looks for our new window warning, but that is the way we would handle it, which is you would want to do that. But I would also in addition to having it either on the ARIA label or in the hidden span, which is what we do, we also add usually a Font Awesome icon. So sighted people also have the warning.
Tarik A. 22:35
Okay, yes, that works, too.
Amber Hinds 22:38
So we do a combination of the two. I, I will be honest, I cannot remember if the plugin has logic yet to test for that or if it only warns you of it and we haven’t yet added in the logic. So we just released it in December. So we’re like still working through some items. So, yep.
Ron Z. 23:00
Amber, what was, this is Ron, what was your question to the group about checkers?
Amber Hinds 23:04
Oh, I was just asking if anybody had any questions about the bulk scanning tool that I just showed before I talked about Axe.
Ron Z. 23:12
Gotcha.
Amber Hinds 23:13
Okay. Alright, so I’m going to talk about Axe. So, Axe has a free version, and they have a pro version. Once you install it, it’s, it goes in your browser extensions. We like to use Axe rather than Wave because I feel like it is more comprehensive and it includes some great features. Also, rather than opening, so if I click Wave, it’ll open a panel up on the left, Axe is integrated in your DevTools. So once you’ve installed Axe, then if you just hit inspect, you can open up and pull Axe right over here. And this will give us Axe, and apparently I am no longer signed in. They have kind of strict, so give me one second and I will get signed into my account.
Amber Hinds 24:06
Okay, the Pro Plan is, I think like 40, it didn’t get me as being logged in, let me refresh the page real quick, is about $40 a month, I think, for Axe. There are a lot of features, I’ll try and highlight what is Pro and what is not. But basically I could choose to scan just a part of my page or the whole page, I usually almost always choose the whole page. So it’s going to run a scan. And I can see there are 66 items that it’s detected automatically, and then 47 items that it’s not sure about and it wants me to review them. and it’s sort of giving me some of these groups as well, so critical, serious, moderate, minor. So if I look down below in my “all issues,” I can look at, right here, this is the first one, “elements have sufficient color contrast.” And then let me close my console there. So I can see in this, if I do this, a little bit, it makes it a little better.
Amber Hinds 25:12
Okay. So the one thing I’ll say that I don’t super love on small windows, it can be hard to see all these things with Axe, because you can’t super easily adjust all of that, what I’m going to talk about is down below. So for example, “elements have sufficient color contrast,” it’s flagging one of 50. Again, what we’ll probably find out is, I can click the highlight button, and it will highlight for me. So in ours, we flagged like the whole block as one, but they’re flagging every individual item, which is why you see 50, versus we had a smaller number. So again, like that’s sort of where different tools do things differently. But that’s where it’s useful, I think, to use multiple tools. But this is useful, because it gives you on the front end, where is this element. If I click the inspect, it’s going to flip me over and show me in the inspector where that is. So let me go back. And I can then get information about it. It also has the location right here. And it has what the source code is, and all of the information related to maybe some thoughts on guidance.
Amber Hinds 26:23
So I can go through and I can look at these different items. So the color contrast, let’s see, what’s another one this may be good at. So the “links with the same name have a similar purpose.” So in this one, it’s, this is something that was flagged, but it needs review. So in order for me to do any of these manual reviews, or do guided tests, which I’ll show you in a minute, I have to save the results in order to review them. This is, this is when we’re entering the land of Pro features. So I’m just going to save, you put whatever testing thing you want, it fills in by default, the name of the page. So I’m just going to say “okay,” this saves it to my Axe account. What is nice about this is right, unlike Wave where you run it and that’s it, and there’s no way to export it or really save it anywhere, this is, works a little bit more like our Accessibility Checker plugin where it creates something that you can refer back to if you want to without having to rescan or re-hit the extension every time. So now this would be available. And I can reference back to it. I can also share it with other people. And I can also export a CSV file of all these problems if I wanted to go hand them to my developer.
Amber Hinds 27:33
So let’s go back to our needs review. What were we looking at? This one, “links with the same name have a similar purpose.” So it’s saying it needs review. So I’m going to ask it to highlight for me. So this is highlighting the case study. And let’s see what it looks like. So this is the element. So I bet you what this is, is this is where sometimes I have to be like okay, what is, what are you- So there’s this one, and what is that one? Interesting. So this flagged the telephone. So this one I’m like, “Okay, this, this is definitely not an issue.” So I would just say no, this is not an issue.
Amber Hinds 28:33
I, normally, “links with the same name” is, I’m looking at and I’m thinking it’s because this, but what I would want to see is “Does this have hidden Aria?” And in fact, it does not. So, so you can see right now I’ve flipped over, and this link right here has the case study only it doesn’t have hidden screen reader text that would say for example, “case study for Workforce Solutions panhandle,” right? Or it could have an aria label. So this is actually a problem. Because this text right here is not unique from this text right here or this text right here. But they go to different places on the website. So nobody would, on a screen reader, they don’t, people don’t have context of the text next to it if they choose to just have the links on the page read, read out. So they would hear “case study,” “case study,” “case study.” So this is something where we would need to go in and change how this is coded in order to make sure that it’s unique.
Amber Hinds 29:40
So let me go back to dev, to Axe, and I would actually say that, yes, this is an issue. It’s a little weird and sometimes you have to like dive in and look at it and think critically because, normally I would expect Axe to flag that for this one, and this one, and this one, right? I would want to see three. And so this is again an issue where automated tools do their best to pick things up. But it’s only saying there’s actually only one of these that it thought was confusing or didn’t, or matched something else, but I actually think there’s three items that need to be fixed. So I would note that down separately, because anything I get out of Axe is only going to note, one, but there’s actually three elements on the page, which may come from the same code, but there’s three elements on the page that needs to be fixed.
Amber Hinds 30:38
So when I do that, it actually reduces the “needs review,” and it adds it into the issues that is there. And the other thing that is super helpful about Axe is they have guided testing, which is really useful if you are new to accessibility, and you’re not sure what to do. So one of the things we need to do is tab through our page and make sure that everything is focuse-able and visible, and that we can reach all the elements. And Axe has a guided test that shows that so keyboard is one of those. So if I click “Start keyboard testing,” it’s gonna say, okay, we’re going to test on this page, I’m going to hit “start.” And what it’s going to do is it’s going to run through the page. And it’s going to check for all of the tab stops, and it’s going to number them as it goes through the page.
Amber Hinds 31:33
So we’re just going to let it run. Obviously goes a little faster if you have shorter pages, if you have a lot on your page, then it can take a minute or two as it gets through every element. But I think we’re almost to the end. Possibly. Also note, I genuinely do it not logged in. So you’re going to notice, or you may have noticed that it hit the admin bar too, at the same time. So now it’s just sort of double checking things and scrolling through the page. Hopefully, we’re gonna get a, get it to be done. There we go. Okay.
Amber Hinds 32:47
So it says auto tan was successful, if found 58, tab stops. Obviously, you can see up at the top, there’s a bunch of items in the WordPress admin bar, if I had not been logged in, those would not show up. But what it did is it went through the page, and it numbered everything that it found as a tab stop on the page. So I’m going to hit next, do I’m going to hit next. And the first thing it says is “we’ve highlighted everything, is there anything that you expected to be in the tab order that was not?” So basically you would want to look through your whole page and look for, this is a little weird, because it just puts a pixel on it. But you can see there’s a tab stop right there.
Amber Hinds 33:31
Here’s something I noticed, I don’t see a tab stop on this button. So right there, that’s something that could potentially be a problem. But then I’m going to look, so this is a link, and obviously, like, it was actually on the link, but sometimes it doesn’t totally, when it wraps or something it might get more, slightly more than that. But I’m going to look through and see, did it get everything that I expect it to get? And the tab stops should be anything that requires keyboard interaction or mouse interaction that you’d want to also be able to interact with the keyboard. So links, buttons, accordions, slider controls, pagination controls, if you have Ajax, pagination, form fields, form buttons.
Amber Hinds 34:19
So basically, I would look through all of these items, and I would make sure, did it get everything? Right now I’m going to say yes, there were elements that were skipped. Because I think this button was skipped. I don’t see it highlighted. So I’m going to leave that as “yes.” I’m going to hit “next.” And it wants me to select it. So I’m going to select this, and I’m going to hit “next.” And then “we’ve detected some elements which were skipped in the tab order, do each of the following have a way to use the same functionality during keyboard?” So I’m going to look at this. That’s down low. So that’s here. So this is a little bit interesting and weird and actually makes me think I need to inspect the code because it looks like it’s highlighting something in between these links. And you see there’s a 59 in this spot, I’m not sure what’s up with that. So that’s something that I would flag. I don’t actually think that there is a problem. Like, I’m not sure what this element is. So I, I would probably in this instance, I would say, “No, there is no alternative. So it stays open, because I actually want to manually come back without Axe and test this and figure out is there actually a focus flow element there.
Amber Hinds 35:43
And then, right, I would do the same thing. Again, this is a little weird, like it’s sitting off somewhere, I’m not sure. Sometimes things are buggy. And there may not actually be something here, and Axe was trying its best, but it didn’t, other times, there may actually be something weird here that I can’t visually see, but there’s a tab stop there. So I’m just going to leave those open as there’s no alternative, that might not actually be the problem. But that way, I remember that it’s a problem, I need to come back.
Amber Hinds 36:08
So then basically, it gives you a summary of all the things and if you hit “finish,” then it will actually add into your total. So now I have six guided issues. So there’s a bunch of different tests that you can do here with guided testing in Axe that I think are super useful and helpful. We don’t have a ton of time today. So I’m not going to go through them all. But I highly recommend this if you’re doing a lot of testing.
Amber Hinds 36:38
So then, after I do all of my automated scanning, I still have to manually test things and see what the interaction is like. So I am going to, the first thing I’m going to do is I’m just going to try and tab through the page, I’m going to hit a, do a hard refresh just to make sure hopefully, my focus is at the top. And I am actually going to log out because it’s a little bit easier to do this just as a front end.
Amber Hinds 37:06
So I’m going to do this without a screen reader first, because I like to just focus on the visual of it. And then I will do it with a screen reader, and listen. So I’m going to hit my tab key, I’m going to try and narrate what I’m doing with my keys, and then I will do a screen reader in just a minute. So I’m gonna hit my tab key. And the first thing I expect to see when I hit my tab key are skiplinks. Skiplinks would allow me to not be forced to go through the navigation on the top of every page. That was that item that I showed on someone’s audit. Well guess what? My website is, my old website, not my current website that I use is also missing skip links. It’s a custom WordPress theme. And we built it in 2016. And we didn’t know any better. But that is a problem, right? So I would flag this, I would say I expect to at least see “skip to content.” Some theme developers will put “skip to navigation” and “skip to footer,” which are not necessarily required, it sort of depends on how many other elements you have, the skip to navigate- navigation could be useful if you have a lot of elements in your header. And you want to allow somebody to very quickly get over to the navigation to choose a different page.
Amber Hinds 38:20
So anyway, so then what I’m going to do is I’m going to tab through, and I’m just going to make sure, do I have a visible focus state, and can I see where I am every time? And then, so for example, I got to this form, can I choose a different choice? So I’m going to use my, I tab to it, and then I’m using my up and down keys to try and interact with it. And then if I selected this, I’m going to see, can I hit return? Okay, yes, it selected it. And then if I hit tab, can I then go, like, let’s say “amazing content,” then I hit tab. So this was a problem, right? This button, we noticed before, I could not get to this with my keyboard.
Amber Hinds 39:05
Now, what is a little bit interesting about this is that this content changes dynamically, even if you can’t click that button. However, a user who’s keyboard only wouldn’t know that, and so they, they need to be able to get to the button because triggering that would jump them down, is essentially what it does, so, so this is a problem because they’re gonna think it’s broken, and they’re not going to know how to submit the form that they want to submit. So this is an item that would need to be fixed.
Amber Hinds 39:39
So then I’m going to tab through and I’m going to make sure that I can get to every link in this and that there’s an obvious visible focus state, so I can see where I am the whole time, and then, so sort of keep going through. I would probably question, I would want to check our color contrast on the blue on I think probably it would be better to have the whole button state change to a darker color, or a different color, rather than just having it get slightly darker and have the blue focus on the inside because I’m not sure that meets color contrast with the black background. And I’m also not sure that it’s really obvious, obvious enough for people. So that would be something that I would flag as an item that we probably have to fix.
Amber Hinds 40:24
And then same thing on this form here. We, the cursor goes to the fields, but it doesn’t really highlight the field, so it’s easy for people to miss that. So I would flag the missing focus state. The other thing that I would flag about this is, we’ve done the thing that designers love to do, which is we’re using placeholders only instead of actual visible labels. These fields, you’ll notice in both of our scans, nothing came up on missing field labels, they have labels for screen readers, however, you still have to have visible labels that are always visible for sighted users. Because if someone has a cognitive disability, or they have memory loss, if they start typing in the field, they then can’t see what they’re supposed to put in there. They need to always be able to see the label. Designers hate this, but it is, like it has to be done, and there are ways to design it and make it look nice. So, so this would be something that I would note, it doesn’t come up in scans, because again, there are labels there, like it is a HTML semantically correct form with labels and screen reader text. So a scanner can’t catch that. So that’s really where you have to do some of the manual testing. So I’m going to note that.
Amber Hinds 41:44
I’m going to, I’m going to again, I’m going to do the same thing where I make sure I can select things. Hit, like, the spacebar or the return key to try and trigger fields. I’m going to hit “enter” right then to submit it. So I’m going to try and submit it and see, can I submit it, and then, can, can I obviously see if there were problems that something was missing and, or the format was wrong, or whatever that might be so that I can go through and correct it all.
Amber Hinds 42:21
Then I’m going to keep going down through. So same thing. So this was where we saw something sort of weird happen with tab stops in Axe. But I’m going through and I don’t actually see a tab stop problem. So I’m going to say that was Axe being buggy, and it, there wasn’t actually a problem. On this particular element, I’m focused on, so this “see more press,” let me go back up.
Amber Hinds 42:29
So the color contrast applies not just to an element’s normal state, but also its hover or focus states. So this particular “see more press” link is fine in its normal state. But when I focus on it, it turns that light green on white, which we know fails color contrast. So this is an item that I would mark down and say we need to correct the focus. And then I would guess, we can look at phone numbers too, the, okay, so our hover state is actually, meets color contrast. But our focus state does not. And yes, it has the focus note on it, but once I focus on it, that could make it hard for me to actually see what that text says. And I might not actually know what that says. So the focus state styles need to change, and I would probably change them to match the hover state that we have put on the element. These buttons as well, we sort of talked about those following them. And then I’m just going to go through the footer. So that would be what I would do initially to do an example of a, of keyboard navigation.
Amber Hinds 43:58
So let me, I realized I only shared my window, so I’m going to stop sharing for one second, reshare my whole desktop, and then I’m going to turn on VoiceOver and we’re going to do a little bit of screen reader testing, so. Okay, so hopefully everybody can see my whole desktop now. And so on a Mac, I can turn on VoiceOver in my system preferences. And then if I go to accessibility, and VoiceOver, and then you enable this box. If you’re new to VoiceOver, they have a VoiceOver training that you can take that will teach you how to use it. I am not going to talk over VoiceOver, so I may stop it intermittently. And there may be some moments when it will just read. It should also put out visually on the screen what it is reading, so if you can’t hear you should be able to see what VoiceOver is saying to me. I’m not 100% sure if the captions will pick it up but you should see it visually on my desktop. So basically, what I’m going to do is I’m going to turn it on, I’m going to move through the whole page with VoiceOver, I may pause it at some, at some moment and talk to you about what I’m hearing. So I’m gonna hit “enable.”
VoiceOver 45:18
Voiceover on System Preferences. Accessibility, window. Accessibility features table. Voiceover, zoom.us. Chrome, Road Warrior, creative marketing agency.
Amber Hinds 45:27
Alright, so I’m just going to turn it off for a second. So everyone should hopefully be able to see the black box down below that sort of says what it’s saying to me what it’s reading out. So the first thing I want to know is, is it reading out the the correct name for the page? So this is something that’s in the code. It’s the title of the page, it may come from your SEO plugin, or it may just be pulled from the title that you’ve entered in. But I’ve seen sometimes on pages where people didn’t know how to hide the page title, and so what they did was they published a page with no title. Because they didn’t know how to make it not show up on the front end, they didn’t like the way it looked in their theme. And then what happens is, is the page does not have a title. And so this is, this would be considered a failure, either if the page did not have a title, or if the title did not accurately represent what the page is about. So that’s another item that you need to sort of think about. Your page title, and I think, you know, tools like Yoast would probably flag this for you, but your page title for an interior page should not be just the name of your company or some keywords for your company, it should actually reflect what that page is about. So if it’s your about page, or if it’s your team bio page, it needs to really reflect the content that is on the page. So that’s the first thing I would do. And now I’m going to move into…
VoiceOver 46:51
The chat button. You are currently on a button, Road Warrior Creative marketing agen- visited, link, image, Road Warrior creative logo, banner. Chrome has new window, Road Warrior creative. You are currently on a-
Amber Hinds 46:57
-Okay. So this is the first thing that I’m going to note, and this is a problem we see a lot. So this is our logo, it has alternative text, which says that it is our logo. However, this is actually a, we noticed its focus, focusable, and its focusable because it is a link and it is a link to our homepage. So this is what’s called a functional image. It’s not just there to provide context or decoration or additional information visually. It’s there to serve a purpose, which is if you click on it, it gets you to our homepage. However, the alternative text doesn’t convey that it just conveys that it’s our logo, and someone might think “link, Road Warrior Creative logo,” and they would think, “oh, that just opens their logo.” So we would actually need to change the alternative text on this element, and we need to make it say, “go to Road Warrior Creative homepage.” And note, we don’t even have to describe what the image looks like. If your logo has a picture of a cow in it. You don’t have to say like “logo with cow and son standing happy in a field,” or whatever that might be. It does not matter what it looks like. When it is a functional linked image, it matters where it goes. So I would note this as a problem. And again, this is one of those things that a scanning tool can’t pick up. It says “oh, there’s alt text, it’s probably good.”
VoiceOver 48:16
Scout Weber has left the meeting.
Amber Hinds 48:18
So let me go through…
VoiceOver 48:22
Visited, link, culture, list six items. You are currently on a link. To click this link press control.
Amber Hinds 48:28
Okay, so what I, what is good about this is that I have just heard that I have a list with six items. It is correct for your navigation or any sort of grouped items to be in a list so that someone knows how many elements there are and how many to expect. So I would want to see, are there actually six items? Which there are. Sometimes, we’ve seen in themes where there’s the navigation with, let’s say five items, and the contact is a button, but rather than styling the contact as a button with CSS and a class on that last element that they’ve added to their menu builder, someone has put a budget in a widget area, or sorry, a button in a widget area. And so what happens is, is the person hears that there’s five items in the navigation list when there’s actually a sixth that they don’t know about. And so that would be considered a problem. So you want to make sure that all of the items in your navigation are contained within the list element. So I’m gonna move through a little bit-
VoiceOver 49:29
Visited, link, services. Visited, link, case studies. Link, insights. Visited, link, certified B Corporation. Link, contact. You are current- Select Edit Text main. You are currently on the text field inside of a heading level four. To enter text in this field, type.
Amber Hinds 49:44
Let me go back up. So…
VoiceOver 49:54
Link, summary, list three item. Session is-Login, username or email address. Edit text.
Amber Hinds 49:59
Sorry, I don’t know what I did there.
VoiceOver 50:00
Press the down arrow key. 1Password menu available.
Amber Hinds 50:02
Alright.
VoiceOver 50:03
Press the down arrow key to select. Select, edit text, main. You are currently on a text field, inside of a heading level four. To enter text in this field, type.
Amber Hinds 50:11
So, so this field, it seemed to work fine for us with the keyboard. However, what I’m hearing now is, first of all, it’s telling me that I am in a text field. So-
VoiceOver 50:23
Select, edit text.
Amber Hinds 50:24
Right?
VoiceOver 50:24
You are currently on a text field, inside a heading level four-
Amber Hinds 50:26
-This is the text field-
VoiceOver 50:27
-To enter text.
Amber Hinds 50:28
It’s not a text field, it’s a drop down. And what I have not heard is anything to tell me what I’m supposed to put in this drop down, right? So we have this fancy “I’m a….” “That needs,” but they’re not appropriately labeled in this way, and the field is not labeled. So probably what I would do is I would actually, let me inspect this
VoiceOver 50:54
Select, DevTools. Web content. Select the elements in the page to inspect. To toggle device toolbar panel.
Amber Hinds 51:00
Alright, so I would open this and I would want to look and see what is, what is the problem, and why is this coming out this way? And so what I can see, it’s probably going to read again, when I, but I’ll turn it off as it does. So if I go right here, this is the actual container, and it’s a div, right? It’s not an actual input, which is what we expect to see. So that’s why it’s confused. And it’s probably, this was built with, like some JavaScript library, right? [Laughs] And we didn’t know when we built it that this is not correct. But, but this is why it hasn’t been given any sort of ARIA role. And it hasn’t-
VoiceOver 51:41
-Abby Middleton has left the meeting-
Amber Hinds 51:42
-it hasn’t been coded properly. So basically, what I’m doing is I am moving through and listening to what it says. So this was something that seemed like it functioned right if I only used my keyboard, but when I turned the screen reader on, I’m hearing something and I’m realizing, no, this actually isn’t right. Even though it seems like it works perfectly, it doesn’t get flagged in automated scans, it works perfectly with a keyboard only, but what a blind or visually impaired person will hear does not adequately explain what this field is or what they need to do with it. So this is 100%, something that needs to be completely recoded. And, I mean, this is like, a fully custom, so it’s not a plugin, so in this instance, I would just go to our dev and I would be like, “hey, this whole thing needs to be redone.” Or, we would have a conversation, you know, I mean, this, this, this is where it’s a weird balance-
VoiceOver 52:38
-HTTP, colon slash slash-
Amber Hinds 52:39
So I’m actually gonna turn voiceover off, because I think that was enough to sort of get a feel for kind of the things we’re looking for. But we would have a conversation about, you know, like, and we have these with clients, too, is, do we actually need this? Like, I, I’ve run, I’ve run Hotjar on this website; almost nobody uses this. [Laughs] So we could have a decision about, do we recode this to make it better for screen reader users? Or do we know that this isn’t, like it was a feature that seemed super cool at the time, and we’re like, “ooh, it’s fancy!” But no one uses it, and so, maybe we just remove it from our website completely.
Amber Hinds 53:22
And I think that’s sort of a conversation that you need to have. But basically, that’s how we approach testing. And I’m happy to answer any questions that we can do now or demo anything else. But really, it’s we do the automated scanning in bulk. We’ll do page by page with Axe, and sort of doing guided testing, then we do keyboard testing, and then we do screen reader testing. And we’re sort of documenting what we’re seeing along the way. And I hope this was a helpful, useful Meetup, but. What questions can I answer?
Anne M. 53:53
It is, this is fantastic. I want to thank you for giving this clear guidance. I recently landed into testing. On one side, it confirms that I’m like, 80% on the right road, and you just gave me, I felt, missing 20% Thank you. Thank you. Thank you. Thank you. This is just great.
Amber Hinds 54:15
Oh, you’re welcome!
Anne M. 54:16
I’m like bouncing in my chair, personally.
Amber Hinds 54:20
Well, that’s awesome. I am really glad it’s helpful. I think, I’ll admit it’s a little bit nerve-wracking to be like, here’s our website and our badness. But I didn’t want to do it on client site with asking.
Anne M. 54:30
You’re courageous, but that is the most [overlapping voices]
Amber Hinds 54:32
But I, I mean, I think it’s better to like see, sometimes I do demos on, we have like a fake site. But I feel like it’s useful to see like a real site and some of the nuance that comes into it. And, and, you know, like we’ve, we’re starting to have conversations about this website internally, you know.
Anne M. 54:48
Well, it’s shoemakers with the holes in our shoes, right?
Amber Hinds 54:53
Yeah, well, I mean, what happened was, is last year in 2020 we just built a completely different website. [Laughs] With a totally different brand, right? So, so that’s why for us, it’s a little different, cause we’re also like, maybe we just take this website offline, you know, like, do we fix it? Or do we just take it down?
Anne M. 55:09
I just, I just have one question for the entire group here. Is there anyone as crazy as I am secretly recoding some of the websites that she did, without telling the customer she’s making it better? Ohhh. Cause I am.
Amber Hinds 55:26
Are they on maintenance or care plans with you? Because I think that makes sense.
Anne M. 55:30
Yeah, they are maintenance and care plans. And I’m just not, I’m just not telling them because some of them well, you know it, you’ve heard the discussion with the designers and the, and anything I can do on the development side, I will, I will do because I just hate it if people can’t navigate a site. And I’ve used recently started using a tool called Polypane, and in Polypane you can actually show a customer how messed up things look, when people have cataract or bad sight or are dyslexic or, or whatever it is. Sometimes I will just show them that if I need to get color changes, but some people tell me I’m not, but I’m I’m doing it, because-
Amber Hinds 56:12
-If that, if that works for you and your clients, then I think it’s great that you’re improving the work that you’ve done. So, Ryan, I think you had a comment or a question.
Ryan B. 56:24
Oh, no, I was raising my hand that I also fix websites.
Amber Hinds 56:28
Oh, you also fix websites?
Anne M. 56:29
[Laughs] I’m not alone.
Ryan B. 56:30
Yeah I kinda think of it as like a, a conversation starter to the clients. So I’ll usually run my own audit as well, and then present it to my account managers internally. And then we’ll go to the client be like, “Hey, I know we built this site, but with like, increased like visual, or just like, concentration and accessibility, we’re now going back and noticing these things. We’d like to, like make our work better for you guys overall.” And it’s been pretty positive receptions across the board.
Amber Hinds 57:00
Yeah, we do a fair bit of work for CSU, and we launched a couple of websites, or Colorado, sorry, I should say what it is, Colorado State University. And we launched some early in the process when they were just spinning up their accessibility team there that audits and reviews everything before it can go up. And there were things that we audited and tested and then went through an audit process with them, and they were like, “yep, it looks good,” and we launched. And now like a couple years later, we’re going back and actually our, our tool flagged this, because we just gave them all, we’re like, “here have some licenses for this,” like, you can use it and they’re all like, “hey, there’s like skipped heading levels on this one,” you know? On, it’s like, in the way the Related Posts section is coded on the blog post, so it shows up on everything. And they’re like, “why do we have all these problems? Is this really a problem?” And we’re like, “Oh, yeah, it really is a problem, we should fix that.” But I think that’s the thing is like, I mean, I’m always cautious about you know, certifying something as accessible or, or anything like that, right? Especially if they’re going to be maintaining it. Like you can always say something was accessible at this exact moment when I tested it, but the second any content changes, it may or may not be accessible anymore. But I think too, like it’s a learning process. And, and we’re working on it. And there are times when you just have to, you know, you maybe didn’t get it right, but if you can go back and fix it, then that’s you know, and that’s our conversation we’re having about this website, ours. So.
Ryan B. 58:27
Yeah, great, we use a disclaimer, usually that, like 100%, full accessibility is like impossible to reach, but as we learn more, we keep improving.
Amber Hinds 58:41
Yeah. Does anybody else have any comments or thoughts or questions?
Tarik A. 58:48
I have one comment, that woman spoke about updating a client’s websites, it’s a good idea to let them know to show added value to your packages. So even if you’re making them for free, let them know, it like, as a conversation starter, let them know that this is what I’m doing, this is added value to your monthly package and, and it’s making your site better. But if you do it behind the scenes, they have no idea what you’re doing. And you can do a ton of work and they don’t see the value. They may never see the value in your service. But if you show them that you’re constantly maintaining it, it’s good for your, for your business.
Amber Hinds 59:22
Yeah, that’s a great comment.
Ron Z. 59:25
I’m, Amber, I missed the part when you were talking about links that open, you might want to open a different tab or window. What are the two acceptable solutions there? I think you mentioned two.
Amber Hinds 59:35
Yeah, let me, let me reshare my screen real quick and I can show you what we’re doing these days on our website that is actually accessible. [Laughs] Um, so I’ll just go into like one of these, because these all have- so for example, in the footer, our social media links, we don’t open them in new windows anymore. They open the exact same window, and we just trust that if people want to come back to our website, they’re, they’re smart human beings, they will hit the back button and come back, like we’re not going to lose a sale because they visited our Facebook page, right? Like, I think that’s why people freak out and they’re like, “oh, open a new window,” right? Um, like, this is still part of our funnel, or whatever that might be. So we open those there. But anything that has a legitimate reasons for being, going off site.
Amber Hinds 1:00:29
So in this example, we have the link over to the WCAG success criteria, and we’re thinking, but they might not have finished reading how to fix it, but they still want to open that. Then we do three things. One is that we add this, the Font Awesome icon so that a sighted keyboard user would have the warning, because they might not have a screen reader, but they might be somebody who can’t use a mouse because of mobility reasons. And so they want to have the warning too. And then on hover, if you’re a mouse user, you get a hover notice. And then we are doing, let me inspect this real quick. And what we do, so this is that particular link, is we add screen reader text in a span class that comes after the link opens, and its, adds “opens a new window.” So on a screen reader, it would read “link 2.4.4, link purpose in context, Level A, opens a new window.”
Amber Hinds 1:01:34
And the reason why we do it with the hidden screen reader text rather than the, putting an aria label, for example, is because we actually are doing this dynamically with JavaScript. And it is easier for us to make sure that it’s in the proper order, and it also works, for example, dynamically on buttons. These are links styled as buttons, they’re not really buttons. But in that instance, so, so from like making sure it comes in and appends to the text, rather than trying to get the text of the link and build an aria label dynamically, we’re appending it with screen reader text. And we have a plugin, which we’re submitting to WordPress.org, that if you install it, you don’t even have any settings, it’ll just do this automatically to every link that has “target=_blank” on it.
Amber Hinds 1:02:33
So, and, and that will work with accessibility checker, and it will automatically, if you have that plugin active, remove all those warnings. So I will say, it, it works relatively well for, I’ll also say like this is an area where people sometimes question that, which is the sharing links, where’s our blog? Our blog that we haven’t updated very recently, but, uh, so, so this is a social sharing plugin. And if you click on it, it opens in a new window and targets, right, so I could share this on Facebook. But this is the same thing, you really do have to warn people, because they might not even know how to get there, if they’re a blind person. So, so this is one where again, like there might be a legitimate reason, because it’s triggering something from that web application, to have it open in a new window or tab, but you still need to have the warning. And this comes dynamically in the same way. Some plugins depending upon their styles, it doesn’t look quite as nice, like it might go under, like if you only have the Facebook app or in certain instances, they might actually go under it. But if you know CSS, then you could fix that, or you just choose a different design for your plugin buttons. Most of them have multiple options, and you can sort of cycle through them and see how does that dynamic function work. So.
Joyce O. 1:04:11
Could I, let me, this is Joyce, I’m going to add a little bit to that. I’m actually blind, and a full-time screen reader user. In terms of links, I think you did a great job of explaining all the different things you could do. In general, you know, applications are going to do all kinds of different things, so what’s important as a screen reader user, is, links, I know will navigate me to a new page. And buttons will allow me to enter information right? Or submit information. So in general, if you could think about that, in terms of links, whether it opens in a new page, or a new tab or, there’s no consistency on the web on that. So as a user if I know that I want to open it into a new window or a new tab so I can get back to the original, I’ll do a shift enter. So most users know how to navigate that. What’s really important is if you have a same page link, if like, a single page app, that you do notify the user that it’s, it’s a same page link. And then the title would refresh, and you know, you’re on the same page, but there’s different content now on the page. So hopefully, that helps. And then I just wanted to say, you know, all of you guys are here to make wor- you know, websites accessible. And I just want to say thank you, it matters.
Amber Hinds 1:05:44
Yeah, well, thank you for joining us. And I appreciate that context. I think, um, yeah. So you were talking about the jump links in, where it scrolls you down to a different section on the page?
Joyce O. 1:05:59
Yeah, but what I think is more common these days are these single-page applications. And so, you’re, it’s the page has dynamic content that starts exposing things, and you have same page links all over the place. So it’s nice to describe those links, as same page links.
Amber Hinds 1:06:20
Okay, that’s good to know, I appreciate that. I think another thing that I’ve noticed on this, and I don’t know if you’ve noticed this, but in some of the sites where we audit, they, if it’s a jump link that jumps to a different section in the page, it scrolls the page, but it doesn’t actually keyboard focus.
Joyce O. 1:06:36
Right, right.
Amber Hinds 1:06:37
So then with the screen reader, it, when you hit, you know, keys to continue moving down the content, you’re actually still up higher on the page, even though a sighted person might have seen it visually scroll down.
Joyce O. 1:06:51
Absolutely. That that’s really hard. Also, it’s you know, you always have to consider the sited screen reader user when, there are a lot of sited screen reader users because you’ll have someone with low vision that still has the ability, you know, to use their vision. So it could get very confusing to them, because what’s happening visually doesn’t match what they’re hearing.
Amber Hinds 1:07:15
Mhmm. Yeah. I think another thing that I think I failed to mention, and this is maybe, me, I should have made slides, is the other thing that we do when we’re testing websites is we zoom to 200%. And we will make sure that it’s fully functional at 200%. You can still read all of the content and engage with all the elements because that is like some people with low vision will engage with websites at a super zoomed in amount. And that-
Joyce O. 1:07:44
Isn’t the requirement 400, though, isn’t the requirement 400 percent?
Amber Hinds 1:07:47
No, I’m pretty sure the WCAG requirement is, on AA is 200%. It might be 400 on triple-A.
Joyce O. 1:07:56
I would check that.
Amber Hinds 1:07:59
Yeah, I can double-check. But that’s, I am fairly certain what it is. I might actually, oh I closed that in that audit. But that’s where it comes in, like mobile menus have to keep, be keyboard accessible, too. And sometimes people don’t realize that the mobile menu has to be keyboard accessible. But the reason why is because if you zoom in a lot, then frequently your mobile menu is what you see. So and that’s, and that’s how somebody who is on a desktop computer might be navigating a website. So. Well, do we have any other questions or comments?
Anne M. 1:08:44
I did see a question higher up about the Accessibility Checker plugin and caching. Gerson asked that I don’t know if he’s still here.
Amber Hinds 1:08:57
Okay, let me look and see.
Anne M. 1:08:58
It’s all on the top. It says “the Accessibility Checker scan results seem to be cached. And even if I get rid of the offending element, the issue sometimes still persists in the scan result, I was able to refresh it by setting the option to delete data on an install and then reinstalling the plugin is there a better way to refresh the cache?”
Amber Hinds 1:09:20
Oh, I see that. So it should, it should rescan the page anytime you hit update or save. Where we have seen some issues is certain page builders. And so we’re working on that like we just had to add support for Oxygen page builder because when you edit the page with Oxygen, it doesn’t actually update the page because it saves it in post meta. So it doesn’t actually save the content in the post. So when you save it, it only updates post meta, it doesn’t update the post. So I don’t know if you’re using a particular page builder. If you are I might be able to look into that. Otherwise, you should be able to, anytime you hit update or save on a post, it should fully rescan the page. And note that you fixed an element. If you want to, if you’re still here, Gerson, and you want to submit a support ticket on WordPress.org, then we can definitely help try to figure out what’s going on with that specific instance.
Anne M. 1:10:23
Oh yeah, he’s still there, he’s using Oxygen. Which leads me to another question. I am one of those notorious Elementor users, I’m actually one of the advocates chasing Elementor to make Elementor spit out more accessible code.
Amber Hinds 1:10:23
Mhmm.
Anne M. 1:10:23
So if, if you ever need someone to beta test that, or do test drives come and find me.
Amber Hinds 1:10:47
Okay, yeah, definitely will. We, we’ve tried to do, so we’ve tested it fairly extensively in Elementor and Divi quite a lot. We have a tester, who’s a website accessibility specialist, that does a lot of work on state of California websites, which all have to be built in Divi, believe it or not. That is like a requirement to build websites for the state of California. So I know it’s been tested pretty heavily in those two builders. We’ve done a little bit with Beaver Builder. And then we just recently started working on trying to improve the Oxygen support. So yeah, page builders are, are an interesting animals to try and-
Anne M. 1:11:33
-Yeah, difficult. We can’t we can deny them. There are millions of sites and page builders, but I also think page builders should take the responsibility and spit out accessible code. It’s not rocket science, just-
Amber Hinds 1:11:45
-Yeah, definitely. I think the thing too, is like a lot of page builders, you can build accessible sites with them. It’s just some, there might be some elements that you shouldn’t use.
Anne M. 1:11:56
True.
Amber Hinds 1:11:57
And even one thing we didn’t talk about on our website is parallax can be really disorienting for some users. And that at the top of our website, it has a parallax effect, where it scrolls up over, and the background stays fixed.
Anne M. 1:12:12
Yeah.
Amber Hinds 1:12:12
And so really, that would be an item that I would say,”Hey, we need to remove this,” um, if I was going to make it more accessible. So. There’s a lot we can go into. I’m hoping, um, our next, so our next talk will be on a Monday evening, because we’re trying to hit lots of people in lots of different time zones, and Taylor Arndt will be speaking again. I think, Emma, do you remember the exact date? I don’t know if she’s still here. Probably she is. But let me pull that up real quick and look at it. But anyway, it’s in Meetup. And she’s going to talk about like building websites with her screen reader, I’m pretty sure she uses NVDA, in WordPress, and how theme and plugins and people who build websites can make the back end and editing experience more accessible, which I think should be super interesting and cool. But I think for sure, if you are interested in speaking or if you have specific topics, even if you don’t want to speak and you’re like I really want to know like how to pick an accessible theme or how to resolve accessibility problems in this specific plugin. If you reach out to us, we will try our best to find somebody who can give that talk. So thank you everybody, for coming, and, um, we’ll be-
Carrie P. 1:13:26
-This was fantastic, thank you very much.
Amber Hinds 1:13:28
Yeah, thank you!
Anne M. 1:13:31
Thanks a ton!
Peter I. 1:13:32
This was great, thanks.
Amber Hinds 1:13:35
Bye, have a good day.
