The Accessibility Show #7 – From automated testing to expert tweaks on the No Script Show website

[00:00:07] Nathan Wrigley: This episode of the WP Builds podcast is brought to you by GoDaddy Pro, the home of manage WordPress hosting that includes free domain, SSL, and 24 7 support. Bundle that with the hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place, invoice clients and get 30% of new purchases. Find out more at go.me/wpuilds.

And by Bluehost. Redefine your web hosting experience with Bluehost Cloud. Managed WordPress hosting that comes with lightning fast websites, 100% network uptime, and 24 7 priority support. With Bluehost Cloud, the possibilities are out of this world. Experience it today at bluehost.com/cloud.

And by Omnisend. Do you sell your stuff online? Then meet Omnisend. Yes, that Omnisend. The email and SMS tool that helps you make 73 bucks for every dollar spent. The one that's so good, it's almost boring. Hate the excitement of rollercoaster sales? Prefer a steady line going up? Try Omnisend today at omnisend.com.

Hello there. Welcome to this, the WP Builds Accessibility Show. As always, I'm joined by Joe Dolson. Hello Joe. Hello again. Nice to have you with us. I can't remember what we're at, I think it's number seven, episode seven.

It is number seven. Yeah. Perfect. Now this is gonna be a little bit special, for me at least anyway, because, a little while ago, anybody who's been listening to WP Builds the podcast for a long time will know that, it used to be David Waumsley and I who did the podcast together. And I don't know, probably about a year ago, maybe 18 months ago, David decided that he was no longer gonna be a user of WordPress, so it didn't feel right to do the WP Builds podcast with me.

So he stepped away, and actually at the time I thought that'll be the last thing that we do together in terms of content creation. But he had other ideas. About six weeks later, he called me up and said, can we do a different podcast? And so we did. And it's called the No Script Show. And the idea of that podcast, this is gonna sound like a promotion.

I don't mean it to be, but the idea of that podcast is we would not use a CMS to build websites, and it would be an exploration in what HTML. CSS and maybe a teeny tiny bit of JavaScript, but basically what HTML and CSS can do if you've just got those two tools in your toolkit. And so David has offered up for Joe the current state of the no script show website for Joe to have a look at.

From an accessibility point of view, it's a moving target because every time David and I do an episode where we talk about a new thing that he's learnt. He then adapts the website with that new thing. And so I've got a sneaky suspicion that the things that Joe mentions today, David will take a, good look at.

So I'm gonna just say this last thing before I finish this monologue at the beginning. I apologize. Any, and everything is done by David. I have had very little input to this website. I appear on the podcast as like a counter foil. So it's all David's work. So if anything's good, it's David. If anything's bad, that's probably my fault.

let's go with that. So the URL is no script. Do show, show is interesting. I didn't know that was in existence prior to that. And shall I pop it on the screen, Joe, for you to have a look at it? Let's do it. Yeah. Okay. Alright. So there is our no script show website as of July, 2025. You've made copious notes.

I did, yes. And I appreciate it. So over to you.

[00:04:03] Joe Dolson: Very extensive. I do like to. Prepare. and one of the reasons for preparing, especially on this particular site is, one of the very first things I do is just let's take an automated test and I'm gonna use Wave. And let's just kinda give, get an overview.

What is this site like, how bad is it? And for this one, it immediately pops up with zero errors, zero contrast errors, and only one alert. Ooh. So obviously your very first impression is, okay, somebody's done their homework, they've worked hard on this. That does not, however mean that it doesn't have accessibility problems.

So this turns this show into kind of a fun exploration of next steps. Like now that you've gotten that low hanging fruit, the easily testable errors out, how do you go about looking for what's next and what do you actually find? Okay, first thing I'm gonna do is I'm gonna look at this alert, 'cause sometimes they're relevant, sometimes they're not.

It says it's a redundant link, and that's really just because both the logo and the home link. I would say really that's not a big deal. it's not like it's, not going to cause people any serious problems to have that one link duplicated. It is actually, I think, a benefit to most users. the only reason I would generally eliminate the home link from a menu is if essentially the menus just totally got out, gotten out of hand.

because I think visually people will click on either, it's nice to have text that definitely tells you where to go. So I wouldn't flag that. I wouldn't consider it to

[00:05:52] Nathan Wrigley: be a problem. What, what's curious, I'm gonna interrupt here if you don't mind. yeah, it's curious that I would imagine. At this point, for many people, this episode would be over, the automated tool is the thing that, okay, I've, ticked all the boxes, look what the tool said.

And I can imagine many people going back to the client and saying, okay, we've run it through the automated tool. We found no errors. We're good to go. So that's an interesting observation that there's, things still to find, there's needles in haystacks here, which is great. Absolutely.

[00:06:21] Joe Dolson: Yep. Yeah. and this is where, getting expert advice really starts to come into play.

'cause as you will see, as I go forward, I am very much getting into the weeds. Nice. so the first thing I would do after that, having done this, is I'm gonna look at focus states. I'm gonna see, okay, is this thing keyboard accessible? Can I get through things? Where am I? I just set myself into the Chrome start tabbing now.

I happen to be in the middle of the page right now, so let's go back a little bit. Great. Okay. We've gotta skip to main content link. It works. Fabulous. I'm navigating around. This is a bold, very visible focus state. just as a design annoyance, I don't like the outline on the dark mode thing. I don't like the fact that it's going off screen.

It's not centered, but that is definitely not an accessibility issue. That's just, a pet peeve. so as far as that goes, like the menu, great. Go into the further down here. These things are clearly highly visible. so I don't see any real problems with focus. everything is very visible.

[00:07:42] Nathan Wrigley: Nice.

[00:07:43] Joe Dolson: So that's great. Now what, I'm gonna take a look at this back to top link 'cause it's good to make sure that actually works. It does, it sends you right back to the skip domain content link. That is where you want to be. So what do we start to look at next? Now it gets into really fine details.

I'm gonna take a look at this dark mode toggle. 'cause toggles are common areas of problem. I want to know how does this report, what it is? What is its name, and how does it tell you what state it is? So I'm gonna inspect this. I can see it's a button. Oh, sorry. I'll move off. you're covering up my notes.

