The Accessibility Show #8 – How well do top ‘Showcase’ sites handle keyboard navigation?

[00:00:06] Nathan Wrigley: Hello there. Welcome to this episode eight of The Accessibility Show. I'm joined as I always am, by Joe Dolson. Hello Joe.

[00:00:14] Joe Dolson: Hello Nathan.

[00:00:16] Nathan Wrigley: Nice to have you with us. If you want to check out the previous episodes, probably the best thing to do is to go to wpbuilds.com and search for Joe Dolson, which is J-O-E-D-O-L-S-O-N, and that's probably going to be the quickest way. There is a navigation menu as well, if you go to the archives, and then you'll be able to find the Accessibility Show in there. All of the episodes are listed in their own archive. You can check those out as well.

Just before we kick off, Joe, just let's establish your credentials. I've got a couple of URLs that we can check out to find out more about you. Here's the first one, joedolson.com. Is that where you park your, kind of your business things, the stuff that you do out in the wider world?

[00:00:56] Joe Dolson: That's, pretty much where I've been parked for a very long time now. Okay. Yeah. I acquired that domain in I think 2003, something like that. Yeah. So it's been a while, but yeah, that's my business. It's it's pretty much. It's, I just am an independent accessibility consultant. But mostly anymore I do assessments for nonprofit organizations who are focused in the accessibility space. They do services for people with disabilities, and I do custom development for them, so.

[00:01:28] Nathan Wrigley: This is going to sound like a really curious question and maybe somewhat misguided. All those years ago when you began, 2003 or whatever it was, was accessibility a thing for you back then, or did it build up over time to become what you now focus on?

[00:01:44] Joe Dolson: So it was actually my focus from the beginning. It was actually, my intention in setting up my business was basically, I'm going to focus on accessibility and web design. And that had a lot to do with the fact that at the time I started up my business, I didn't have a sophisticated knowledge of design. I still don't, I'm not a designer. I didn't have a particularly sophisticated knowledge of development, but what I did know is I knew some things about people with disabilities and what their needs were.

And so I just from the beginning said, I'm going to set out, I'm going to learn everything I can about accessibility on the web, and that's what I'm going to be an expert in. And, now 22 years later, I feel like I'm doing okay on that.

[00:02:36] Nathan Wrigley: Oh gosh, where does that leave the rest of us? Oh, that's amazing. joedolson.com is the place where you can find that, Joe and his work. And obviously Joe, I suspect is open to fresh new work if you are in the accessibility space, or you wish to have your site, I don't know, looked at by somebody who really knows their stuff, go and check it out, joedolson.com.

However, very recently, I'm going to say eight months, but it could be more or less than that. I'm not entirely sure. Joe took custody of an open source project, which had been going on for a little while and it's called Able Player. And I think it's quite nice to mention this during these episodes, there's the URL for it. It's over on GitHub ableplayer.github.io/ableplayer. What's that?

[00:03:28] Joe Dolson: So Able Player is a media player, written in JavaScript that really emphasizes accessibility as one of its key features. It makes sure, obviously all of the controls are accessible, but it also offers a lot of great features like interactive transcripts, synchronized sign language interpretation.

[00:03:49] Nathan Wrigley: Wow.

[00:03:50] Joe Dolson: So that you can have two videos playing simultaneously. One which is the sign language and one which is the original video. It has the ability to render automatic audio description, so you can provide it with a text file in a .vtt format. And we'll take those cues, which is, it's the same format as you do captions in, but it'll take those cues and instead speak them as audio descriptions, and it'll pause the video to make space for that.

[00:04:20] Nathan Wrigley: Wow.

[00:04:21] Joe Dolson: That's an amazing tool.

[00:04:22] Nathan Wrigley: Yeah, that is amazing. So I'm used to seeing those on the screen and they're timestamped, aren't they, inside the .vtt file. But it will say them out loud?

[00:04:31] Joe Dolson: So you can, yeah, usually you do it with a separate file. Because what you're trying to do, an audio description is describe the non audio events that are happening in a video so that people who can't see it know that context.

And usually in order to do that, what you actually have to do is produce two separate copies of the video, one with the audio description as an audio track, and one without it. So being able to just write that in text can save a lot of cost, a lot of time. It's particularly great if ultimately you only have three or four lines of text that need to be described. Producing a whole second video to do that is a lot of work.

So yeah, I think it's in a really great tool, and I just took it over five months ago and, right now, 4.7 beta one is out for testing. It's, the main feature change I've made in that is that it now supports synchronized sign language with the sign language file coming from YouTube. Previously, the sign language file had to be locally stored.

[00:05:42] Nathan Wrigley: Right.

[00:05:43] Joe Dolson: But now it can be, you can have both videos from YouTube. You can have one local, one YouTube, or you can have both YouTube, which is going to make that a lot easier. This is a problem we've had with WordPress Accessibility Day, where our sign language videos had to be local and, first of all, it's just, it starts to be a lot of storage. We have 24 hour long sessions every year, that's a lot of material.

And second, it actually makes the synchronization a lot harder. When you're talking about like short videos, that synchronicity between YouTube and the local video isn't that bad because there's not a lot of lag and loading. But when you've got these really huge videos, that lag can start to be noticeable and, when you try and synchronize them, one of them will just takes a little bit longer to start playing and so it's always just a little bit more behind and getting rid of that problem will be really nice.

[00:06:43] Nathan Wrigley: Yeah. And I guess it's infuriating if things are not in sync because all of a sudden.

[00:06:48] Joe Dolson: Oh, there's an element where sign language is never exactly perfectly in sync with the audio because the interpretation is.

[00:06:55] Nathan Wrigley: Has to weight.

[00:06:56] Joe Dolson: Has to react. And those two things aren't simultaneous anyway. But, the more it gets behind, the worse it gets. Yeah. And that's where it start really be a problem.

[00:07:11] Nathan Wrigley: If it was, I don't know, a TV drama or something that maybe it would work depending on the sort of the speed of changing scenes. But if, for example, you're doing, I don't know, a screen share or something and the person is saying, okay, now I'm going to click in this box, but that happened 12 seconds ago, all of a sudden, that can be really weird. Yeah, yeah.

[00:07:30] Joe Dolson: So better to have better in synchronization. I don't think interest would argue with that.

[00:07:35] Nathan Wrigley: Yeah. So that's Able Player. Are you still on the lookout for assistance with that? Or are you taking it all on?

[00:07:41] Joe Dolson: Always wanting assistance. Yeah. Okay. There's reality, it's an open source project. Anybody can contribute. It's incredibly valuable to have people coming in, contributing code, doing testing, whatever, anything, whatever people need with any open source project.

Because doing it all by yourself is, it's hard work. And it's also, it's where risk takes place. The real benefit in any open source software project is, when you push out a beta, you need people to test it, because that is how you find the problems that you didn't think of. And I always say one of the reasons you have to push out a beta is so that when people tell you about problems after the release, you can say to yourself, yeah, you could have checked that a month ago.

