 When I'm doing web development and I'm kind of pushing my community towards doing this, I like to test my sites for accessibility for the work that I'm doing. And one of the things I've been using is the Wave Accessibility tool, which allows me to do that, gives me feedback on exactly what's right and what's wrong. It's maybe not the cleanest, prettiest thing I've ever used in my life. But I'm here with, and I've forgotten your name one more time, Oliver Emberton from Salktide, who is a free service that's going to help us do a better job of testing our sites for accessibility. Is that correct? That's very correct. Yes, we went out of our way. We've been using Wave for about a decade or so. We went out of our way to look at Wave, to look at AX, to look at all of the major free tools out there, and we took all of the best bits of all of them and we shamelessly stole them and we made them better. Okay. And we're giving it away for free. Well, that's my language. So in general, what I'm used to being able to do is to just look at my website and see, have I missed any image descriptions? What about contrast is a big one? That one's always really hard for me to fix because it doesn't ever tell me what to do about it. It just says, nope, it's wrong. And so I guess another number and it says, nope, it's still wrong. You know, hot or cold, hot or cold? Well, I know why that's tricky because the thing with color is you can suggest colors, but sometimes there's a human judgment component, right? Should you make it lighter? Should you make it darker? Should you rotate all of your oranges around to become reds? Reds are easier to make contrasting than orange, for example. People don't know that. Right. Just give me a hit. Yeah, yeah. No, fair enough. I mean, we provide contrast tools. It's built in there, much like all of these others, right? We'll give you the color dropper, we'll scan your page, we'll automatically find a text where the contrast is too low, where the contrast is good enough, and we'll tell you things like this text could be larger or you could bump the contrast. So, you know, choose. Okay, so make design choices that can still achieve the same goal? That's the aim. Okay, okay. So, how does this work? Is this a separate app or a plug-in? What is this? Yeah, so right now it's a Chrome extension, so it's completely free. You just Google for silk tide in the Chrome Store, and then you just install it. And it takes, like, one mouse click, and then you have an array of free tools, which includes the color contrast you mentioned, and a whole ton of other stuff, like a screen reader simulator, for example. A screen reader simulator? How does that work? Well, it's kind of what it sounds like on a tin, so we work with screen readers all day long, right? And if you've ever had the experience yourself, you'll know it's really, really difficult to set up a screen reader. Screen readers are a lot of work, right? Typically, many, many hours installing an awkward piece of software. Unless you're on a Mac and it's already there. Well, yeah, I don't like to brag, yeah, that's true. But no, but even then, right, so I do use a Mac, and it's still tricky because you have to go through like a learning process. There's like an entire wizard. Oh, it's not easy to learn. I didn't say that, but it's at least already there. Yeah, yeah, and I've been using one of those for years, and I still get lost. I still sometimes get trapped somewhere, and I'm like, how do I get out of here? And I reset the whole thing. So what we did is we just built a one-click button inside this tool that just simulates the screen reader inside any web page you're viewing in Chrome. So you just go to the page that you want to test, and you push the button, and now you're using a fake screen reader, which works just like MVDA, except we tell you how to use it down the side of the screen, so you don't need to sit there and do a three-hour course. You don't need to learn the screen reader, it's already there. An example where I was using this with XhapastWD in our development process with Helma and Mike Price and some others is we were trying really hard to make sure we had labels on everything so that screen readers would be okay. But I discovered by using a test screen reader that there were like two areas out in the middle of nowhere that were reading things out audibly, and that's not what we wanted. Didn't realize we were causing that, but you'd be able to see that with SilkTide. Yeah, and that's exactly why you need it, right? Because you can do all of the abstract learning that you like. You can sit there and read the theory, but there's no substitute for actually experiencing it yourself. Exactly, exactly. I mean, imagine if you were making TV back in the day, I remember this. You're making TV for black and white TVs. How old am I? Don't ask. And no, so as late as in the 90s, they were making TV ads, and they had to make sure that they still worked on black and white televisions. Sounds crazy. And you can try and guess what that's like, or you can just find a black and white television. And if you don't do that, you can do all the theory, you can be like, oh, I think this color works, and I think that... No, you just need to try it. There's no substitute for that. The problem has been with screen readers is that's incredibly hard, and we were like, can we make that something you can do in two mouse clips, which it now is. Oh, that's a fantastic idea. So can we take a look at it and see how this works? Absolutely. All right. We're going to do a live demo here. So now the audience is audio and video. Are you going to be able to hold that still enough up in the air? Well, I'll see your point. Shall we try this? Yes. Okay. So I'm going to talk through what's going on, because there's audio-only listeners as well. Okay. So I'm just going to open the extension, which is one click up here. He's got a website open called fakeuniversity.com. Yeah. To protect the guilty, we decided to make a free website, which is deliberately riddled with all manner of accessibility issues. So this opened up a sidebar on the left. It's a silk tide, and it's got a bunch of different options for accessibility checker, color contrast, alt text, screen readers. All right. Yeah, all sorts. So the sort of thing that people will often want to do is they might want to go into, say, focus order. This is one that I like. So if I click on focus order, this shows you the order of parts of the page as you would tab through them. So if you're using assistive tech, you can see how you would step through the difference. So what we're seeing on screen is a purple line with numbers on it. And so when it gets to each button, it's got the number there. I see eight, and then there's a picture of an image. That's nine. And that would have been also useful in what we were doing. We had a banner that was in the order four. So you'd get content, content, content. Here's a picture for no reason. And this would have visually really told it to us. Absolutely. And then in the same way, I'm sure we've all been here where you're like, well, what's the alternative text on this page? If you want to see it, you can click on this. And we'll tell you the alt text, for example, is missing on this image. And we'll tell you what it is on other parts of the page. So these are actually all missing alt text. In fact, this is kind of a bad example. Let me show you a website that does it well. So now it's on the BBC. Oh, BBC. Oh, the Brit's got to bring this up. Well, of course I do. I am still technically legally half British. I heard you're a Texan. I am indeed a Texan. And I won't deny it. And I prefer Texas to England. Don't hold it against me. Oh, geez. Controversy. You're finding it here. Spicy take. Anyway, what you can see is alternative text on the screen overlaid over these images. So yeah, in every image, we can see what the alt text is. And we're seeing a lot of green on the BBC website. That's right. But one of the things that we found is that when we were looking at websites or testing or improving websites, you want to see the alternative text in context. You want to know what it applies to without doing lots of extra work. So the idea of this is it just makes it really, really obvious. Oh, yeah. Excellent. So I'm going to come back out of that. Let's go back to the fake university website. And I'm just going to show you the screen reader simulator because this is definitely one of my favorite things. So is this going to be talking out loud? I should move the mic down to the speaker? I'll turn the sound up a little bit. It's going to be hard to judge. We'll see how this goes. So if I click on this, oh, no. I'm going to mute it now because that's going to get annoying very quickly. So we all know what a screen reader is like. The idea of this is that we've made a sidebar that gives you, firstly, immediately obvious controls on how to use this. So previous, next, and select. So you can go through here. I can select this button, for example, if I wanted. And then everything that's being spoken out loud is shown here as a transcript. So if you're not able to remember what was just happening, you can read it later on. The idea is, for example, I might be a web developer working on this and I don't have perfect memory for one or I don't want to turn this audio on and listen to the robot voice throughout my day, I can just leave it silently there and read the narration. And then there's a whole ton of stuff because, of course, a real screen reader has things like you might skip to headings and so on. And when you're doing that, you need to know your shortcuts. There are very shortcuts for landmarks, headings, links, form inputs, et cetera. We've simulated all of those and you can run those and see how they behave on your site. Oh, that is really slick. I like this and it isn't ugly. All right, this is a hard one. You know how I feel about contrast? Let's see the contrast color checker. Okay, so there's a couple of things here. So the color contrast checker, we've got a tool here designed to help do the thing that you would expect, which is, you know, you can pick out any two colors. That's just a silly example, but you can pick out any colors you want, if you wish. So you can do, for example, that. We also have a... Well, hang on one second here. We're apparently, we're getting the hook. Okay, one hour to closing time. Okay, so going back to the color contrast checker, I think that's got the thing I wanted, was that when you go, when he's flipping through, he's able to see and choose different colors right on the fly and see whether it fixes the contrast. I've had to go back into my web design, into the HTML and change it in order to see and then rerun the wave tool. Yeah, so I will be honest. At the moment, we do let you change... Sorry, you can see here the colors. We're highlighting, I don't know if you can see this, this part of the page where the contrast is not good enough. We'll show you what's going on, but we don't currently give you a tool here to preview changing that color. Now that you've sent it out loud to me and put me on the spot, I'm like, that's a good feature, we should do that. Well, I thought I just saw you do it a second ago. You picked two colors and you said that's not a good example. No, no, no, you're right. Yeah, so that's sorry, that's something else. That's for like, you can look at any two colors you'd like. So for example, I could go, how does that color contrast with, say, that color? And yeah, that you can... Yeah, so just take that little tool there and stick it over in the other color checker so I can get it right. In the, when we're going back to the, not just color contrast, build this capability you have here over into when I've got to fail. Where I can say, okay, let me pick it, let me darken, darken, darken. Okay, good enough. I got my 4.52 to one contrast ratio. That makes perfect sense. I, well, I have been working on this project for a while. I'll be very happy to take it back to the team and say, oh guys, sort it out. I love it, I love it. All right, this is really fantastic. Is that all the high points there? There is just one more thing I'll show you because it's easily missed. Everything you've seen here works on different devices. So if I wanted, I could have done that on an iPad or I could have done it on say an iPhone. And so he's got a simulator running on all of these. That's right. And so even things like the screen reader or things like the focus order will work on all of those devices. Oh my gosh, this is spectacular and it's free. It's 100% free and it always will be. Is that because you're a wonderful human being or you've got a business plan on something else? It could be that or it could be I'm very bad at running a business. You're going to have to decide for yourself. All right, well Oliver, this has been fantastic. Again, it's silk tide and you just look it up in the Chrome Store. You can run it on Microsoft Edge or on any Chromium browser I assume. At the moment, it is literally just Google Chrome but we are working on other browsers as we speak. Not on Edge. Usually everything that works on Chrome works on Edge. Well actually, it might. It might do. You know what? I don't know. I'll try it. I'll let you know if it doesn't. All right, thank you very much.