Yeah, I was, yeah. So it's a button. That's great. A button is the right type of element. It's gonna report appropriately. it's got an aria label, so the aria label and a, and an image with no alt text. That's fine. That means it's basically reporting. It's label as that Aria label, the Alt Texas, the image is gonna be completely ignored by screen readers.

and it says switch to dark theme. I do note that it doesn't have any aria attributes. It doesn't have anything like aria pressed to give you a sense of its state. So my guess immediately is that this label is going to change when you toggle it. And indeed, that is what it does that I'm gonna say. That will usually work, but it is not the most foolproof way of doing this.

And the reason for that is sometimes assistive technology, is not going to announce that change. So you'll toggle it, it'll say switch to dark theme. You toggle it, it says switch to dark theme again, until you move away and refocus on that control. Okay? And that's gonna be confusing. Now, that's not like what's going to happen if you did a test with, in this case, I'm on n on Firefox and I tested this previous with NVDA and it worked fine, but that's what the latest version of NVDA, that's what the latest version of Firefox.

You can't assume that your users are using the latest and greatest of everything. and they may be using much more obscure tools. Mostly it just comes down to the fact that. That name might not, it's not guaranteed that name will be refreshed in the accessibility tree and therefore the user might not get it right away, and then it's going to be confusing.

They won't think anything has changed. That's gonna be for screen readers. Now, a screen reader probably also doesn't really care whether this is in a dark or light theme, but there are people who use screen readers who are also cited.

[00:10:38] Nathan Wrigley: Okay. Yeah. They might

[00:10:39] Joe Dolson: care. It's definitely, they can be a very helpful aid for, low vision users who, like what they need is to be able to see this best for them.

but they can be aided by that audio feedback on the whole, I would call that a relatively minor issue.

[00:10:58] Nathan Wrigley: Okay. But it's

[00:10:59] Joe Dolson: something that could be looked at. A more standard way to do that, in my opinion, is to label it. With a fixed value. So it's always just says, switch to whatever the non-fat theme is. and it'll tell you then using Aria pressed to say whether it is currently pressed

[00:11:18] Nathan Wrigley: or not.

Okay. So it's like a toggle if I'm pressed I have, I am exhibiting the dark theme. If I'm not pressed, I am not on the dark thing. Got it. Exactly. Okay. Yeah, that makes sense.

[00:11:27] Joe Dolson: and that's something that can be toggled. 'cause the default theme, I, I didn't test that, I didn't test this, but I'm assuming that if somebody has their preferences set to prefer it will dark mode, it will default to dark mode, in which case that is the default in this case.

Oh yeah. Okay. So it's a little complicated exactly what you're gonna communicate that as. but making it more consistent can be helpful. Okay. Thank you. That's a good one. So the next thing I'm gonna go along and do. Is, I'm gonna take a look at this more link. This is gonna be interesting. so now as a visual person, a sighted user, my first thought is I look at this and I'm like, oh, it's a dropdown.

[00:12:10] Nathan Wrigley: Yeah,

[00:12:11] Joe Dolson: it's going to have more links. So I just go over to it, handle it with the keyboard. And it's not a dropdown. It is not a dropdown. It actually sends me down the page. Yeah. To this list of more pages. Now, to me that's confusing. and that's a user experience thing. But in addition, when I look at it more closely, 'cause now let's go in and look at our inspector.

What I note is this also has an Aria label. And that means that the screen reader is getting different information from the sighted user. And in this case, the screen reader user is getting more information because they are told that this link goes to more navigation links in the footer. So they have vastly more information than the sighted user does.

[00:12:59] Nathan Wrigley: Interesting. and that is okay?

[00:13:00] Joe Dolson: Yeah. Is that explicitly an accessibility problem? I would say yes. And that's because user expectations are going to be guided by what they see and standards of expectation. And honestly, you see a link and a navigation menu that hasn't arrow on it. The that's really something you just expect is going to be.

A dropdown menu.

[00:13:27] Nathan Wrigley: Yeah, there was, there's a, we did a whole episode and we, it, this wasn't the entirety of it, but it definitely covered it. And, and it was, all about whether or not it, that dropdown should be a dropdown and also the duplication of menus, the, navigation links Yeah.

Kind of already existed in the footer, so why not just skip to them? but fascinating. Yeah. Interesting. So my question for with that, if you were not cited, if you were simply using a screen reader, does it function? Or

[00:14:05] Joe Dolson: is it

[00:14:05] Nathan Wrigley: Yes,

[00:14:05] Joe Dolson: it does. Yeah. Okay. Okay. It's very straightforward. this is, one of the great things.

It's, there's no script show and there's no scripting to this. And with no scripting, it works just fine. When you're talking about like in page links, your skip to content, so this has three, there's the skip to content link, there's this more link, and then there's the back to top link, and those are all in-page links.

Normal. In-page links. They just link to an id. Yeah, as long as that Id attribute exists on the page, it's gonna work just fine. It takes you there. You should be fine. There are some historic browser bugs that could have caused problems with that. They are not really issues anymore. Most of the problems with those types of links happen once you start to script them.

When you script them and you're like, now I want this fancy scrolling effect, but you've only moved the visuals and you haven't actually changed the focus and that sort of thing. because this is the no script show, it's not doing those things. So it's not breaking those

[00:15:06] Nathan Wrigley: buttons. the intention as well with this, and I recall this part of the conversation was that when you hit the more link, you were greeted by a, that weighty border, saying you've arrived here.

so if you click on that once more, let's see what we go. Yeah. and I am actually a little critical of that. Yeah. because there's quite a lot of black lines elsewhere on the page as well. that's actually not the reason. Ah,

[00:15:32] Joe Dolson: the reason is because you've never seen this before.

Yeah. It's novel, isn't it? you don't know that the black line is new. It doesn't stand out enough. It could just be a design thing that the, list on the left is bla is, doesn't have an outline, and the list on the right has a, has an outline. how would, you've never been here before, right?

So you don't have a context to know that this is highlighted. So I, if I was gonna highlight it, I do it with something that's actually an outside of the color scheme that is standard, maybe a light yellow background or something. Just, and I keep the, dark outline because that's highly visible.