[00:08:34] Nathan Wrigley: You got that satisfaction. Yeah.

[00:08:38] Joe Dolson: It allows me to feel a little less urgency about their problem. Yeah. Yeah. I'm like, I gave you lots of opportunity. It's not my fault you didn't take it.

[00:08:46] Nathan Wrigley: So joedolson.com, plus the URL you can see on the screen, but I'll read it into the record once more. ableplayer.github.io/ableplayer. You can go and check out all the bits and pieces going on over there.

The intention of this show is to put things on the screen, and for Joe to inspect them from an accessibility point of view. We've done all sorts of different videos, we've looked at all sorts of different things, and today we're back at the WordPress Showcase, which we've done, I think maybe on episode two or three or something like that. We looked at a bunch of different sites over there.

However, maybe it's going to be quicker if I just hand it over to you and you can explain the intention of today's four websites, what you're going to do, and what you're going to try and achieve.

[00:09:32] Joe Dolson: So today I just decided I wanted to look at keyboard accessibility. Just a general look at the interactions of using a keyboard with a website. And one of the reasons I wanted to look at this is, it's one of the things we talk about a lot in website accessibility. About making sure everything can be focused. That you can always see what's focused. That anything that receives focus is visible at the time you see it. But we don't talk a lot about just exactly how common these problems are, how ubiquitous we're talking about.

So what I chose to do is, in this case, I am literally just taking the first five sites listed on the WordPress Showcase, and I'm going to look at those,

[00:10:19] Nathan Wrigley: Okay?

[00:10:20] Joe Dolson: And this is really about saying, okay, in a random selection of five sites that are, have been selected for quality. These are created by professionals. So these are not just some amateur who's just desperately trying to figure out how this plugin works. These are, these should be really well constructed and knowledgeably constructed. So I should have high expectations.

And what we're going to see is what kinds of problems are we encountering in just a random selection of sites without knowing in advance what they are.

Now I did look at these in advance, but I still, it's the selection of just the first five. And if we time, I'm happy to get to a sixth, and just explore and learn something more after that.

[00:11:07] Nathan Wrigley: So you are just faithfully reproducing what you discovered as you went through it, right? Yeah. In order that, you could, yeah. Okay, that's great.

What I'll do is I'll share our screen, and I believe that the first one is, maybe I've missed the first one or deleted the first one. Yeah, I appear to have lost the URL for that, but I'll say it out loud. It's Brodo, I presume, is how you pronounce that. It's brodo.com. And, yeah, there we go. I found it now, brodo.com. And, over to you. I'll interject when I have some question or other.

[00:11:42] Joe Dolson: So now one of the key things about doing keyboard accessibility, which can make things difficult when you're trying to do a demo on video, is that one of the biggest problems is keyboard accessibility not being visible.

So one of the things I'm going to be doing is I'll be turning on something that does some tracking of the keys that I'm pressing, so that something is changing on the screen when you can't see what's going on.

[00:12:09] Nathan Wrigley: Okay.

[00:12:10] Joe Dolson: The first thing I'm going to do is I'm actually going to reload the page. And that's actually just to set the location of initial focus. So Pressed Keys is on, that'll give us some cues. So we've got to skip to content link. It's visible. Yay, that's great. I can see this focus here.

Now I get to the main logo and I'm feeling like this incredibly fine dotted outline is just insufficient. I would like to see that better.

[00:12:46] Nathan Wrigley: I can barely see it.

[00:12:47] Joe Dolson: And then I hit tab again, and now, I can't see this at all. I don't know where I am.

[00:12:54] Nathan Wrigley: I'm looking and I can't see anything on that.

[00:12:56] Joe Dolson: That's because what I'm actually focused on right now is an invisible item in between the logo and the first menu item. In the inspector what this is, is there's a, an H1, first level heading with a link inside it, but the H1 is hidden using the screen reader text class. So it's visibly hidden, but still available to screen readers, and it has a focusable item inside it. That's going to create problems for anybody's sighted who's trying to navigate through this, because they're going to potentially hit this point and be like, I don't know, I don't understand what's going on. So that can be confusing and annoying.

But I'll go past that. Now I'm into the main navigation. This is visible. You can, the menu's open and you can see that. I can tell that there's really been no testing of this to speak of, because you look at this focus outline that's just, the tiny little box above the actual item. And what that tells me is nobody checked the display value for this, and they didn't verify that this actually looked good. So it's just a mess.

I also find it annoying that you have to tab through every single item here. That's a lot. But, it's, there are worse things than that. And now I just go on through and that worked, okay.

So I'm now on this shop all broths thing. I still am going to be like this is really insufficient focus. One of the things about focus movement is that it is what I call undirected. If you're using a mouse, you know you're pointing, you have a visible pointer, you're tracking it with your eyes, you move it to a location and there it is. You know what you're pointing at.

[00:14:49] Nathan Wrigley: Right.

[00:14:50] Joe Dolson: When you're just hitting the tab key. What you don't know is where that next point of focus is going to be in advance. You have to hunt for it when it receives focus. And that's why having that give, get a strong change is really important. These really subtle changes are just extremely hard to locate, because you didn't know in advance where it was going to be.

[00:15:12] Nathan Wrigley: So just querying that a little bit. So obviously subtle is not ideal. Is there any sort of guidance that you can offer in, I don't know, under 30 seconds for what the opposite of subtle is in that case?

[00:15:25] Joe Dolson: There are actually specific guidelines surrounding what things should look like and what's going to make things fairly more visible.

The general rule of thumb is it should be, like a two pixel outline. Actually the area equivalent of a two pixel outline surrounding the entire item, which is in a contrasting color to either the item or the background. It's not that difficult to create a strong look. Yeah, most browsers are going to do it by default. So the very fact that these don't have, it just means somebody has unset the default.

[00:16:02] Nathan Wrigley: Okay.

[00:16:02] Joe Dolson: Which is always, yeah, that's one option.

So now I'm waiting on this one because the next focus is going to be one that's interesting. So I'm going to tab, and now tell me where I am.

[00:16:18] Nathan Wrigley: I'm imagining that you are approaching the footer of that page, but I couldn't be sure. Because all I know is that you're not near the top, and you're not at the bottom.

[00:16:30] Joe Dolson: So apparently the focus is on the text brodo starter box. Ah, now because of that brown gradient. So it's right below the green.

[00:16:40] Nathan Wrigley: Oh, yeah, I see.

[00:16:41] Joe Dolson: The thing, get started with our most popular 24 pack box. Which I presume is their brodo starter box. But that is like almost impossible to see. And because it's after a jump in location, like mentally, the ability to actually locate what you're on is extremely low.

And then all of these things are linked. All of the broth things. And you're going to note in addition, these are partially concealed by this review thing that's in the lower left corner, which is quite irritating.

So hiding your focus is another thing that's an accessibility problem. So I'm just going to keep going through here.

