Accessibility Testing and WP Accessibility Day 2024

Simon Kraft: Wait, wait, wait for that.

Amber Hinds: Wait, wait for it?

Simon Kraft: Yeah.

Amber Hinds: All right, I will wait.

Simon Kraft: Why does accessibility matter?

Amber Hinds: Accessibility is about ensuring that everyone has equal access to information and tools and products and services on the internet. Much like we have ramps or elevators that allow people to bypass stairs if they're in a wheelchair or on a mobility scooter. So really, if we think about our goals as human beings and wanting to live in the world, or maybe we think about the stated mission of WordPress to democratize publishing, right? Make it for everyone. Then that's why accessibility matters. It's about ensuring that everyone can use the website to get information. Now, there's also some bigger reasons that sometimes from a business perspective come into play and why does accessibility matter from a business perspective? Why, because many laws around the world require it. And there can be fines. There can be the loss of funding from the government entity in some cases. If something is not accessible, there can be lawsuits. Ireland recently said that they're going to add between six and 18 months of jail time if people don't resolve accessibility on their website when they are told they have to by Ireland.

Simon Kraft: That sounds like quite the incentive. Yes.

Amber Hinds: So there are a lot of reasons why accessibility matters. I think there's the whole civil rights ethical reason, but there's also the legal reason. There's a business reason in that more people that can use your website and understand it and check out, the more prospective customers you have and more potential revenue.

Simon Kraft: That was the perfect answer. Now that we have that out of the way, let's talk quickly about your backstory. How did you get into accessibility and what do you do at a WordCamp, basically? That's the next two stupid questions.

Amber Hinds: So I started working as a freelancer in WordPress in 2010, mostly because I had friends that said they liked my blog. And so I started helping them and eventually it connected that I could charge people for that. But I didn't really learn about accessibility until 2016. We started working for a university in the United States, Colorado State University. And in the United States, all universities have to have accessible websites and so we were building websites for them and then had to learn accessibility our websites went through external audits with an accessibility committee before they could be published and so it was a lot of trial by fire learning and making sure that they would work so that they could actually launch and then through that process we realized we needed to start bringing in users of assistive technology primarily blind users is who we're talking about, to test our websites, and we started bringing in, getting more government contracts, so. That gave me the opportunity to really see what it's like for a person with disabilities to use a website and something you've built and in real time, which really connected with me. And I started making friends in the accessibility community, people with disabilities. And so it became a lot more personal. So that's kind of how I came to it. And the second part of your question was, what am I doing at WordCamp, WordCamp Europe? So I was honored to be able to speak. week. I ran an accessibility testing workshop. It's something that I like to do is teaching people how to test for accessibility. You don't have to be an expert to do it. And there are a lot of things that you can figure out, problems you can identify, and then, you know, work towards fixes, even if you aren't super trained in accessibility. And so I gave that workshop. We're also, my company, Equalize Digital, is sponsoring. So we are a sponsor.

Simon Kraft: What does Equalize Digital do?

Amber Hinds: We are focused exclusively on WordPress accessibility. We have a plugin which has a free version on WordPress.org and pro versions. It's called Equalize Digital Accessibility Checker. And it gives you reports and audits your website for accessibility problems so that you can find things faster that you need to fix. And we also do accessibility services. So we do audits, user testing with blind testers, and remediation. And we do a lot of education. It's really important to us. So we also run, I'm the lead organizer for the official WordPress accessibility meetup, which is a virtual on Zoom twice a month. And we do a lot of speaking and education out in the world.

Simon Kraft: Well, the accessibility testing part of it was one of the two main reasons. Why I wanted to talk to you. So I'd like to get into a bit more detail. Let's just pretend that I have a WordPress website.

Amber Hinds: Maybe a good assumption.

Simon Kraft: Maybe a good assumption at a WordCamp. Yeah, it might not be too far-fetched. So what do I do? What should I look out for? What are the common pitfalls?

Amber Hinds: Sure. So I would say the best place to start is to use an automated testing tool. So you could use our accessibility checker plugin. You could also use a really common one that people use is a browser extension called WAVE. W-A-V-E. Used that one before.

Simon Kraft: Yes.