but I want something more because this isn't enough to tell me that I have, that this is novel, that this is actually giving me an outline because I've focused on this.

[00:16:24] Nathan Wrigley: Yeah.

[00:16:25] Joe Dolson: I would also consider, animating something in. Okay. now obviously I'd want to respect prefers reduced animation. So that doesn't just always happen.

But the advantage to the animating in is that. It happens after you get there. So the user lands there and then that animation blossoms and you're like, aha, this is where I am. Because you've actually seen something change.

[00:16:53] Nathan Wrigley: It's hard to see it. I don't know if the video that we're doing is capturing at the sort of frame rate that we need it to, but when you click on the link, does this sort of does this, that black border kind of wobbles into place, if I didn't see that. so if you might need to refresh the page, I don't know. But if you click on it.

No, that's curious. No, I don't see that. I wonder if that's a bit of JavaScript then or something that he's actually used. Yeah. So what happens on my screen when I click with the mouse? And there may be something there as well. I don't know. is, yeah. Interesting. Oh, I wonder if

[00:17:29] Joe Dolson: it's not doing it because I already have it focused.

[00:17:33] Nathan Wrigley: I, I have to re refresh the page. Oh. And then if I do, no, so that's curious. It only happened the first time and now, oh, I wonder

[00:17:40] Joe Dolson: if it's something that's only supported in Chrome. Interesting. Yeah. It might be that there's some CSS in there that just isn't so

[00:17:46] Nathan Wrigley: I'll describe what I'm seeing. So basically that the border it's almost like it's zoomed in a little bit from behind.

It's wobbled into place a little bit so that there's, that's interesting that the sort of do something special to alert to it. I maybe David's given that a bit of thought, but I like the idea of the, The yellow background as well. I don't see it on Chrome either. Interesting, Yeah, so

[00:18:10] Joe Dolson: I, don't dunno. I would say if that is something that's happening, then maybe there's something broken about it. 'cause I'm not seeing it.

[00:18:15] Nathan Wrigley: Yeah, yeah. Okay. Thank you. But

[00:18:16] Joe Dolson: I do think some kind of animation, some kind of something that's different about this helps to pop it out.

[00:18:22] Nathan Wrigley: Yeah. Would you, if, you were obviously, I, I know that, we've got this whole thing where David's in the background.

He's actually, he's not with us today, but he's in the back of my mind as we're doing this. I'm trying to be, his friend as well. And, would you have put that into a dropdown then? Would your preference have been, let's just put it in a dropdown and have a, maybe a duplicate set of links in the footer?

Or just get it rid, get rid of it in the footer? I would probably have

[00:18:48] Joe Dolson: kept it in a, put it in a dropdown. Okay. And then having the duplicate links in the footer is, fine. Yeah. they serve different purposes because you would counter them at different times. And it's, a reasonable choice.

Okay. Now I'm gonna talk about the other thing that would annoy me about this as a, a sighted keyboard user. because you tab down to this and you weren't expecting to go somewhere else, so now you have to figure out how to get back to the top. Oh, okay. because maybe you just really wanted to find out what was in this more link, because, more as a heading for a section of links is definitely in the zone of, I have no idea what this is.

[00:19:32] Nathan Wrigley: I see. So now you get to this and you realize this isn't the menu for me, and you wanna back down. Now you're somewhere else. Now

[00:19:38] Joe Dolson: you have to figure out how to go back. Okay. now there is this back to top, so you've got five or six tab stops to get there, and then it does take you to the top, which means to get back to where you are, you've got another five or six tabs.

Yeah. Okay. And the thing is, like, when you're not using a screen reader, you just don't have a whole lot of. Tools available to navigate around the page with a keyboard. and so it's it's an irritation to have something happen like that is just unexpected.

[00:20:07] Nathan Wrigley: Yeah.

[00:20:08] Joe Dolson: Yeah. Okay. There was one other thing that I observed in this menu that I'm not gonna address right now, because honestly I don't know exactly what it is.

and it only happens with a screen reader, and that's, I think it has something to do with the view transitions, that there's a delay, in changing the focus. And so it reads where you currently are, but then when you hit tab, you've moved somewhere else.

[00:20:31] Nathan Wrigley: Oh, okay.

[00:20:32] Joe Dolson: it was weird, and I don't, I'm not clear enough on exactly what was happening to really go into detail.

[00:20:37] Nathan Wrigley: Okay.

[00:20:39] Joe Dolson: So let's start about now. Let's, I'm gonna start doing some reading. I want to look at things like what is the heading hierarchy? So I just pop that open and it looks fine. This is all totally reasonable. so I'm gonna read things. And I'm gonna read them with a screen reader because what matters to me at this stage is how does a screen reader actually speak what we have here?

'cause that's gonna tell me some things about what's here. 'cause I'm gonna want to know things like, is this part of the heading or is it not part of the heading? If it is part of the heading, how are they separated?

[00:21:21] Nathan Wrigley: And

[00:21:21] Joe Dolson: so if

[00:21:23] Nathan Wrigley: you're gonna, sorry, just to interrupt very briefly. We may not hear the audio, so if that's the case.

that's

[00:21:28] Joe Dolson: why I'm, not actually popular. Maybe I should open up a screen reader and just we'll find out whether you get the audio. Yeah, I don't think we, you'll, you won't know, until you listen to the recording, so maybe let's just not do that. I did it in advance so I know what things are saying.

Oh, okay. Okay. Let's go with that. Yeah, you, I'll just see what you found through. Yeah. Thank you. That's fine. Alright, so the first thing I found was this, join us on YouTube. And what it was announced as is join us on YouTube. Oh. And that's one of those kind of fun characteristics of using all caps, is that a lot of screen readers use because people are extremely unreliable about marking abbreviations.

They use a variety of heuristics to try and guess that something is an abbreviation. And one of the cues for that is being in all caps. Yes, of course. Because that is a common thing for an acronym. And so a common abbreviation that happens to be in a phrase in all caps is commonly interpreted as an abbreviation.