[00:17:23] Nathan Wrigley: Can I just pause you there for a minute? Because I guess you are in the weeds of this all the time and so it's self-evident that that's a problem. But just from a somebody who browses the web with mouse, finger on mobile, and I'm fully sighted, I can hear okay. Basically I can use the internet no matter what state it's served up to me essentially.

But that was a bit, even I could see that was janky, because you literally ended up. If you were just using sight as the mechanism through which you were seeing where you would end up, there was literally nothing. Yeah, so it was an invisible movement. You ended up.

[00:18:07] Joe Dolson: It's essentially the same as that H1 at the top of the page. That is actually hidden from visibility intentionally. But there's no difference between that and landing on a link that's behind something else and doesn't become visible.

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

[00:18:20] Joe Dolson: So that's, it's going to be very frustrating. And it's an interesting thing about keyboard accessibility. There's always a big thing saying that the, there's no such thing as a keyboard only user. And that is actually potentially true. I think it's a simplification. There probably is somebody out there who only uses the keyboard.

But the point isn't really about saying, you must be able to use the whole site with only the keyboard. It's that at any given point in time, if you are currently using the keyboard, you should be able to continue using the keyboard.

[00:18:58] Nathan Wrigley: Got it. Yeah. Yeah.

[00:19:01] Joe Dolson: Even very limited mobility, users who are say maybe using a sip and puff system to control their input. They have keyboard emulators and they also have mouse emulators.

The problem is that the labor to switch between those two models might be pretty significant.

[00:19:20] Nathan Wrigley: Okay. Gosh. Yeah.

[00:19:21] Joe Dolson: So not having to switch modality is incredibly valuable. So it's really all about saying if you are using this right now, you should be able to continue to use it. You shouldn't have to switch because something doesn't work.

[00:19:37] Nathan Wrigley: Okay. Thank you for sharing.

[00:19:38] Joe Dolson: So I'm going to go ahead and continue.

[00:19:39] Nathan Wrigley: Yeah, please do.

[00:19:39] Joe Dolson: Right now I'm on the ordering thing, which is, it's reasonably, it's got decent focus. It's a little confusing because I think those are so different that it's not immediately obviously that it's not just a design choice, but it's fine. It does meet those rules.

Now after that, every four weeks, now I really don't know where I am. I can't see anything. And that's because there's actually another button here that's completely hidden.

[00:20:14] Nathan Wrigley: Oh, yeah.

[00:20:16] Joe Dolson: That's quantity. So that's going to be three tab stops before you actually get to something that's visible again, just the add to cart button.

[00:20:23] Nathan Wrigley: Add to cart the sort of partial hidden button.

[00:20:25] Joe Dolson: That's just this particular viewport. But this is a relatively common viewport. So what I'm really thinking at this stage is I'm pretty annoyed by this review box. And I would like to close that.

[00:20:38] Nathan Wrigley: Yes.

[00:20:39] Joe Dolson: But why don't I see if I can just get myself to it. First, I have to get through this video and now I'm somewhere, I don't know. Now I've got a big slider. I'm still just tabbing forward. I'm tabbing faster now because, wow, this is a lot of stuff. One of the things about keyboard navigation, screen reader users have lots of tools to get around the page. If you're not using a screen reader, your options are considerably more limited. So this is potentially what you're doing. And I still haven't gotten there because I'm going to give it away. It's at the very bottom of the page.

[00:21:18] Nathan Wrigley: So I reckon you are probably into the 40 or 50 tabs at this point, maybe more.

[00:21:23] Joe Dolson: Oh, I'm sure. Probably more than that.

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

[00:21:25] Joe Dolson: But we'll see where we are.

[00:21:28] Nathan Wrigley: Oh, there you go.

[00:21:29] Joe Dolson: There, I'm focused on it, great. Oh, wait. Oh no. Where is that close button? So here's the secret. This is not a close button. That is not a button at all. And you cannot focus it. So I actually, in my pretest, I was unable to find a way to close this from the keyboard. If you're irritated by it and it's blocking your view, I guess too damn bad.

[00:22:01] Nathan Wrigley: Yeah. Goodbye.

[00:22:03] Joe Dolson: Anyway, so that's, number one. On the whole, what I'm going to say is, okay, it has a focus state. It is woefully insufficient, but it has it. The menus are accessible using the keyboard.

It is not the worst thing in the world, but it still has some problems. And one of the biggest problems is the fact that it's got these barriers that are floating in front of the content that you can't get rid of. And that to me is pretty significant. It can make everything a lot harder to use.

[00:22:38] Nathan Wrigley: There we go. brodo.com, or however that is pronounced.

[00:22:42] Joe Dolson: So we will move on to Print Magazine.

[00:22:45] Nathan Wrigley: Okay, this can be found at printmag.com.

[00:22:52] Joe Dolson: Alright, back to our Pressed Keys. Oops, I didn't refresh the page. Alright. Again, skip to content. That's great. I'm not testing whether it works.

We've got this menu button here. It's a little funky because we've got this menu button is the very first thing to get to, and then there's also a menu, and they have different things in them.

So, that's interesting. I'll have more to say about that later. But first thing, first. Can you tell where I am?

[00:23:30] Nathan Wrigley: No, I'm really looking hard and I can't, no.

[00:23:33] Joe Dolson: Where I am is actually inside this menu.

[00:23:37] Nathan Wrigley: Oh, you're trapped in there. Even though it's collapsed.

[00:23:40] Joe Dolson: I closed it using the escape key, but it's still there. Now, that is not true if you just tab through. So if I'm just tabbing, and I go right on. This is again that really faint focus visibility thing, but I'm not going to talk about the same thing over and over again.

[00:23:58] Nathan Wrigley: Okay.

[00:23:59] Joe Dolson: So that is a really interesting thing because it went, this menu was still there when I hit the escape key. Now, if I use it during the mouse, so I can switch between these. So this, I've never seen this before. They did set up a trigger that closes using the escape key, but it doesn't do the entire close event. It's only doing the visibly hiding and not the actually hiding part.

[00:24:33] Nathan Wrigley: So let me just make sure I understood this. So you refreshed the page, you tabbed, you found the hamburger menu, let's call it that. Yep. You invoke that, press return. In you went. Yep. And then at this point, you can navigate through those menu items, but if you decide you won't, don't want to be there anymore and hit escape, it visibly goes. But it's, you are, you're trapped inside of it.

[00:24:57] Joe Dolson: It's still, yeah, it's still actually there on the page.

[00:25:00] Nathan Wrigley: Oh gosh.

[00:25:01] Joe Dolson: And what I'll, but that doesn't happen if you do it with the mouse. So there's a clear bug there, but it's going to disproportionately impact people who are you trying to use a keyboard. Like, this is a pretty big problem for keyboard users. That is mostly unnoticeable for a mouse user.