Amber Hinds: Yep. And so doing that, we'll do some, either that extension or our plugin will scan and look for some really common things that can be identified automatically. So things like adding whether or not your images have alternative text, or are you using meaningful link text? So for example, you don't want to link the word, learn more, read more.

Simon Kraft: Click here.

Amber Hinds: Yes. Click here to learn what, Right. You can't always assume that a user of assistive technology is going to have all the surrounding context. So that's something. Another thing that automated tools can frequently identify is whether or not your headings are in a logical order that makes sense and creates a meaningful outline of the page. And that is a big mistake in a lot of themes. So if you've bought a theme for your WordPress website off the shelf, a lot of times the developers unfortunately are choosing the heading levels based on the size or the color and they're not actually thinking about them needing to create an outline. So that's something that a lot of people have to fix when they remediate. So that's a good place to start. Automated tools cannot find everything. You still have to do manual testing. So the best way to do that is to put your mouse away. you can use the tab key on your keyboard. And you use the tab to move forward, shift tab to move backwards. And you want to make sure that you can reach every interactive element on the website with a keyboard alone. So that means links, buttons, form fields, things like that. If you can't even get to it with the keyboard, sometimes you inspect the code and you realize, oh, this looks like a button to me, but it's actually a div. And so that that might be why that's something anyone can do whether or not you're a developer you can use that tab key and figure out can i do everything that i want someone to do on my website with only the tab key and then the next step would be to try out a screen reader, you listen for things with the screen reader try to figure out does it announce meaningful things so for example when i get to my navigation does it tell me that it's a navigation does it tell me list six items there's six things in my navigation does it give me a label like this is the primary navigation versus the top navigation or something like that you also with a screen reader want to just listen for oddities sometimes with a screen reader this is when we notice that there's images that have incorrect alt text so an automated checker can flag if alt text is missing but it may not be able to flag that you have alt text that literally doesn't describe the image. So using a screen reader is helpful because then you can hear what is actually being described.

Simon Kraft: I was just about to ask if that part of the process can be automated and you basically answered that. No, not really.

Amber Hinds: It's hard. There might in the future be some tools and we've talked about this. Could we use, like Google has an image recognition API where we could then match their alt text with image recognition API to try and validate. We do do stuff in Accessibility Checker where we'll flag suspicious alt text or alt text that might not be accurate, but we're looking for certain words, like image of or strings of numbers. This happens sometimes if someone isn't paying. I've seen some themes where if alt text isn't present, it then tries to use the title.

Simon Kraft: Oh, lovely.

Amber Hinds: And the theme will fill it in, But as we all know, in WordPress, when you upload an image, the title gets populated from the file name. Nobody needs to hear Shutterstock 1, 2, 3, 4, 5, 6 as alt text for an image, right? So yeah, you still, there is some stuff that does just have to be done manually.

Simon Kraft: Small tangent on that. For quite some time now, I think I've seen this the first time in 2016 or something. There are little plugins around that use some kind of API for some external service to produce alt texts automatically.

Amber Hinds: Yes. is.

Simon Kraft: That should i even try that or should i just go and do it manually.

Amber Hinds: I have tested those as recently as january of 2024 so about six months ago so i don't know what's happened in the last six months things are moving fast recently yeah so i've tested a few every alt alt text.ai AI are two most popular ones. In my experience, very rarely do they get it right. Even in to the degree that, so the alt text that AI one is sort of interesting because if you have like a WooCommerce store, it doesn't just look at the image. It also, because it's made for WordPress, it looks at the title. It'll look at your Yoast meta description if you have the Yoast plugin installed. So it tries to understand more about the context of the page which i think is moving in the right direction but i actually experimented with that when i set up we have a swag shop that sells t-shirts and the t-shirts have words so for example when they said make wordpress accessible it didn't it would just say like white t-shirt it wouldn't say white t-shirt with wording make wordpress accessible which is pretty important if you're trying to decide you need to know what's on the in a t-shirt.

Simon Kraft: Right?