If this was in sentence case or lower case, it would be announced, join us on YouTube. And I did test that. And yes, that is in fact what happens in NVDA, but as it is, it was announced, join us on YouTube. That's such a, and this is one of those things always be aware of when you Yeah. Decided to put anything in all caps is you have to be really careful about exactly what you write and you should, that is because it's, there are all that is absolutely

[00:23:11] Nathan Wrigley: fascinating and a simple fix, I guess as well.

Just write it in lowercase and then, just uppercase it with a, there's another, yeah. Common

[00:23:18] Joe Dolson: one. with skip a content links is, Whether it's pronounced as skip to content or skip to content. and I can't remember off the top of my head which way it goes, but Yeah, With a, capital C, it goes one way and with a lowercase C it goes the other way.

yeah.

[00:23:40] Nathan Wrigley: It's like a homophone problem. Yeah,

[00:23:42] Joe Dolson: it's a, those are all these kind of funky little cues that you learn over time that things do, and you have to plan for.

[00:23:52] Nathan Wrigley: That is fascinating though. That is such a weird, because it still makes sense in both cases. It makes sense, but they're completely different.

Join us on YouTube. Join us on YouTube, They're both reasonable. One of them

[00:24:06] Joe Dolson: is wrong.

[00:24:07] Nathan Wrigley: Okay. Oh, thank you. That's such a fun one. I think he'll probably giggle at that. Yeah,

[00:24:13] Joe Dolson: that's, it's not the funniest one.

[00:24:14] Nathan Wrigley: No.

[00:24:15] Joe Dolson: Okay, great. oh, brilliant. Alright, so the next thing I took a look at is this episode list.

Now this I actually don't like. and that's because these are images. and that means that the text in there is only in the image as far as a sighted user goes. So particularly for low vision, if you need to like zoom, weigh in, you're going to start experiencing pixelation. It's not as bad as it used to be.

the Web P format is frankly a lot better at that, but it still pixelates. and one thing to recognize is that, first of all, there is an explicit waid criteria that states that if it is possible to achieve your presentation in text, you should do it in text and not in an image. And that is absolutely possible with this text.

Like this could absolutely be your thumbnails on the right. The text on the left and a border, there is nothing at all stopping it from doing that. got it. And that just gives people more flexibility. It means that they can zoom in. It means that it's all readable. and it means you don't need to do things like add this visually hidden text inside your link because you instead have visual text.

And that leads me to my second criticism of this, which is that this visually hidden text says, see our post titled, are we right in the Head? And that is not the visible text. It does contain the visible text. And so it technically does pass the wicked criteria that governs that. there is a WCG criteria that stipulates that if there is visible text in a control, that text must be included in the accessible name of that control.

[00:26:21] Nathan Wrigley: That's interesting language, isn't it? Because if it, if the wording is included in, and I You can surround it with other things so long as it's in there somewhere. but okay. Yeah. The

[00:26:31] Joe Dolson: actual best experience Yeah. Is if that text is the first text. Oh, okay. So in this case, that's actually easier.

Okay. So the fact that CR post titled there is first is not actually super helpful. Also, I don't feel it's necessary. what, we're in right now is we're in a list which is under a heading that says episodes. What? Why do we need to be told that this is a link that's going to go and see our post?

First of all, it's actually, 'cause what you're actually going to see is your episodes. So seeing, see, our post is actually a little bit confusing 'cause Oh, I thought this was going to be episodes.

[00:27:10] Nathan Wrigley: So the context is, provided by the things in You've got,

[00:27:15] Joe Dolson: you've already got context for this.

Okay. You don't really need to add another level of context. So

[00:27:21] Nathan Wrigley: is this a little bit akin to, or adjacent to, for example, on a featured image having alt text, which says, which begins an image of, and then you describe what's in the image. Yeah. This kind

[00:27:33] Joe Dolson: of similar

[00:27:33] Nathan Wrigley: to that. Yeah.

[00:27:33] Joe Dolson: You've already, we know it's image, there's self evident and there it's just not helpful.

Okay. I think there's a, there's a through line of providing context for a screen reader user where it's not about providing more, it's about providing the right amount. Interesting and more is actually potentially unhelpful. That is fascinating. Okay. I, think that's, and in this case, I, am. I actually just don't like the way this is done.

I would, just make that be visible text and redesign that to be, two things next to each other. Got it. Yeah, I think that would be easier.

[00:28:16] Nathan Wrigley: I'll tell you what though. I've, learned something interesting there about the context of the, wrappers of, the, HTM HTML and the DOMS surrounding it can provide context in this case about the fact that we know we're dealing with episodes.

Okay. Fascinating. And actually

[00:28:30] Joe Dolson: that is,

[00:28:30] Nathan Wrigley: the whole point of headings.

[00:28:31] Joe Dolson: Yeah, that is actually why, yeah. In accessibility, we're talking constantly about heading structure and hierarchy is because the reason the headings are there is to provide context for the content that follows them.

[00:28:44] Nathan Wrigley: C can I ask a very rudimentary question, which will give away just how little I know about screen readers?

Can somebody, let's say for example, they are, they're focused right? Where you are on this image, can they, is there a method for getting the context of the surrounding structure? Or do they have to tab back up the interface to get that? Or can they say, tell me what the heading for this portion is?

Even though I'm not at that heading,

[00:29:11] Joe Dolson: I don't believe. I'm not aware of any mechanism where you can basically just say. Give me the context I'm in. Yeah. And that's partially because there, there are actually multiple contexts. Okay. Yeah. your local context here is that you're in the episodes heading, but beyond that, you're in the making website simple again, heading.

And so having that tool know which level of context you want is a little bit tricky. but what they do have is they have lots and lots of navigation tools for jumping around the page. And one of those is you can just plus shift tab h. And that navigates you to the previous heading.

[00:29:52] Nathan Wrigley: That's exactly what I was after.

Yeah. So this is simple. You do have to go to it, right? Yeah. But, you must have, but, it's trivially simple to do. Okay. So that context is really easy to gain and presumably you went through it to get to where you are

[00:30:06] Joe Dolson: very likely. Yeah. so the primary, the most common, most popular way for a lot of screen readers to navigate.

they all have their own way of doing things, but one of the most common is to navigate by headings as your kind of starting point.