I say mostly because it's not actually completely unnoticeable. So here I'm going to, I'm just going to close this with the escape key again, I'm just going to scroll down and say, oh, I want to learn about this design topic, or maybe about this, what makes a good logo, that sounds interesting. Here I go. Why am I on the partner's page?

[00:25:40] Nathan Wrigley: What?

[00:25:43] Joe Dolson: The reason is because.

[00:25:45] Nathan Wrigley: Oh, you're still in the menu.

[00:25:46] Joe Dolson: That's the location of the partners link, which is actually, it's at the front of the stack. So you're actually clicking on these items even though it's hidden.

[00:25:57] Nathan Wrigley: Wow.

[00:25:58] Joe Dolson: Is not hiding it, it's just making it invisible. But that's not true. If you close it with the mouse. With the mouse, you actually get to click on this link.

[00:26:10] Nathan Wrigley: Okay. I have no words. That is on a level I've not yet experienced.

[00:26:15] Joe Dolson: That's, it's actually, when you think about it from a programming standpoint, it's pretty straightforward. It means that they have an event that fires when you click on this. But it's probably doing two separate things. One of them is hiding things visually. The other thing is hiding things actually. And when they tied the keyboard event to that, they only did half of it. It's interesting. It's an odd way of having built things at all.

But that's the thing that stood out to me in this particular site. It's curious.

[00:26:50] Nathan Wrigley: That is curious.

[00:26:50] Joe Dolson: But I'm going to just continue going through. Some additional things. Just navigating through the menu. Not great visibility, but it's there. Yeah. Ooh, I just tabbed past browse and now, lost again. Now I have lost where I am. There's that search, but there's something there that doesn't work. And what is it? I'm just going to randomly try opening it, because as a keyboard user, you don't know what this is. That's weird.

[00:27:16] Nathan Wrigley: Back to the menu again.

[00:27:18] Joe Dolson: Why is it that? But I'm not, and I'm in it. I'm in the same place I was before. It just feels extremely random. That is a strange thing. I don't know why that menu is in both locations and not visible in one, but there we are.

Now search, that could be a link. That could be a button. As a keyboard user, I don't know. As a screen reader user that would be in, I would be informed whether that was a button or not. But I don't have that information. As it happens, it is a link, because I just tried to operate it with the space bar and it didn't work. But yeah, so this pops open. Search, it's navigable. That's okay.

[00:28:06] Nathan Wrigley: This is Jetpack, isn't it? That search?

[00:28:08] Joe Dolson: Yes. It's Jetpack. Yeah. So then I can navigate through things and, oh, that's a little weird. So here you can see I'm focused on what makes a good loco. I hit tab, which should move me forward, and I go backwards to design topics. I hit tab again, which should move me forward, and now I have something that's invisible.

Now I can tell you that I am focused on the featured image, which is not something that I think should be focusable here at all. And if I inspect this, I learn that it is in fact, it has aria hidden on it. And a tab index of negative one. So the fact that I can focus it is actually not the intention, but it is clearly what is actually happening. So that's a lack of testing, that's just making an assumption that this is going to work the way they expect it to. And it didn't actually happen. This could be a browser thing, but the point is that this particular mechanism is not working.

For a screen reader user, the fact that it says aria hidden true is going to be really annoying because it's not going to really report very well what's going on. I think most recently, most recent browsers and AT combinations will actually now give you some information about it, but historically it would've just said blank. Actually it would've said nothing. You would've just had a focus point that didn't do anything because it hit. So that's what the tab index negative one is supposed to counter. It's supposed to make that not focusable, but it did receive focus. So something's going on there. I'm not going to inspect it too hard because we need to get through stuff.

Now this pattern just goes on and on. This is, all of these are going to be focus on this, and then this.

[00:30:08] Nathan Wrigley: It feels like a loop that's been set up and so whatever.

[00:30:10] Joe Dolson: And so it's another thing that, like this incredibly long homepage, it's going to take forever to navigate through and eh, we don't need to do that.

It's just, I think this page to me is one where if I was navigating by keyboard, I would just be lost constantly, because of that combination of going out of order. These things, and they're not even consistent here the category is under the title, and here it's above. I don't know why that choice was made but, it's inconsistent.

But the very fact that it's in these two columns that are not consistently modeled, sometimes it's a wide on the left, sometimes it's wide on the right. The order is going to be 1, 2, 3, 4, 5, 6, and then you're going to jump down to this way, way down here. Maybe here. I don't know where you'll end up. It's unpredictable, and because these pages are so long, if you're trying to get down to the bottom of the page, it's just going to be tedious.

So to me, that's a frustrating experience. And I wouldn't want to do that. I'll be honest. I am not a fan of these homepages that just go on and on forever. I look at something like this job board that's 150 tabs down the page, and I'm like, is anybody going to look at that? Then we going to know what's there.

[00:31:38] Nathan Wrigley: You're only about three quarters of the way down as well.

[00:31:41] Joe Dolson: No, they're not going to find the stuff on the homepage because it's ridiculous. But that's a design criticism. That's not really a keyboard accessibility thing. But you can see this page just goes on and on. I presume it ends at some point. but for now, I think let's just move on to the next site. Okay. I don't have the patience to get to the end of this page.

[00:32:01] Nathan Wrigley: Okay. So we'll say goodbye to Print Mag. That was very interesting. Next stop if I'm right is, yeah, here we go.

[00:32:08] Joe Dolson: The Harvard Gazette.

[00:32:09] Nathan Wrigley: This can be found at news.harvard.edu/gazette.

[00:32:15] Joe Dolson: So let's see where we are here. I need to refresh. Press Keys. Skip to content content link. So far they've all had skip to content link. So I haven't tested whether they actually work, but they do have them. Now this is a, what I would call a really nice, clear focus state.

[00:32:34] Nathan Wrigley: Okay. That's your sort of two plus pixels.

[00:32:36] Joe Dolson: This is extremely visible. It's a couple of pixels. It looks like it's got a little bit of an offset, just out a couple pixels from the actual boundaries of the item. Looks nice. Easy to see. I love it. That's good.

The focus stays on the menu open and close buttons so you can just open it and explore easily not having to actually go through anything. This focus continues to be good. Let me just see if everything is restrained. It's nice you didn't have to click through this as two separate links. They're just, it's because this is actually all a link, but you didn't have to do both things.

[00:33:20] Nathan Wrigley: Okay, twice. Yeah.

[00:33:21] Joe Dolson: They've made sure that you don't have all those extra clicks. And then it does circle, it goes out of the menu, which that I might say is maybe not ideal. I would maybe prefer it if this was a modal, but it's not required. It's not necessary, because you can get to it, and close it. It, the important thing is it didn't take you to content that's hidden. Everything, it's that you're being able to tab to is stuff that is actually visible and that's what's really important. So I'll close this menu. Keep going.

Let's look at that search. That's pretty straightforward. Same deal. The focus is constrained as it should be. Great. Love it. So what I'm finding here is this site has really done some good work. This is logical. Everything is in the order that it looks like it is. it makes sense to me. This is good.