Amber Hinds: Or it would say like, white t-shirt with graphic text, something like that. So it just... They're not there yet. I have hopes for these. And I think perhaps in the future, they will be. I will say there are some complaints with their software SaaS services that are called accessibility overlays. And one of the things that they do, which we go down a whole rabbit hole about these, but one of the things they do is they try to generate alt text for images that are not there. And they're using similar technology to what these WordPress plugins use. And very frequently, there are websites that use these that get sued in the United States for using them, and they will cite that they have incorrect alt text. And it is alt text that is generated by the overlay, which is supposedly trying to fix the website, but it's failing. And so that gets cited in a lawsuit.

Simon Kraft: Interesting. So one of the major things I know about WordPress accessibility is to keep my hands off of these overlay things. Yes. Yes. Good. Noted.

Amber Hinds: I wish which there was a shortcut, right? Like we all love the appeal of install one line of JavaScript and everything is fixed. The reality is there just isn't. But it doesn't have to, it doesn't mean that it has to be, no one expects that websites will be accessible overnight. It's a journey. Obviously there are things that are most important to fix first, but you can find things. So for example, your navigation, make sure your navigation works. Make sure your contact form works. Make sure your cart or your checkout page works. but you can do these things over time and and try and improve.

Simon Kraft: So there's no like silver bullet solution to do all these things but i guess your accessibility checker plugin does a bit more than my regular old browser extension i take a look at the site once and then hope for the best kind of solution so what's the difference there does it do like regular checks on my site and and sees if stuff gets worse over time because that's something that can happen.

Amber Hinds: Yeah, so the pro version of our plugin, it has a full site scanning feature. So this is a differentiation between free and free. It operates a lot more similar to the wave browser extension where you pretty much have to be looking at the page in order to test it. In pro, you can run a full site scan and it will go out and just crawl. It doesn't matter. This is used on NASA where they have millions of pages, but it will over time.

Simon Kraft: Way to brag, by the way.

Amber Hinds: I love it. Yeah, so it works on very large websites and it will scan and run through even pages you're not looking at and then it will give you a report for the entire site, which is very helpful because a lot of times when you're trying to think about prioritizing fixes, you also think about who's going to do certain fixes. And obviously there are code things that require a developer, but things like adding alt text to images that are missing alt text or fixing links to be more meaningful so they don't say click here. You can typically have a content person do that. And that's a way for a client, for example, to save money. Like a lot of times on the websites we remediate, we don't fix those things. We don't always even fix the headings being in the wrong. Sometimes we do because they require CSS, right, to adapt them once you've changed the heading level. But a lot of times if it's just in a blog post or in a standard page. Any user can go in and say, oh, this isn't supposed to be in H3, it's supposed to be in H2. So the plugin does a lot of that kind of crawling and that stuff. The other thing that is a major differentiator between our plugin and these browser extensions is that we have really custom rules that are specific for WordPress. So we have some of our own custom rules and then we also utilize an open source rule library called axe core which comes from a company called dq you can find it on github but some of their rules don't appropriately flag in wordpress or they create too much noise and and what we're trying to do is reduce that so i'll give you a really specific example we have a warning and axe core has a warning for this has ARIA hidden on it, which is an attribute that hides the element from screen reader users. And so we warn on that because you want to check and just a person needs to check and confirm it is correct to hide this from screen readers. Was not on purpose, like it's not wrong, right? Well, the WordPress course spacer block has ARIA hidden on it. And we know that that's correct. We all know that. Axe, the open source rule library that doesn't know about WordPress, doesn't know that. So if you use Deque's version of Axe in the browser, it will flag that on every spacer block on every page you test with. However, we have modified that rule in our plugin. So we're never going to ask you, is it okay to hide a spacer block from a screen reader user? Because of course, we know there's nothing in a spacer block. It should be hidden. so so that's sort of a major difference with our plugin is that we are trying to create something that creates like the best rule set in a wordpress specific environment that.

Simon Kraft: Sounds really cool i'm sold i have to i have to try it now yes so that is accessibility checking is there anything we should mention before we we leave for the second big topic i wanted to talk about i.

Amber Hinds: Don't know no No, I'm interested in the second topic.

Simon Kraft: Oh, yeah, well, that was it.

Amber Hinds: I feel it, yes.

Simon Kraft: Okay, so let's close that. The other thing I had on my list was the WordPress Accessibility Day that is coming up, and you're co-organizing that, right?