[00:30:19] Nathan Wrigley: Yeah. Yeah.

[00:30:20] Joe Dolson: and that's where you discover whether or not the headings are actually useful. and that's, again, there's definitely another part of this, and I'll talk about this in a bit, which is the right amount of information and using headings for everything is also a problem.

it's true. And it's a very common thing with like lists of posts for the title of each post to be a heading. These are not, and that's great because they really don't need to be, it wouldn't help. There's no additional content.

[00:30:52] Nathan Wrigley: I was just gonna say that it's curious to me that I hadn't really noticed that I did that.

My, my reading is, linear. I start at the top of the page and I go to the bottom. I read a lot of novels, uhhuh, but around the web, I'm, quite furious with the mouse. I scroll through to things until I suddenly think, okay, that captures me. You stop there and then I don't know what the context is.

So I will use the mouse wheel to slowly scroll up until the next heading appears and suddenly I know, okay, now I'm in episodes. Okay, I get it now. Yeah. And I do that quickly doing the same thing as screen reader, user guide. And I quickly, and I do it subconsciously. And I didn't know until you just said that, those words that I was even doing that.

Yeah. And so that's interesting. Okay.

[00:31:34] Joe Dolson: Yeah. And that's one of those really interesting things is that like this whole navigation by headings is in no way a unique thing to screen reader users. It is actually the way. We are all breaking up this content and trying to make sense of it, is by seeing these visible structures.

And that's why it's so important that the markup of our visible structures is correct. 'cause otherwise we are taking advantage of the fact that we've got big text here and some bold outlines and everything is clear and obvious visibly and taking that context away from somebody who's using a screen reader.

So those headings are very important.

[00:32:15] Nathan Wrigley: Okay. Okay. That okay? I think I learned a lot there. That was fascinating. Thank you. Okay, carry on. So moving on.

[00:32:21] Joe Dolson: Yeah. Obviously the next thing I looked at was the projects list. And this one, this is a little weird. it's got this side to side scrolling, which I'm not a big fan of.

there are problems with scrollable containers. the main thing about scrollable containers is that. Not all devices will be able to consistently focus the container. and then you won't be able to just scroll it visibly to go back and forth. that can usually be fixed by, giving it tab index of zero so that keyboard focus will actually move to the container.

Yeah. Once you've done that, you also need to make sure that it has a name. So it's going to have a roll of group and then an Aria label that says that it's projects. there's the whole lot of stuff that comes along with that, but then that's going to make that whole ability to scroll it with the keyboard more universal.

[00:33:25] Nathan Wrigley: Okay.

[00:33:26] Joe Dolson: Okay. alternatively you just say, why do we have the scrollable container? I don't think it's necessary. but that is a separate conversation. The next thing I looked at was actually the individual projects, and this markup, I think is weird. So we've got a figure, and a figure is a common grouping element.

It's basically used to say we've got a figure, it has some content, and then we can optionally also have a fig caption, which is the description of that content. One thing that a figure would not normally contain is another figure. Okay? and this does, and then additionally, the first child of the figure is a link that has an aria labeled by.

Now, there's some really key differences between when you're using the aria label attributes, aria label and Aria labeled by versus aria description attributes like Aria described by Aria, described by adds additional information to a label, but the labeling ones replace the names of that. Okay, so in this case, like we have this image that has alt text.

This is going to be completely ignored because it's inside an element that's been relabeled.

[00:34:50] Nathan Wrigley: Oh gosh.

[00:34:51] Joe Dolson: Even though that label is referencing something that's inside the label. Okay. Okay. I would say this could stand to be grossly simplified. There is no need to have two nested figures. That's definitely not helpful.

the, fig caption is going to label the figure, and the image can label the image. Having the, link, like I feel like what there needs to be here is basically a decision about. Whether you want this to just be labeling the link or whether you should also have the image as it's currently marked up.

When I was trying to explore this with a screen reader, I could not access the image at alt attribute. I couldn't find a way to get to it. Okay. I'm pretty sure that's an artifact of the fact that it's wrapped in this link with the aria labeled by, which is overriding everything inside it.

[00:35:51] Nathan Wrigley: Okay.

That's fascinating. Okay, so

[00:35:54] Joe Dolson: effectively this might as well have an empty alt. It's already not perceivable, in which case I would mark this up just as a figure. Have a link that's, wrapping the figure. Get rid of this figure and get rid of the aria labeled by.

[00:36:10] Nathan Wrigley: Okay.

[00:36:10] Joe Dolson: And then I would empty the alt attribute and be like, no, this is a decorative image.

Gosh, that is interesting. And it is essentially, honestly, it is decorative because what is the value you're getting out of this all, there's a ton of information in the image. This Tex Bistro demo website screenshot doesn't really tell you anything. You have to go to the website to actually learn anything about it.

So website, demo one bistro is sufficient.

[00:36:38] Nathan Wrigley: Okay.

[00:36:38] Joe Dolson: There's a lot in there. Thank you. Yeah, there's a lot. the, double figure and the aria labeled by, they have some interesting side effects. Yeah. Yeah. Worst worth a addressing. Thank you. So hosts, next strike. Do we have to dwell here? We don't have to dwell here very long.

Good. So there's a very, subtle joke here, which may not have been intentional, but is not made available to screen readers. Oh. And that's this line right here. That describes Nathan as wearer of hats. Look, he's wearing a hat, but he is not wearing a hat. That's true. That is a very subtle joke. But the alt text for this just says that it's a black and white headshot of Nathan and I feel very strongly that it should say not wearing a hat.

Okay, that's brilliant. 'cause it's relevant to the bio. I love that. So to me, like this is a, the exact kind of thing that is, this is what we need to think about with all text is like, is there anything about this image that you really need to communicate for things to make, to set, make sense, and for everybody to get equal context?

And yes, absolutely. That's very subtle and it may just be the way my mind thinks to have immediately gone to, but he's not wearing a hat.

[00:38:12] Nathan Wrigley: Do you know? That is so interesting because okay, as a sighted person, very often the subtlety of something is in the expression that the sentence is delivered in you.