[00:34:24] Nathan Wrigley: Nice.

[00:34:24] Joe Dolson: Now there is, I did note one issue that's potential. It's not like the worst thing in the world, but let's just go here. So now you can't see focus anymore?

[00:34:43] Nathan Wrigley: No, where have you gone?

[00:34:44] Joe Dolson: I've gone to this health heading.

[00:34:47] Nathan Wrigley: Oh, okay.

[00:34:47] Joe Dolson: And that's just, it's basically, it's because of their floating menu. That's a common problem that they haven't implemented something that adjusts the scroll position to make sure that your focus is actually in view, and it's being covered by something else that's in view. A lot of the times the browser will handle that. If you focus on something that's outside of the view browser viewport, it'll focus it.

But that's one of those things about fixed headers is because they're floating. You are in the viewport, you're just not visible. And so that's a thing that can be adjusted with scroll position. But that's the only thing I found on this site that was actually a problem.

[00:35:26] Nathan Wrigley: But you're happy with where it went. So going from that list underneath campus and community to the top of health and then through again.

[00:35:33] Joe Dolson: Yeah, that's, that is the reasonable order because this is a pretty clear block of content, which is a heading and a series of links. A heading and a series of links. It makes sense. So I think this was pretty clear. Nice. good job Harvard Gazette and whoever built it.

[00:35:50] Nathan Wrigley: Good job.

[00:35:51] Joe Dolson: And I didn't look to see who that was because, I'm not attempting to call people out, and that means I don't want to call people out for either good things or bad things.

[00:36:00] Nathan Wrigley: Yeah, that's a good idea. Anyway, there we go. That's probably the most remarkably, so far. Yeah.

[00:36:06] Joe Dolson: One out of three, really excellent. The other two a bit iffy.

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

[00:36:11] Joe Dolson: Next we're on Yumi.

[00:36:14] Nathan Wrigley: Okay, you can find this at Hello Yumi. H-E-L-L-O-Y-U-M-I.com.

[00:36:22] Joe Dolson: So let's just do the same thing here.

[00:36:27] Nathan Wrigley: Just so that that logo looks wrong. I don't know why it looks like it's been cut off.

[00:36:33] Joe Dolson: Yeah. I mean it's clearly an intentional design on the packaging. I think actually it only looks weird in the header. Like it actually looks fine on the packaging, but in the header it just, it looks like there should be more to it.

[00:36:47] Nathan Wrigley: Yeah. Looks like it's been cut off.

[00:36:49] Joe Dolson: Let's go ahead and start walking through.

Alright, so I went straight from the skip to content to the link. I can't tell whether this should be, no, nothing there is clickable, so that's fine. Alright, so here we go. Oh, we've got a dropdown with a separate trigger that is tiny. It's not meeting the size of a focusable item rules, but that's mostly a thing about touch. That's not really about keyboard. But it does work. It opens it, you go into it. What happens next? Okay, it closes. That's pretty, pretty reasonable.

Got another one. Okay. Oh, wait, where am I? Oh, I can see in the browser queue in the lower left corner, that I'm on a page called Six Months. Now, I did note that's what this is.

[00:37:43] Nathan Wrigley: Oh, yeah. Ended up there.

[00:37:45] Joe Dolson: That means that this dropdown is hidden, but this one isn't. Now you can look at these and you can like, okay, the content inside these is quite different, and so they missed something when they created this menu. And so it's not hidden, which means all of those links inside the menu are actually in the normal tab order as you just walk through the menu.

Unfortunately, that's a lot of links. This is a pretty extensive site. So that's unfortunate, that's a lot to go through every single time. And now fortunately, they do have a skip link. So on your second time through this, you can just skip it. But I'm going to have to tab through the whole thing.

[00:38:38] Nathan Wrigley: Yeah, that's a lot of links. That's probably a lot there.

[00:38:41] Joe Dolson: Now I made it to the store locator. So that, again, it's obviously a bug. It's, I don't think that's what they intended because the other one was right. But it's still a problem.

Continuing on, this is another focus state that's not great. The contrast is a little better with the background than on some of the other ones. Like that light orange that we had earlier was pretty bad. At least this is a dark green. but as you'll see that this doesn't improve. Now here, like that outline.

[00:39:16] Nathan Wrigley: Oh, you can only tell because of the corners being rounded, can't you?

[00:39:19] Joe Dolson: Yeah, pretty much. Yeah, if it weren't for the rounded corners, you wouldn't see that at all. And that's because the border on the image is dark green, so that dark green dash, dotted border is really subtle. Yeah, and that's not great. That's why these things need to be context sensitive. That's also one of the reasons why having that outline offset and putting it a couple pixels outside your actual focus point, it makes things a little easier. Because now the background is your gap instead of the outline on the image.

But we keep going and we're just jumping a long ways down the page here. But it's, reasonable.

This is a slider. You're I can't really tell what's focused here.

[00:40:07] Nathan Wrigley: I have no idea. Maybe it's the left button. I don't know.

[00:40:12] Joe Dolson: It's the right.

[00:40:14] Nathan Wrigley: Oh, okay. I got the exact wrong one. Okay.

[00:40:17] Joe Dolson: But it's I can't really clearly tell what's going on. Like that focus state is definitely, it's so subtle. You can, if you really look closely here, I'm switching between having the right button focused and not focused. Not focused, not, is really subtle. It's just a little bit of a shade difference in green. And it's a tiny button. This is insufficient. That's just, you're not going to be able to spot that. Because it took us a while to figure out which item we were actually focused on.

And part of that is actually the inconsistency in the focus state. So in this site, all of the buttons are focused just using this change in color. So they're reversing. But if you notice like I go to this next one, it's focused. If it wasn't for that animation that I caught, I wouldn't know that this was different from its normal view, because there's no, there aren't screens where you've got two buttons at once.

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

[00:41:18] Joe Dolson: So you can't really, you don't know that it's changed. So that's the, a consistency thing.

One of the nice things about having the same focus state as much as possible throughout the site is that you always know this means this is focused. As opposed to, it changed its appearance, but since I don't know what it looked like before I reached it, I can't tell whether that means it's focused. Which can be a confusing thing.

[00:41:43] Nathan Wrigley: There's another one.

[00:41:44] Joe Dolson: Yep, another slider. More learn more. A click here link. Yeah, we've gone over that before. Yeah, again, this is pretty hard to see. It's a tiny little link. Clearly they don't actually want people learning too much about their heavy metals. It's fine, whatever.

See in here, suddenly you get to the input field, and that's actually a pretty standard focus outline that's different from everything we've seen anywhere else. To me that's just a, that's a design consistency thing that really could be better. So you can see both of these have that just blue outline.

Once again, you can almost see the results of their heavy metal testing. And then we get into the footer, and so down at the bottom here, we've got this coupon thing. Which opens a modal, which gives us focus and it's good, at least from a keyboard perspective.