Amber Hinds: Yep, myself, Joe Dolson, and Bette Hannon were the board of WordPress Accessibility Day, which is an actual nonprofit, and we are the lead organizers of the event, and we have a wonderful team of co-organizers that is quite big this year, which we're super excited about because it helps spread out all of the work. And that is a virtual conference that is happening this year, October 9th through 10th. And it happens on Zoom and is captioned and has sign language interpretation. And it's a single track.

Simon Kraft: So if I remember correctly, it's like a 24 hour.

Amber Hinds: It is a 24 hour event. So we start at 10 a.m. U.S. Central Time and we run for a full 24 hours and end at that same time the next day. The idea behind that really is that we wanted to provide global education and make it as accessible to everyone. There are a lot of really wonderful virtual accessibility conferences that happen in the United States, but the times for those aren't super convenient for people in other parts of the world. And we wanted to provide education that worked for everyone around the world. And so that's why we have it opens it up. It makes it easier. There's always a talk during your business hours, no matter where you live. And it also makes it a little easier for some of our speakers to be able to speak.

Simon Kraft: The talks will be live, not like pre-recorded and then edited.

Amber Hinds: Yeah, so we actually do live talks, not pre-recorded talks, mostly because we have all been at conferences where we had to make pre-recorded talks. For some reason, it feels like so much extra work. I don't know.

Simon Kraft: It does, it does. I did that for WordFest Live in 21, I think it was. And it was a lot of extra work and i i like took really good care of my setup and lighting stuff i don't do and.

Amber Hinds: Actually yeah and then you have some people where they feel even though you tell them you don't have to stop just keep going as if it's live you don't have to edit it but we heard from some people that uh we did at one point do lightning talks which we're not doing lightning talks anymore and those we asked for pre-recorded because they had to fit in a small time window and we had someone say i've recorded it like eight times and then they submitted it and they're like like, wait, I'm gonna do it again, here's a new one. And I was just like, no, we're not trying to give you that much extra work. So no, they're all live. But the other thing that's nice is that we can then have live Q&A from the audience. And we have volunteers around the world who host as an MC and they moderate the session and all that.

Simon Kraft: And what kind of talk format are we talking here? It's like a 45 minute slot or how does that?

Amber Hinds: Yeah. So the sessions are 50 minute sessions and we usually try to have our speakers submit about 40 minute presentation and they can be whatever. They can be a single presenter. We've had panel discussions, all of that sort of thing. We do actually pay our speakers. It's part of why we're a separate nonprofit. So we pay $300 per session. We just pay the lead speaker if there's multiple and then that person is responsible for distributing out however they want. And then afterwards, we edit the videos and get final corrected captions and transcripts. And they're all available on the archive sites for WordPress Accessibility Day with that information and it's publicly available. And it doesn't cost anything to attend. It's free registration, which should open sometime in August once we have a final speaker schedule. We do ask people to register. register that's how you get access to the zooms and we have the option some people choose you you can register totally for free but some people make a donation and you can get a t-shirt in exchange it's a thank you gift you're not buying it we have to be really clear about that as a non-profit as a non-profit that's always you can make a donation to the non-profit and then we will thank you with a t-shirt completely random a completely random gift yes okay.

Simon Kraft: We'll add a link to the WordPress Accessibility Day's website to the show notes. So everyone can find that there. And I think we should mention once again, that it's October 9th, 2024, just in case you listen to this at some point in the future. But in that case, check out the archives. And maybe there's an upcoming event at some point. So check out the website as well. Thank you so much for taking the time.

Amber Hinds: Yeah, thank you.

Simon Kraft: It was really lovely. I'm looking forward to WordPress Accessibility Day and to checking out your plugin. I have more things on my to-do list now, which is always a bad thing about working in Europe.

Amber Hinds: You leave with a giant to-do list.

Simon Kraft: I leave with the biggest to-do list ever.

Amber Hinds: And an inbox that was filling the whole time you were out.

Simon Kraft: Please don't remind me.

Amber Hinds: I know. Sometimes I'm like, can we just set that out-of-office reminder to auto-delete things too?

Simon Kraft: That would be brilliant.

Amber Hinds: Yeah.

Simon Kraft: Yes, yes. Okay, thank you so much. And I hope I will talk to you soon.

Amber Hinds: Thank you. Bye. Bye.