You, you know that as well as anybody. Yes. absolute, a, slightly angry face can deliver a deadpan set of words, but the face says, I am not happy. and in effect, the, only weapon you've got here is, the language. And the language has to imply and has to give away the subtlety of this.

So in this case, let's assume that David was in fact making a joke that he is quite a witty chap. So it's entirely possible you have to somehow feed that humor. In this case in. But also it might be that, an emotion or something needs to be described. if something is clearly, it's an image of somebody who is clearly angry or whatever it may be.

That is fascinating.

[00:39:11] Joe Dolson: Yeah. It's a, it's always that interesting distinction between what kind of content goes in a caption and what goes in an alternative text. Yeah. Is essentially, a caption. It's visible, it's content that's being conveyed to everybody. have you seen the, it's about the image, but it does not in any way have to describe the image.

Yeah. Whereas the alternative text is about the image, and it actually should describe the image, but is not necessarily a description of the image because it actually, it needs to convey why the image is there and what it means. so that can be extremely contextual variation. Yeah.

[00:39:53] Nathan Wrigley: I, think, but in this case.

Yeah, sorry. I was just gonna say, I think you're onto something there because if you look at, so again, if you're listening to this, apologies, but there's an image of me and there's also an image of David and David's done the same thing to himself with the image, but all of the text is contained in the text.

it says typical Pisces, astrology, debunker. it's here's the thing, but it's not a thing. And he is done the same with me. Here's a hat, but it's not a hat. So I think you're onto something that's

[00:40:22] Joe Dolson: fascinating. And then I'm also gonna take a look at the actual HTML here. so this is an image with a heading and a paragraph.

And the irony is you had in your previous section two figures. clearly you've got a spare figure and this would be a perfect opportunity to use figure and fig caption. 'cause this is a figure, it is an image with additional. Captioned context, this is clearly prime figure territory. Got it. And that allows those two things to be directly associated with each other.

that is something that I think should be done as well.

[00:41:06] Nathan Wrigley: Okay. Oh, thank this was moving along. Are we scrolling away from that bit? We are, yeah. We're, heck, now

[00:41:11] Joe Dolson: for the first time we're actually leaving this

[00:41:12] Nathan Wrigley: page. Oh, nice. Okay.

[00:41:14] Joe Dolson: We've made it off the first page. Yeah. Oh yeah. Good job. Good job. I took a look at the contact page and this is an interesting one.

Now I'm on a new page, so I'm gonna hit wave again just to double check it again. Says that it's fine. and honestly, on a superficial basis, this is fine. the, these labels are labels, they move you into the field. The field does have a focus state. that focal focus state, in my opinion, is a little subtle.

like that, shift from black to red. I didn't actually check the contrast on that change. Okay. But I think it's probably a bit too low. it's just not, it's not as obvious as I would really like it to be. but then that's where things started to get weird. these bits of information, those are correctly marked up.

You've got an aria described by that points to this help text. That's fine. I am not sure any of this help text is particularly helpful. when you say full name, I'm not sure somebody actually needs to be told that means enter your first and last name, but it's, I don't think it's harmful either.

it's just maybe a little excessive, but then I was like, okay, but it's also got this name error. which of the role of alert. roll of equals alert and re live equals polite. I'm not sure those can actually be used together because roll alert automatically goes with re live. Assertive, I believe.

Okay. Okay. I don't think it's gonna harm anything. It just might not have the result you expect. I was like, okay, I need to try and figure out how to trigger an error so I can see how those work and how they announce. and there's also one on the email address. so I'm like, great, I'll do that, but I couldn't figure out how to do it.

I couldn't actually trigger one. Okay. and there is some interesting stuff here, like that is not valid for this form because this has some field validation that requires the name to be, more than two characters. it's because of this pattern. I also will say that it is very fraught requiring any particular lengths or patterns for names.

there are a million articles out there on how wrong. You can go by imposing expectations on people's names and I would just tend to not do that. Yeah.

[00:44:10] Nathan Wrigley: If

[00:44:11] Joe Dolson: you need validation, do it on the server side, and don't block it from letting somebody submit something. Like your validation should be entirely security focused, not is this a real name focused 'cause Yeah, you could be really surprised by real names.

[00:44:29] Nathan Wrigley: Yeah, it'd be interesting to see what David's comment is to that. I dunno how much server side there is in this. I

[00:44:35] Joe Dolson: couldn't. I couldn't figure out any way to actually get anything to trigger those errors, those alerts. Yeah. and I tried all sorts of things with invalid email addresses. I was able to submit this form with an invalid email address.

Okay. It didn't stop me, even though this is an email type form and is required, but it didn't, stop me. So I feel like there's just, there are some bugs here. There's something not working. An additional thing is, so the, message field has, character minimum and maximum.

I would love to be notified if I'm approaching the maximum.

I, nobody's going to be counting their characters. So if you've written a message and you're hitting like, like 900 characters and you have a lot more to say, you have no idea you're getting. Near that limit. So having some kind of scripted trigger that's saying, Hey, you've got a hundred characters left, or, Hey, you've got 20 characters left before you wrap up, is really nice.

Okay. These things are always delicate because if you have a character counter that's announcing every change, that's just irritating. Nobody needs to know, oh yes, I typed one more character and now there's 300 left, one 17 left. Yeah, wonderful. Yeah. Okay. That's just incredibly irritating, but getting some feedback, getting like a make like a halfway mark warning and then three quarters and then you're nearing the end, those are really useful because that actually helps you pace.

Comments. 'cause if you hit halfway and you're like, oh, I'm nowhere near halfway, I need to be more concise. that sort of thing.

[00:46:26] Nathan Wrigley: I feel, like forms is an area that we should dip into much more deeply in a future show because Yeah, there's so much of the web is forms these days. Yeah. And so many people, you just find a really

[00:46:36] Joe Dolson: interesting example.

Yeah. Yeah. That's a definitely a thing to tie into. Okay. and then we have the send message button, which, has visible text that says, send message and visually hidden text that says submit contact form.

[00:46:54] Nathan Wrigley: You want 'em to be the same,

[00:46:56] Joe Dolson: No, I don't want no. The visually hidden text to be gone, none.

what's the point of that?

[00:47:00] Nathan Wrigley: Okay. That makes sense. Sorry. Yeah,