[00:42:44] Nathan Wrigley: Okay.

[00:42:45] Joe Dolson: And then we've got this chat thing, which you can't see because of my pressed keys.

[00:42:50] Nathan Wrigley: Oh, I can just about see it. Yeah.

[00:42:52] Joe Dolson: Struggling to figure out how to get to it. Oh, there it is.

[00:42:54] Nathan Wrigley: Oh, there you go.

[00:42:55] Joe Dolson: Now the weird thing is I didn't see that I got focused to it when going the other direction, but it's there now. And I observed that when I was pretesting this as well. I think all it is there's actually a delay in making that focusable, but it was weird, and I don't really understand it.

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

[00:43:15] Joe Dolson: Now this one, I'm trying to do the same thing I did with the last one. I'm pressing the space bar on it and it doesn't do anything. I have to do that one with the enter key, and I'm not really sure, it seems to me like these should both be buttons and should both operate, but they're not.

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

[00:43:36] Joe Dolson: That's an inconsistency. So this is another one. It's actually very similar in many ways to the first one we looked at, in that it's got poor focus state and something weird in the menus. Interesting, or the second one, similar to Print Mag.

[00:43:53] Nathan Wrigley: Yeah, there you go. Yeah.

[00:43:54] Joe Dolson: It's like almost right, but not quite. And it's just an inconsistency that to me, a lot of what that actually tells me is insufficient testing. You half tested it and you're like, okay, that worked, and then we move on. But it, doing a full fuller test, like actually going through it with the keyboard helps to really identify, oh, there's stuff that we need to fix.

[00:44:20] Nathan Wrigley: You've found them in a heartbeat, didn't you? That's requires that expertise.

[00:44:26] Joe Dolson: That's actually why I like demonstrating keyboard testing because, among ways of testing it is actually one of the easiest things you can do, and it can expose a lot of data really fast.

Alright, so now we're off to the next site. The Buckminster Fuller Institute.

[00:44:47] Nathan Wrigley: There you go. Oh, earlier when I said that I knew somebody here. That's not true. I thought it was the British Film Institute. They've probably got the .co uk, ah .org. Indeed. Yeah. Okay.  Buckminster Fuller Institute.

[00:45:03] Joe Dolson: All right, here we go. Skip to content again. Alright, so that is, I'm going to call that a sort of semi clear focused state. It is sort of strong. The problem it has is that contrast between yellow and white is really poor. So I can see it very clearly because I have good color perception. But it isn't a very far stretch away to find somebody who can't really see that.

[00:45:36] Nathan Wrigley: What are your intuitions around those bits? Like for example, when you've ended up at shop there, I now see that as a button.

[00:45:45] Joe Dolson: I can see that, yeah.

[00:45:46] Nathan Wrigley: Do you know what I mean? It looks like that's its default state. Like you would arrive at that page and the shop, yeah, whichever one you're on is the, is now a button essentially.

The Harvard one was really, thick, chunky, black. There's something different about that.

[00:46:05] Joe Dolson: I do think there, there's something about the proportions of that outline that maybe makes it look a little buttony. What really starts to look at like buttons to me is when we get to these next three things. Those all look like buttons to me.

[00:46:17] Nathan Wrigley: Yeah, they look like buttons. because they've gone for that gray background as well, haven't they?

[00:46:22] Joe Dolson: They actually, these annoy me, because these three things are. They look very similar, but every one of them is a different thing and it acts differently.

The first one, the search, that is a link that behaves like a button. Can't trigger it using the space bar, because it's not actually a button. So I have to trigger it using the enter key, and it opens the search.

This is the account page. This actually is just a normal link. Again, can't trigger it with the space bar because it's a link. When you hit enter, you actually go to the page.

And then the last one is the menu, which is a button, and is actually a button, and you can operate it using the space bar or using the enter key.

And to me, I just don't like the fact that what they've given us is three things that are, have identical design styles, but every one interacts differently.

[00:47:31] Nathan Wrigley: Yeah. That's on, that's interesting, isn't it? Yeah, I agree.

[00:47:33] Joe Dolson: I would want, for me, I would want ideally either all of these to be buttons, or all of them to be links. Because one of them is the menu, I think they have to be buttons. And I would possibly argue that the account should just be a text link, and not this ornamental image.

But to me it's just, it's an irritation about the fact that they do it that way. And this is common. I've seen this many, times. It's because of people are using things that are stock and those, the links are triggered and, anyway, drives me nuts.

But I am going to talk a little bit about this menu.

[00:48:16] Nathan Wrigley: It looks nice, but let's see.

[00:48:17] Joe Dolson: It does look nice. Yeah, and I'll note, it initially starts with focus on the slightly squashed looking close button.

[00:48:25] Nathan Wrigley: Okay, let me just move us out the way. Let's see.

[00:48:28] Joe Dolson: It is hard to see that focus because again, it's that yellow dashed, on a white background and then that.

[00:48:34] Nathan Wrigley: It's particularly pronounced there isn't it? Yeah.

[00:48:38] Joe Dolson: But then when you get into the black, that yellow is now nice and visible, really clear. You can open these. They're really, they work really nicely.

[00:48:47] Nathan Wrigley: It kinda makes you wonder if the black would've been the right color for the original background maybe.

[00:48:55] Joe Dolson: And then you hit escape to leave this menu, it takes you away, it sets you back where you were. Nice. It's nice.

Now one thing that is annoying here is this is not sending the page back up to the top when you focus in the menu. And I think it's because, so they do have something going on here with a, you can see it just barely when you scroll, this brief moment where this It's sticks. Yeah. I think they've got a sticky menu that's not visible and it's creating some messes with the ability of the browser to identify what's in the port and what's not. I think it maybe is still actually in the viewport.

[00:49:46] Nathan Wrigley: In there somewhere. Yeah.

[00:49:48] Joe Dolson: Because this is, it's unusual for. In this particular view, it is there, but it doesn't, it's not consistent.

[00:49:56] Nathan Wrigley: So does it come back the moment you scroll down, no matter where you are on the page, does it come back briefly if you, yeah, look, yeah.

[00:50:04] Joe Dolson: If you scroll up.

[00:50:06] Nathan Wrigley: It pushes it away.

[00:50:06] Joe Dolson: If you scroll up, then it reappears. So that's what I think is preventing the focus from moving back up here. Because I think there's something about it that's actually in the viewport, right? Even though it's not visible. So I would consider that a significant problem, because you can get to this entire navigation, which is a very important part of the page and you can't, but it doesn't move focus there. Move the viewport and shift it into positions.

So that's a lot of very important stuff that you now are navigating invisibly. Don't like that. Now I'll note. Oh, that looks alright. They've got a much better focus state when you're in the page. The red, this is much nicer. This is much better than what they had before, so that's good.

But here, that's this text link back to the yellow, and ooh, wow, ooh, yikes. This isn't about mouse, the cover state is not a thing to talk about. Yeah, but that's not good. Yeah, that yellow against white is just not a good color combination, and it should be avoided.

Overall this is pretty good. It's biggest problem is it's got these weird inconsistencies like, here now I'm on the Buckminster Fuller Challenge. This now doesn't have the thick outline, it's got the thin dotted outline, without the border radius. Why is this one suddenly different? And now this learn more, it has the red outline, which unfortunately against a black.

So and this one also doesn't have the offset that other ones have. There's a lots of little design inconsistencies, things that could be better if it was really just a little bit more attentive to what is the current background, and what are we using for that? some consistency things. Overall, it's still, it's reasonably decent.

Now, I think we all know that red against a green background, like this focus state, not a good idea. Red and green are pretty much the worst color contrast pairing to go for if you're worried about colorblindness. Which clearly they're not. But, the overall sense in this one is, it's okay. It's pretty decent. There are however again, just some fairly obvious things that are overlooked. Nobody apparently looked at the display attributes of the social links, because they are not properly boarded.

Yeah. So that's the Buckminster Fuller Institute. Do you feel like we have time for one more?

[00:52:55] Nathan Wrigley: Yeah.

[00:52:55] Joe Dolson: If you want to cover one completely out of the blue. Okay, all right. Let's see what's next. I didn't prepare the next one.

[00:53:04] Nathan Wrigley: Oh, that's ideal because then we'll get a real sense of, yeah.

[00:53:06] Joe Dolson: I know this is going to be what's really unknown. And of course the Showcase is randomized, so it's.

[00:53:15] Nathan Wrigley: So you're going to get whatever.

[00:53:16] Joe Dolson: Giving me a different view than it did yesterday.

[00:53:18] Nathan Wrigley: Okay, nevermind.

[00:53:20] Joe Dolson: No, it's fine because it means that the first one in the list is something I haven't done yet.

[00:53:24] Nathan Wrigley: Okay. So let's go with that.

[00:53:26] Joe Dolson: It's fine. Alright, so the next thing we're going to be doing is, it's called the Line Hotel.

[00:53:37] Nathan Wrigley: thelinehotel.com in fact, right?

[00:53:40] Joe Dolson: Yep. Here we are. So I'll turn on my Pressed Keys and here we go.

Alright. I can just see the focus on this menu, so that's something. And it does open. Although having opened it, I had a bunch of tab stops before anything happened. I'm not clear what that was. I think I see, I think I tabbed through. I think I had to tab through the other things in the header before I actually got to the menu.

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

[00:54:19] Joe Dolson: It's actually a little weird. So you'll note when I open, so watch the check availability thing in the upper right corner.

[00:54:27] Nathan Wrigley: Okay. That goes away.

[00:54:29] Joe Dolson: Yeah, it disappeared. I don't know why, but I'm pretty sure I'm still tabbing through it before I get here. I'm not really sure.

Okay. I'm going to say for this, there's something weird going on. I'm not totally sure what it is. It is keyboard accessible. You can get to it. But I do note when you close it, your focus doesn't return to where you are, it goes into the next section of the page. So that's a problem.

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

[00:54:57] Joe Dolson: You should, when you close a menu, you should go back to where you were previously.

I'm also saying that I think I'm probably focused on the locations thing right now. Yeah. I am. That doesn't have any keyboard.

[00:55:10] Nathan Wrigley: No. There was nothing to see there at all.

[00:55:12] Joe Dolson: No, nor do, and apparently those items, you, don't actually go into them. Are these clickable? Yes, they are. So that, that just doesn't work from the keyboard at all. This is really hard to see. Check availability.

[00:55:27] Nathan Wrigley: This is a good one.

[00:55:28] Joe Dolson: Very slightly darker. When you reach it with the keyboard. If you watch it, you can see like the outline just gets a little bit older.

[00:55:36] Nathan Wrigley: Oh, it's like one pixel added?

[00:55:38] Joe Dolson: Yeah. Yeah. I'd call that excessively subtle. Okay. And where, let's see, that checks me availability, but it doesn't put me into that. Oh, and I can't escape it with the escape key either.

[00:55:52] Nathan Wrigley: Oh dear.

[00:55:52] Joe Dolson: So this is a thing, I didn't go in there. I don't know where that is in the page.

[00:55:56] Nathan Wrigley: You're trapped.

[00:55:58] Joe Dolson: So that wasn't great. Now I've got just a bunch of images. Don't know what those are. Oh, I see. They do actually have text with them and it is, this is a block level link. Not a bad thing in many cases because it means you're able to do it all in one tab press, but I do, just outta curiosity, want to see what's actually in here.

So we've got alt text on that image, and then we've got the full title and the location. Let's see. There's no let aria label. Alright, a screen reader is going to get this link as "various polaroid pictures of an event at the line LA across concrete wall snapshot and scenes freeze weekend retreat, los we freeze weekend recap Los Angeles".

[00:56:58] Nathan Wrigley: Okay. All of that.

[00:56:59] Joe Dolson: That's a lot. But most importantly, this is a case where that alt text probably should be omitted, because the important thing here is actually the link. What you need to know is, I've gotten to a link, where does it go?

[00:57:14] Nathan Wrigley: Yeah. The image is not really.

[00:57:16] Joe Dolson: The image isn't what we're focused on here. Now I just want to go to this page and see, okay, is this image on this page? Yes it is. So this is an opportunity where here that alt text is really important, because here the image is actually a focus, and it does have the alt text. So you know. That's an opportunity.

[00:57:41] Nathan Wrigley: Okay.

[00:57:43] Joe Dolson: But as part of the link, it's a pain in the butt, but that's not what I'm supposed to be paying attention to. Let's keep going.

Where am I now? I clicked on something. This, okay, so this is one of those things that I actually find quite irritating is these links are so enormous that there's almost nowhere on the page you can click without clicking on a link.

[00:58:05] Nathan Wrigley: Yes. Yeah.

[00:58:08] Joe Dolson: Which is a hassle.

[00:58:10] Nathan Wrigley: Yeah, You end up opening multiple different things that you didn't want.

[00:58:15] Joe Dolson: Here we have the locations. Those are huge. The focus states here are okay.

[00:58:22] Nathan Wrigley: Yeah. Yeah.

[00:58:22] Joe Dolson: What's driving me a little bit batty is the quantity of animation. I have animations, I have prefers reduced animation turned on, and I'm, going to say I'm not getting that.

[00:58:34] Nathan Wrigley: No. Okay.

[00:58:35] Joe Dolson: It's just a little disorienting to have all of this stuff flowing in and out all the time. Yep.

I don't know what I've just gone to here.

[00:58:45] Nathan Wrigley: You are back, you're still on the homepage. You are there. Okay. So I just got to, okay, make it special.

[00:58:50] Joe Dolson: Special, but there's a couple things in between let's go and make it special. And I don't know whether they are or what I have gone to. So those are some kind of hidden link that's in the middle there. I bet if I click on this. No, that's actually taking me to a page. Oh, no, it didn't. What did that do?