[00:47:02] Joe Dolson: send message is going to, people will understand when they see it, hit a button that says send message, that it's going to submit the form. That's what sending the message does. if you feel it's necessary for somebody to understand that, that te that sending message will submit the form, then you should assume that's true for everybody.

[00:47:21] Nathan Wrigley: Yeah.

[00:47:21] Joe Dolson: Okay. Like, why Is it just screen reader users who need to know that, oh, sending a message is submitting a form. That's, that doesn't make any sense. If you think that's important, make it visible. If you don't think it's important, get rid of it. Yeah. And in my opinion, get rid of it. right now, a sighted user.

Is going to see send message, but a screen reader user is going to get send message, submit contact form. Yes. No, it's excessively verbose. It's pointless. Yeah. Don't do that. Yeah.

[00:47:54] Nathan Wrigley: Okay.

[00:47:57] Joe Dolson: that was all I had on this page. Okay. Because it's not a complicated page. I did not look at the, security verification.

Those automatic security verifications are interesting. They, the difficult thing is when they don't successfully verify you, what they might do next is, could be awful. But yeah, I didn't go to that stage and

[00:48:24] Nathan Wrigley: no that're bad

[00:48:24] Joe Dolson: enough beyond the scope of what I wanna look at. Yeah.

[00:48:26] Nathan Wrigley: Okay.

[00:48:26] Joe Dolson: Okay. Okay. So next I went to a specific show page and I'm not going to.

Worry about how I get there. I'm just gonna go to it. so here we are, we're on a page. Oh, there we are again. Yeah, I know. Oh dear. It is a little bit inevitable that when we're reviewing a, a page that's about your show, that you're gonna show up on screen. It's very uncomfortable

[00:48:50] Nathan Wrigley: though.

[00:48:52] Joe Dolson: I find it really interesting that you're very uncomfortable with your image showing up on the page.

Yeah. But you're animated and in this video. Yeah, exactly. It's doesn't make sense. Gary, your thesis is always on the screen, so the first thing that annoys me is this little hash here,

which is not. Behaving the same as it did when I looked at it yesterday. What's going on? Oh,

[00:49:26] Nathan Wrigley: I wonder if he's changed something. I said nothing. How did it behave previously? Interesting.

[00:49:35] Joe Dolson: it was a link. Okay. Is it a, oh, I see. It's still a, it's, it is a link.

[00:49:43] Nathan Wrigley: Okay.

[00:49:44] Joe Dolson: Okay. Now it's a link. Oh, that's weird.

It wasn't a link right away. It's now a link. Oh. I wonder if that, maybe that's scripted and it's just coming in a little late.

[00:49:52] Nathan Wrigley: Okay. Maybe,

[00:49:54] Joe Dolson: that can be a, an interesting thing if, any deferred scripts, loading things a little bit later can be a little funky. Yeah. Okay. So there's a number of things that annoy me about this.

First of all, it's, below color contrast guidelines. so it's gonna be difficult to see for a lot of users. it's at 1.96 to one, which is well below color guidelines. And then additionally, like it's, there's a lot of repetition here. Like here we've got this span inside the heading, which has the hash, and then there's also a span inside the link, which is in the same location.

and then there's the link itself, which has this visually hidden text that gives you the directions of what this is going to do. I'm gonna say just judging from how this is showing up on the screen, showing that overflow Yeah.

[00:50:59] Nathan Wrigley: That

[00:51:00] Joe Dolson: this visually hidden class probably needs to be looked at. I'll do that in a minute.

But this label is something that really bugs me is it's telling you to jump to the section titled What's Behind The Great Divide, which is the thing. You are on. You've done it to get there. You did that. And I will freely confess I know what this is here for. Yeah. The reason this link is here is so that people can relatively easy copy a link that is going to point to a given location in the page so that people can create deep links that are going to go down to a particular heading.

But the user experience, like if you're navigating this page by tabbing through, link to link is not good because in this case, like you tab and what you tab to is this link which says jump to section titled What Behind the Great Divide. And you're like, oh yeah, that sounds interesting. I wanna go to that.

And you click it, oh, and you're there. And then you hit tab again and you're on the same link. Yeah. Okay. 'cause you just jumped to the section you're already in. Got

[00:52:08] Nathan Wrigley: it. So the

[00:52:09] Joe Dolson: user experience here isn't great. I would be inclined instead. To do something like maybe have that be a button that you can use to say copy link to this section.

Or something along those lines. Just not making it a link that points to its own location. That's, yeah. That's messy. And it's, I don't, like that user experience. but I also think this is, can be a difficult thing to do, but there's no question that, like if your experience is, Ooh, that sounds interesting, I'm gonna go to that.

And then you don't actually go to that. Yes. Or you just go to the same place you're already in. Yeah. best possible case is it was a waste of your time, but you do discover what you're supposed to be on. Yeah. I understand. That makes sense. So yeah, I, I would choose not to do that. And then the next thing I noticed was these bulleted lists.

so these bulleted lists have custom markers. And that marker is being injected as pseudo content of the square character. So now that's a standard Unicode character and it has a name. It is, in this particular case, black Square. Oh. So this list, when you enter that list is read as list with three items, black square over gatekeeping and gender bias, da And that's because that injected content default markers are not announced because they are presumed to be just a standard part of the list marker. But if you inject custom content. It's going to be announced unless it's actually a character that's outside the band of announced characters.

[00:54:07] Nathan Wrigley: Okay?

[00:54:07] Joe Dolson: And that is extremely hard to control and very unpredictable.

okay, don't do that. No results. Lots, something you should count on. But I'm gonna say that modern CSS is pretty cool. And, pseudo content supports alt text. Oh, and this is what you would actually want to do is, slash empty quotes after the pseudo content, and then it will not be announced. It'll be ignored.

And that has pretty good for cross browser support at this point. at least in mature browsers, modern

[00:54:43] Nathan Wrigley: browsers, it's gonna be fine. Okay? So empty content. No announcement, which is exactly what he is intending, I'm sure. Which is what you want. You don't, your bullet to be

[00:54:52] Joe Dolson: announced. That's not meaningful content.