[00:59:12] Nathan Wrigley: I don't know. I, was trying to look at the URL. I don't think it put you into another URL.

[00:59:17] Joe Dolson: No, it didn't. No. Okay. So that doesn't, oh, I see, this is, these are tabs.

[00:59:25] Nathan Wrigley: It's a home tab one and two.

[00:59:27] Joe Dolson: Okay, that doesn't answer my question at all about what the things I focused on were. Oh, I bet, it's the let's go link on each screen is to a different page. Okay, yeah, that's it. Okay. But they're all focusable, so you don't actually have to navigate the tabs in order to get to those links. They do all say, have the text, let's go. So they're not useful at all by, if you're tabbing through them with screen reader, you don't know what you're talking about. These are a mess, I would say. It's again, that's that invisible focus, things you can reach but can't actually use. I don't know what this is.

Okay, what's going on now? I tab and I'm on, oh, it the Instagram link. So it's, this, so I'm focused on this that has no focus state.

[01:00:25] Nathan Wrigley: No, nothing.

[01:00:26] Joe Dolson: Oh, this is all, wait. Oh, now I'm focused on. What on earth was I focused on then? I don't have any idea what's going on here. And then I am into the form, which for some reason now I can focus the entire form. That probably means it's in an iframe. Okay, and then I wander through the fields. Oh, the select box doesn't have a focus.

[01:00:50] Nathan Wrigley: No. Oh, you have to? Okay.

[01:00:53] Joe Dolson: Yeah. I can't figure out how to use this. I'm just going to close it with the mouse because I don't have the patience for that. And presumably this, and I'm now focused on select estate, which is exactly the same issue. And then signup gets the incredibly subtle.

[01:01:20] Nathan Wrigley: Oh, that was even more subtle. I didn't see anything.

[01:01:22] Joe Dolson: It's the same one that they had on the check availability.

[01:01:24] Nathan Wrigley: What is it? Gosh, I didn't see anything on that one.

[01:01:26] Joe Dolson: Tiny amount of additional.

[01:01:27] Nathan Wrigley: Oh, okay. Yeah. Just about caught it there. Yeah.

[01:01:30] Joe Dolson: Yeah. It's subtle. And then we get to these. Ooh, nice contrast.

[01:01:37] Nathan Wrigley: Yeah. white on white on basically white.

[01:01:39] Joe Dolson: Sort of white, yeah. Yeah.

Continuing through, I'm hoping at some point to get to the cookie banner and be able to see whether that's usable.

[01:01:49] Nathan Wrigley: Yeah. you're hoping, next click. I'm hoping the next tab is the one.

[01:01:55] Joe Dolson: Nope. No. I don't know where that went to, probably.

[01:01:58] Nathan Wrigley: It's a telephone number, suddenly. Come on, next one.

[01:02:03] Joe Dolson: I'm in Spotify. Why was that Spotify? Okay. But now I'm in the middle of the privacy policy.

[01:02:09] Nathan Wrigley: Oh, I bet there's a social icon buried beneath that, that you can't see.

[01:02:13] Joe Dolson: I can't focus on the okay, or the opt out. Yeah, no, those are, you can't make a choice there. And I can't focus on the close either.

[01:02:25] Nathan Wrigley: So you're going to have to do it.

[01:02:27] Joe Dolson: Oh,spinny. Yeah, spinny, yeah. The close is a div. These opt-in and opt outs. Oh, they're a tag, but they don't have an href attribute, so they're not focusable. If you have roll equals button, this is, that is what I would call massively over-engineered for something that is designed to very obviously be a checkbox.

I don't understand, why do you use a design that makes it look like a common UX character and then not actually use that?

[01:03:02] Nathan Wrigley: Yeah, it's curious.

[01:03:06] Joe Dolson: So yeah, this cookie banner, you remember we did a whole episode on cookie banner?

[01:03:12] Nathan Wrigley: Yeah, we really did.

[01:03:13] Joe Dolson: And, this one is actually quite bad.

[01:03:17] Nathan Wrigley: This is the winner.

[01:03:18] Joe Dolson: Yeah, and then there's more stuff down here that's hidden.

[01:03:21] Nathan Wrigley: Oh yeah. A little captcha thing going on there.

[01:03:23] Joe Dolson: I'm not with that. This was bad. Yeah, this one definitely had some significant challenges.

[01:03:31] Nathan Wrigley: This was the, this was the Line Hotel. An unexpected addition.

[01:03:35] Joe Dolson: Yeah, the bonus site. So we did six.

[01:03:38] Nathan Wrigley: It definitely kept on giving that one, that was for sure.

[01:03:41] Joe Dolson: And two of the six were respectable. One of the six was actually quite good.

[01:03:49] Nathan Wrigley: I think the winner, if you like, the, one that stood out for me there, was the Harvard one.

[01:03:55] Joe Dolson: Yeah. I don't think there's any question. Yeah. The Harvard Gazette was actually very good.

Like the one thing that they missed was some scroll positioning, which it's, it is a problem, but you know when you've only got one thing you missed.

[01:04:13] Nathan Wrigley: Easy to retrofit that one.

[01:04:16] Joe Dolson: Really, and you can go in and you can fix that. It's just a bug. Yeah. But you look at something like this where there's just problem after problem of hidden things, and strange things and losses of focus and it's much more complicated to fix. It's like, there's so many things

That's, I don't understand that. That's weird.

[01:04:39] Nathan Wrigley: I think give up on this one.

[01:04:40] Joe Dolson: Purpose of this, like I think they have these two images on top of each other and one of them is a video and.

[01:04:46] Nathan Wrigley: Yeah, it's definitely a sort of video. Yeah. Who, who can say. Yeah, so there we go. I'll just give you a quick recap in case you want to know. The websites that we visited there were printmag.com, news.harvard.edu/gazette. helloyumi.com. bfi.org. brodo.com. And the last one was The Line Hotel.

Just a quick reminder if, if the bit at the beginning, where Joe was talking about Able Player, if that's piqued your interest, just once more. There you go. ableplayer.github.io/ableplayer.

And if any of this has made you think, gosh, that Joe Dolson, he's a clever chap. We need him on our website looking at our accessibility well. As luck would have it, there's a URL kind of for that as well. joedolson.com. J-O-E-D-O-L-S-O-N.com.

There you go. Thank you, Joe.

[01:05:45] Joe Dolson: Thank you. Thanks for having me.

[01:05:46] Nathan Wrigley: Yeah, you're very welcome. I think next time, whether we get around to it one day or not, I don't know, but the, we're going to, we're going to at some point tackle AI and things like that, but alt text replaced by an AI. See what kind of a job it does. But that's a big task.

That's it for now. Thank you very much. That was episode eight. I really appreciate it. You take care, Joe. And I will, I'll see you on the next one.

[01:06:10] Joe Dolson: Alrighty. See you then.

[01:06:11] Nathan Wrigley: Bye bye.