It's just black square. yeah. So that is like a super simple change that can be made really quickly and just be like, bang, voila.

[00:55:03] Nathan Wrigley: Yeah. And I'm imagining on parts of the, this website, we've got fairly long list. So just hearing Black Square. Oh, black Square. Oh yeah, you're gonna hear it every time.

Yeah. Yeah. Okay. That's, oh gosh, that's a good one.

[00:55:14] Joe Dolson: and that's as far as I got. So that was the issues. And I do wanna say overall this site has good accessibility. yay, I'm not coming in on this and going, oh my God, it's a disaster. But this is an interesting exploration because, as much as there's been lots of good work done and like it's got a great heading hierarchy and all that's been detailed out, there are interesting things that can be looked at.

There's always room to improve. it's interesting to me like you've got these three. Blocks of kind of similar content in a row. You've got this list of episodes, you've got the list of projects, and then you've got the list of hosts and every one of those is marked up differently. And there's some justification, like the hosts is definitely different 'cause it's got these, this caption content, which the other ones don't have quite the same, but consistency can be really good for users.

Like just having everything marked up fairly similarly, like this particular one, this is in a list, which is nice because that means as soon as somebody enters the list, they actually know how long the list is. Yes. Okay. Yeah. Yeah. But the projects are not in a list, so you don't know how many these, how much those are, which is, of course, the projects list is actually longer than the episode list.

So it seems like that would be more useful there. it's a debatable whether having a list for only three items is super necessary. It's not, but it is nice. It is nice to go into a list of episodes and know, oh, I'm not, getting access to like their entire archive of content and now I have to tab for an hour and a half because they've got 125 episodes.

[00:57:05] Nathan Wrigley: Oh, honestly, yeah. Absolutely Fascinating. So Joe, as always put together a comprehensive list in our sort of shared show notes, our shared Google Doc, and, and there's lots of stuff in there. And I, when I saw those, I thought, oh, there's lots. There's lots to talk about, but I think what you're trying to stress right at the outset is that when you did the wave at the beginning, no error.

So we're kneeling a haystack, h so that's good. The other thing to say is I know that David is incredibly keen to watch what we've just recorded, and, and I, it wouldn't surprise me if he, stays awake all night and trying to, get them all fixed up. and maybe, if the stars align, it might be that David, Joe and I will get together on an episode in the near future and look at May, maybe this, but it sounds like David's got a different plan.

if Joe's willing to, I'm not sure there'd be a

[00:57:58] Joe Dolson: whole lot of payoff from looking at this again. No, no. I think he's not until some distant point in the future where it's changed completely.

[00:58:05] Nathan Wrigley: Yeah. But he's got, I think he's got a different thing up his sleeve, which, yeah. Yeah. But there we go. So let me just change the focus of this a little bit.

Let's put it back to this. So that was it. That was the no script show. and that. Is Joe Dawson. Joe, where can we find you online?

[00:58:22] Joe Dolson: you can find me at my website, joe dawson.com. You can find me on, blue Sky or on Mastodon. I always go by Joe Dawson. So pretty much that's what you can search for

[00:58:34] Nathan Wrigley: anywhere I am.

And I know it's a bit of an aside, but why not the, the recent acquisition, not acqui Yeah. Acquisition, or I dunno what the right word is of Able Player. Oh yeah. How's that going? Yeah.

[00:58:46] Joe Dolson: Oh, it's going well. I did my first release just, in May, late May. I think I was a few weeks behind schedule, but that's not a big deal.

and it's been fine. I did introduce a bug, which is yay for me. Oh, yeah. but I will get that fixed. I'm on this kind of a aggressive schedule. what I feel has been one of the biggest problems with Able Player is that it's been existing on this release schedule of. We need to get something big done to release.

And so oh, okay. Prior to this release, the last release had been years ago, the last major release. Anyway, there'd been a security release, but those are just necessary. and I want to get on a routine. So my goal is basically to do a release every three months and it'll, it's gonna be a completely different strategy.

It's like we are going to get some fixes in and then we're going to ship those fixes.

[00:59:50] Nathan Wrigley: So ship them on a calendar basis more as opposed to a, okay, we've reached a milestone basis because this is

[00:59:57] Joe Dolson: very much kind of what WordPress has historically done is just set a schedule and you release on that schedule.

And it's, the important thing is that changes shouldn't just sit forever with nobody having access to them. which is, and that's been one of the big frustrations this year in the WordPress community, is this kind of constant juggling of what is the release schedule. as, a core committer to WordPress, we have, not been very happy about that.

[01:00:28] Nathan Wrigley: can I, ask again, apropos of nothing apart from a able player, has it introduced you to a different subset of the internet, a different community or maybe you were a big user and a adopter of that community anyway? I don't know.

[01:00:42] Joe Dolson: I would not say it's introduced me to a new subset.

It's a slightly different subset. I was already, excuse me, pretty embedded in the, accessibility community in general. But in this particular case, it's, it is getting me more embedded into people who are specifically producing accessible video and audio content, or are concerned about that.

which is a, very specific subset. And yeah, it's been, great. It's been fun. Oh, and it's, it feels very satisfying to work on. I know there's a lot of work to do. the code is, old. I have a lot of changes I wanna make, but it's been valuable and I've learned a lot.

[01:01:33] Nathan Wrigley: able player.com, I think that you're right there. No, it is,

[01:01:37] Joe Dolson: there is no actual dedicated website for it. Oh. the docs site is on github.io, so it's able player. github.io/able Player.

[01:01:48] Nathan Wrigley: Okay.

[01:01:48] Joe Dolson: That's the documentation site. Or you can just find it on GitHub, github.com/able player. and there's stuff about it on my website.

[01:01:57] Nathan Wrigley: Okay. In which case I will link to those things when, that probably a good idea. Yeah, that'd be nice. Nice and easy to find. Okay, so that was it then. No script show. Website will be back with another episode at some point in the future, episode eight. But, it only remains for me to say firstly, thank you for watching or listening or whatever you did.

And secondly, thank you. Massive thank you to Joe for putting in the time and, exploring those issues with us. Appreciate it. Yeah, so glad to be here. It was fun. Thank you. Thank you.