Accessibility Show with Joe Dolson, Episode 4: Can cookie banners be accessible?

[00:00:06] 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 and welcome to this. This is the fourth episode of the Accessibility Show with Joe Dolson. How are you doing, Joe? I'm doing great. Glad to be here again, Nathan. Yeah, thank you. So if you haven't seen these before, it might be interesting to flick back. We have an archive of accessibility shows, perhaps later in the show.

I will announce where those are, but you can go through the menus or search for Joe's name, on the WP Builds website. WP builds.com and hopefully you'll find the accessibility shows. Obviously episodes 1, 2, 3 are published. This is the fourth one, and the endeavor here is to go through a few websites and tease out one, maybe two, but the idea is to stick to one topic and really dive deeply into that.

So it's not, we're not trying to do the panacea for all accessibility things here. This is just, here's a bunch of things all constrained around the same. Topic and and today it's gonna be all about newsletter sign ops. Before we get into that though, Joe, just firstly, do you wanna give us your quick potted bio?

Tell us who you are in case this is for the first time somebody's watching.

[00:02:40] Joe Dolson: first I'm gonna make a quick correction.

[00:02:42] Nathan Wrigley: Oh, you

[00:02:42] Joe Dolson: said that this one was going to be about newsletter signups. That was last.

[00:02:45] Nathan Wrigley: Oh, I apologize.

[00:02:46] Joe Dolson: You're quite right. this one is going to be about cookie bans cookie ban, and it's

[00:02:50] Nathan Wrigley: literally written there in front of me, but above it is the Words newsletter signups.

And I've gone and read that instead. And I apologize.

[00:02:57] Joe Dolson: it's easy to do. but yeah. So I'm Joe Dolson. I'm an accessibility consultant and developer. I'm a WordPress core committer, and def facto I. Person who works on accessibility and WordPress core, along with several other people who contribute to that.

I've been doing that for a very long time and, I'm really happy to be able to talk about accessibility with you on this show.

[00:03:25] Nathan Wrigley: Yeah, and I'm really grateful that we get the opportunity to do this. It honestly, it's an area that I need schooling in, so this is the perfect opportunity to do that. I notice when I drop into Slack, one of the things that I see you doing over there is things called bug scrubs.

What's that for a newbie WordPress user? What's going on over there in the WordPress Slack?

[00:03:45] Joe Dolson: so I run a bug scrub. Once a week that is focused on looking at accessibility issues. and basically what that is, it's just going through all of the things that are currently open, and assessing where they are, where they should go next, and trying to get any feedback on them that's currently necessary, and that works differently throughout the release process.

So right now we're in the alpha phase of the re release process for WordPress 6.8. And that means basically anything goes, we can work on enhancements, new features, major tasks. There's a lot of room. So right now we're focused on the enhancements. Anything that's considered an improvement to WordPress, that's just going beyond a minor bug fix.

later on, once we get into the beta phase, we really focus on bugs and then once we're into the release candidate, we actually start to move on towards the next release towards 6.9 during the release candidate phase. we'll touch base on anything that pops up as a consequence of a change we'll made and we're, we've made and try and fix it.

Mostly we're hoping that the release candidate is quiet and we don't have to worry about it very much. So then in that early phase, preparing for 6.9, we're actually going through everything that's open and being like, okay, does anybody wanna work on this? Does this seem like a good candidate for the amount of time we have available as something we might look at?

And so for each individual bug, that's an assessment of who is here, who has the time, who has the interest, is this something that works well with other things we're working on? Like right now, there's a whole bunch of stuff around title attributes. and that's just because we're trying to finish up a big project to eliminate title attributes in Word Press Core.

We got almost all of them done several years ago, but there's always some lingering ones. And now we're just like, okay, we need to finish this and actually be done.

[00:06:03] Nathan Wrigley: We have, we have this expression in the uk. There's this long bridge called the Fourth Bridge. and the, idea is that, somebody paints it, a team of people paint it, and by the time they get to finishing the painting, they have to go right back, and then the next day they start again.

It takes like a whole year and they just keep doing it. They never stop. It's a bit like that with, accessibility it would seem. Yep. is there a need for people to join that? do you have a team that kind of relentlessly works on that? Other people who have come to rely on or would you welcome some more bodies in that channel?

[00:06:37] Joe Dolson: There's absolutely a team of people who are working on that regularly. but. It's always good to have people coming in and looking at things and working on things. one of the things that can be the most difficult is actually getting early feedback. I'm sure you've seen this in the WordPress world.

There's routinely some big change releases and suddenly there's this chorus of people saying. Oh my God, I didn't know that was coming. there is a way to find these things out and that's to, install the development versions and work with them and, explore with them so that you are always using something that's current.

personally, like as a plugin developer, I do all of my development in the alpha. Oh, interesting. Okay. Yeah. So that you're really, keeping ahead. Yeah. I'm going to find out as soon as possible what is actually changing and whether it impacts me. And there's no guarantee that's gonna catch everything.

things are complicated. but I strongly recommend having that alpha installed as early as possible. If you're working in development in WordPress, you want to know what's going on.

[00:07:51] Nathan Wrigley: I will try to put the link to, the Slack channel for that into the show notes. So if you search for this, hopefully you'll find episode four and yeah, hopefully the link for that channel will be made available there.

what we normally do is we share Joe's screen and Joe, just highlights some of the bits and pieces that he's been thinking about for this particular episode. It is cookie banners. I'm sorry about that. That's what we normally do. However, we're just gonna derail the conversation for a few minutes because I said to Joe A.

Little while ago, it's very nice having you on and I'd like to I'd like to scratch your back a little bit 'cause you provide so much value back to us. So I said, have you got a thing you are working on? And he has got a thing he's been working on for many years, it turns out. this is X poster, so we'll just do this for a few minutes.

Tell us about X poster and I'll pop your screen up if that's gonna help.

[00:08:44] Joe Dolson: Sure. So X poster is a plugin I wrote, it's the first plugin I wrote. I wrote it in 2008 and I have been maintaining it now for over 16 years, which is a little bit shocking. but it started its life as something called WP to Twitter, and got to be rebranded when Twitter stopped being Twitter.

And I did choose X, but that's not. Because I wanted it to be branded as x.com. It's because I wanted something more generic and general. And so X in this case stands for Cross. It's a cross posting plugin, which can share your content from WordPress to a variety of other services. And I just recently added Blue Sky, which made it three services.

So it's now doing X mastodon and Blue Sky. And in the last month I've been doing a pretty major rewrite to better support what it needs to be able to do in order to actually post multiple services. because as something that once did just one service, it didn't matter what order things happened in, determining what length the status update needed to be could happen at any point before it was sent to the service.

Because there was only one service. Yeah, now we've got three different services. They all have different character links, and so I needed to make some different plans and reorder things so that you could customize that for each one. And so basically, it exists as a sidebar in your post editor, and you can enable or disable each service on the fly as you need.

Write a custom status update and use a. Templating from various elements of your, of the information about the post or about your site.

[00:10:33] Nathan Wrigley: Oh, so they're like little short codes. So if you click for example on, oh, I don't know, let's go for title, I'm guessing. Yeah. The second one is title. It will suck in the title of the post as and title is currently

[00:10:46] Joe Dolson: in there already.

So that actually takes it out. Yep. But yeah, that's exactly what it does. Oh, no. Cash title hash just replaces with the title of the current post. And you can set up your default template in the settings so if you have something you're always going to use, that's great, but then you can customize it easily here.

And then additionally you can customize it for each service. So now if you need something for Blue Sky, that's gonna be a little bit different. You wanna reference a user, but you're referencing them by their blue sky handle, not their Twitter handle. you can do that here. And then there's a whole bunch of other rules that are part of the premium plugin add-on, ex poster pro, to delay your posting.

maybe you're like, I want to proof this live before it actually gets posted to social media. So delay that 10 minutes. I want it to be reposted again tomorrow. set a delay to repost it 27 hours later. you might want to customize the text of those posts or set a specific date. And time that it's going to be reposted.

Gosh, customize the image that goes along with it. Choose the type of summary card that goes with it. there's a lot of options here. And so it's just a thing that you can use to streamline posting to all these different services.

[00:12:05] Nathan Wrigley: I had

[00:12:05] Joe Dolson: no idea

[00:12:06] Nathan Wrigley: you had this as a thing. So XX poster. So it's literally all as one word.

It's the letter X with the word poster following it, but it, there's no space X poster. That's the, That's the free version, but, Joe's just demonstrated some of the bits and pieces that you can get as a pro version as well. So that's, as you'd imagine x poster pro. and you set all the different settings inside of, inside of a whole settings page.

So you do that separately, and then it looks like you can set up, like you said, X mastodon blue sky. At A URL shortener, and you were saying to me before we hit record because it's bound to your website and your website only. It's not, it's using up your API quota. Which is equates to something like, let's say about eight tweets a day, something like that.

Yeah.

[00:12:58] Joe Dolson: With x.com. The API limits on the free account are pretty restrictive, so you get a total of 17 requests a day. but it's enough to make it at least marginally useful. As useful as X is. Yeah. Yeah, that's right. yeah, I think one of the reasons for being excited about this, again, is having added blue sky and having something.

Having a service that connects to that I actually care about. Yeah, because, I was on the verge of letting this just die a horrible death because I was like, X, who, who cares? I don't want it to use anything that goes to XI don't feel comfortable just removing it because the fact is there's still like 20,000 installations of this that are probably almost all still using X 'cause that's all it did for 16 years.

I'm not really, I don't have any passion for X. I don't want people to be using X, but you're more into blue sky and things now. Are you as well? Elon Musk has made it plenty difficult to make any use of anything like this with X, okay. Yeah. I don't need to make it harder.

[00:14:04] Nathan Wrigley: Yeah. but you've got, Mastodon, which seems to have had a little bit of a hiatus in popularity.

it's still popular, but it's not, I don't think, had the clip that it was. And it seems to be, it's got

[00:14:16] Joe Dolson: some real value in certain niches.

[00:14:18] Nathan Wrigley: Yeah. But, yeah, it hasn't grown, but Blue Sky is gaining in momentum. Day by day it would seem, I think the last time I've looked it was 30 million accounts and, counting.

Imagine it's risen quite a lot beyond there. And the promise really is that, you don't get the algorithmic feed and you don't get the ads. And so it's a bit quieter. Will it remain quiet? Who knows? Who knows? But for now, it's it's quite nice X poster and x poster pro. Brilliant. Thank you very much.

Yeah, you're welcome. That's fabulous

[00:14:49] Joe Dolson: for forcing me to share that.

[00:14:50] Nathan Wrigley: Yeah, I have to say I did twist Joe's arm there. He wasn't that willing to do it, but I'm glad that you did. And, go on, go and throw Joe a bone. Go and have a look at that and see, see what you make of it. Okay. like I said, we're gonna not be doing newsletter signups.

We're gonna do cookie banners. And, Joe does his homework, let's put it that way. Not only does he know a lot, but for this show in particular, he prepares and we, I can see a bunch of show notes with all the different bits and pieces that we're gonna be talking about. several websites to look at.

Gonna start with one called Fabrica Group. Do Fr and for those of you looking on a screen, then we can see it Now. There's the website on the left and the inspector on the right and. Cookie banners the bane of everybody's slide,

[00:15:36] Joe Dolson: I would say. before I talk about the cookie banners, I do wanna briefly talk about newsletter signup forms, because Oh, good.

Okay. The way we do this show is, we'll start off by giving an example of, that's a good example of whatever we panned in the previous show. Yes, but the reality is I looked at about 25 sites and 20 of them. With newsletter signups, and I didn't find a good example, so I don't have a good example from the WordPress showcase of a newsletter signup form to show you.

Okay. I think in itself somewhat of a condemnation of the way newsletter signups work. Yeah. There were a couple that were Okay. Mozilla and Qualtrics, but neither of them actually met standards and I was like, I guess I can't, I don't want to tout anything as good if I can't

[00:16:37] Nathan Wrigley: find something. That's good.

So we were looking at, that in the last episode, these newsletter Sign Ops and the showcase, the WordPress showcase is a website that you can go to, which literally has a bunch of websites that are built on WordPress that in some way exemplify, I think it's fair to say good design.

As we have discovered on previous episodes, it doesn't necessarily encompass accessibility, good accessibility, but good design. they look like it would qualify that slightly

[00:17:06] Joe Dolson: to what it, thank you. What it showcases is out of the box thinking. Okay.

[00:17:12] Nathan Wrigley: that'll sum it up much better like that.

Yeah.

[00:17:15] Joe Dolson: Is good design.

[00:17:16] Nathan Wrigley: Yeah. Thank you. That's much better. So interesting. Quirky. Out of the box thinking, that kind of thing. okay. there you go. That we were hoping to see a good newsletter one, but we're not gonna have one. so let's not today. Should we go for this one then?

Cookie? Yeah,

[00:17:34] Joe Dolson: we

[00:17:35] Nathan Wrigley: can see you on

[00:17:35] Joe Dolson: there. So here we are, we've got our cookie banner. So the first thing I want to observe is really what is the location of this cookie banner. Now, visually, obviously we see it down there in the bottom right corner. so we're gonna just have to navigate to this.

I noticed that the, Key Tracker falls behind that. So that's gonna make this a little bit less informative for you, but

[00:18:01] Nathan Wrigley: it's okay. Oh, I see what you mean. the Chrome extension, which is enabling us to see what you are doing is behind the cookie banner. That's curious, right? Yeah.

[00:18:11] Joe Dolson: Okay. Okay. so be it.

yeah. Now the location of the cookie banner in the dom, so how you're actually going to get to it, it shows up. at the top of the page, so this, diviv that is the container for it is right appended drill below the body, not in the same place as it appears visually. Now, that's not necessarily a bad thing entirely.

It is good that the cookie banner appears very, early in the tab sequence. That is a desirable thing because really, if you have to agree to something, in order to use the site, you should be present with that immediately. But it can be a little off-put for somebody who is cited but using a keyboard because they don't necessarily land where they expect it to.

Now I'll also note that this has a very clear and obvious okay button, but the Change your preferences button it, that's a lot harder to see. this, gray here. Yeah. Gives it a contrast ratio of 2.7 to one, which is well below contrast guidelines. Would you

[00:19:25] Nathan Wrigley: say

[00:19:25] Joe Dolson: that's

[00:19:25] Nathan Wrigley: deliberate though in

[00:19:26] Joe Dolson: this case?

Oh yes. That's absolutely deliberate. Okay. They want you to just agree, they don't actually want you to make changes. so this is not surprising. It's just still an accessibility violation,

[00:19:41] Nathan Wrigley: Uhhuh.

[00:19:42] Joe Dolson: So now I'm gonna just open up this panel. and one good thing here is the focus did move directly into the preferences modal, and you can see clearly that the close button is focused, which is great.

That gives you a good way of moving on from where you are. I appreciate that. Now the next tab did move me one space to the left to an invisible thing that we can't see.

[00:20:09] Nathan Wrigley: I

[00:20:09] Joe Dolson: can't see that. I can see there's a rectangle, but nothing. Yep.

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

[00:20:11] Joe Dolson: Okay, so that obviously. Not so great. Now I will tell you what That is, that is a language selector.

[00:20:18] Nathan Wrigley: Oh gosh.

[00:20:21] Joe Dolson: so I don't know what they were thinking. I don't know whether this is a design error or they just intentionally were like, oh, we don't want people to see that. but it's still there. Just make it all the same color as the background. Yeah. Okay. It's a bit weird.

Definitely an accessibility failure. and then we get into the selection. Selecting the different types of cookies. Now you'll see that I've lost focus. There is a focus state there, but it is so faint, so hard to see that it's a bit irrelevant. so I'm currently focused on virtual confidentiality.

[00:20:58] Nathan Wrigley: Okay?

[00:20:59] Joe Dolson: which, but you can't really tell now this, is set up as a tab panel, so now I need to use, arrow keys to navigate it. So I. When I'm on one that isn't selected, it's moving. Got it. Now what you may also notice, which is a little strange, is that the background of the site is moving at the same time as I navigate.

I.

[00:21:25] Nathan Wrigley: By the same amount as well. Interesting.

[00:21:27] Joe Dolson: Yeah.

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

[00:21:28] Joe Dolson: that is some kind of a bug that really should be dealt with because there shouldn't be, this kind of parallax motion effect by having two different things moving at the same time. that is disconcerting. It's not an enormous problem, but it is disconcerting.

now I need to actually select one of these, and now we get to one of the really fun parts, which is the, custom checkbox.

[00:21:59] Nathan Wrigley: Oh, wait, what a custom checkbox. Okay. That's novel. Yes.

[00:22:03] Joe Dolson: And that is going to be one of the fun things through this entire sequence because we have lots of different custom check boxes.

So first thing I can tell you is that you can't. See, focus on this. You can, there's no focus state. You cannot see a visible focus on the checkbox, so you don't know that you've gotten to it. Now, additionally, there's some more strange stuff going on here. you can't really distinguish between the active and inactive states.

Visually, because the only change is this subtle color change from the light green to white. that is definitely insufficient from a, for a color change to be able to distinguish between these two modes. It does change this label. This text is changing. So because of that, you will be able to tell what the text says.

However, the way this is actually set up, This label is labeling the checkbox. Okay, so the checkbox has a label that sometimes says active and sometimes says inactive. Now, what does it mean if you have an unchecked checkbox that is inactive? Oh, okay. Yeah, just think through the logic here. Yeah. And does this actually make any sense?

no, not a lot. It technically means that both states from a purely semantic standpoint Yeah. Are saying the same thing.

[00:23:39] Nathan Wrigley: They're saying the exact same thing. Okay.

[00:23:41] Joe Dolson: Alright. So that is a potential point of confusion in which somebody can really struggle to figure out what they've actually done. Now the last thing, regarding this checkbox is it is using a setting, called appearance.

None. Right here, you can see that. Got it. In inspector. Now what appearance none actually does is in some browser and assistive technology combinations, it strips out the semantics of the control. Oh. So for some devices, this is not a checkbox. It is now essentially a diviv. It is a checkbox in name only, but the semantics have all been roofed.

So it's a div and what it will report to when you get to it in a screen reader is just checked. That's all it says. The label doesn't mean anything anymore because the label isn't associated with this div. You can't make that association. It doesn't have a name, it doesn't have a state. so there's a lot.

Problems in this checkbox. No kidding. Gosh, that's masses. Yeah. Now, one other thing that I just have to mention, because when I was doing some screen reader checking on this, I noticed it very quickly is that this site is in French. yeah. Oh, look at that. The site says that it's in English. English. I saw that.

Yeah. And it is pronounced on my device in English.

[00:25:20] Nathan Wrigley: Gosh.

[00:25:22] Joe Dolson: Okay. which let me just say that sounds an awful lot. Like somebody with an absolutely atrocious French accent. now that may be very authentic for, as an English speaking person. but it's not very helpful.

[00:25:37] Nathan Wrigley: No. So the language declaration there is just simply incorrect.

It's been labeled. Yeah. It's just wrong. Yeah. Okay.

[00:25:44] Joe Dolson: And that's not just the cookie interactions that's going to cover. Oversight. yeah. So that is very frustrating. Okay. And then we close it and our focus is lost.

[00:26:01] Nathan Wrigley: Oh, where did you end up? You ended up back in the

[00:26:03] Joe Dolson: I think I ended up just in the Chrome.

So I might at like the beginning of the browser. Okay. But the point is that it, what it should have done is dropped you back on Sanje may peripherals. 'cause that is actually what you're attempting to do. Ugh. so that's the first example. Now this is using, a service called Free Privacy Policy, from free privacy policy.com.

I don't, I can't speak to what kinds of options are available. I know a lot of these cookie mods offer a lot of preferences and how you can set them up. and some of those can impact accessibility, but this experience.

[00:26:47] Nathan Wrigley: Not so great. Kinda surprising that if, that is the business model of that business, that there would be more or less anything in there that was, a problem because that's what they do.

they've got this one finite product catalog and, and yet quite a bit in there.

[00:27:09] Joe Dolson: you'd,

like to believe that I ly like to believe that organizations. Who are building applications that are legally required within a community, such as consenting to cookies, would make sure that everybody who.

Used their product was in fact able to do that. but that is not in fact the case.

[00:27:34] Nathan Wrigley: Maybe in June this year when the European Accessibility Act comes around, we'll have more legal teeth. Yeah, we'll see. We'll see A lot to be done. Yeah. Yeah. Okay, so that was Fabrica Group f fr. And now we're moving on to a different website.

This is called Opus one ch. So Opus one. oh. Look at that. It's a nice looking website, but, that's very interesting.

[00:28:02] Joe Dolson: Now I'm going to start this off with a content warning. which is to say if you decide to go and look at this website and you have, aversions or issues with animations, don't open the menu.

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

[00:28:20] Joe Dolson: I am going to open the menu so that people can see that, but I want to warn you so that if this is a problem, you can just close your eyes. It'll only last about two seconds. Caviar mTOR. Here we go.

[00:28:30] Nathan Wrigley: Yep.

[00:28:30] Joe Dolson: Here we go. 3, 2, 1. Oh, wow. Gosh. Yeah. That was a lot. Alright, it's over. So that's exciting. Yeah.

That, that was, I can see that as a, it's a creative thing. It's very interesting. It does not respect, prefers reduced motion. And boy, that's a lot of motion.

[00:28:55] Nathan Wrigley: I. That is a lot of motion. So what we saw there, I can probably describe it, is a bunch of concentric, colorful circles. Increasingly growing, almost like you were shooting down a tunnel or something, but it took over the entire ui.

There was no bit of it, which wasn't involved in animating in color at speed.

[00:29:16] Joe Dolson: That's a lot. It's a lot. Yeah. I just, I felt like I just had to raise that. Yeah, because it was intense.

[00:29:24] Nathan Wrigley: You can imagine though, the developer of that must have been so chuffed a bits when they pulled it off from a technical point of view, you thinking, oh, I'm sure.

But then, the thing is respecting, the, respect for the limited motion is, Should be a thing there. I think

[00:29:40] Joe Dolson: it should be. Yeah. Yeah. I mean it's, just one of those things that it is in fact relatively trivial to implement. it's a one-liner in JavaScript or a couple lines in CSS.

it's, yeah, it's not that much. Okay. Alright. But back to our topic, which is in fact, cookies. There it is. So first of all, here we've got the usual cookie popup. now this has some very obvious color contrast problems, except all is in this white on a light green. It is. I have pretty good eyes and I will say that I find that a bit of a struggle to read.

now green is a signaler. Oh, it's so in many contexts it indicates acceptance go. Yeah, but I don't think that's.

[00:30:30] Nathan Wrigley: That doesn't, so basically what they're saying is, except all is green, it's yeah, just get on with it. It's green. Why not? Yeah. Just move

[00:30:37] Joe Dolson: on. Yeah. that's not great. So let's go back to, obviously we have to personalize these.

and once again, we have moved to the modal, so that's great. Yep. But, one thing I'll note about this modal is that it is not actually a modal. I. Okay. it doesn't have any of the semantics that are part of being a modal. the focus moves to the container, the entire wrapping container, and it just starts reading all of the content of the modal.

Oh, wow. Okay. Whereas if it was a proper modal, it would have a name I. And that's what would be announced. And you'd have a, you'd actually move the focus to the close button, but it would still announce the name because it was going inside a modal. so that's not great. it works. You can navigate around it and make it happen, but it's not, correct.

and it's not the best possible thing. The focus states are okay. But if you'll note what I'm focused on right now, there are clearly some contrast problems. What is that? It's purple on black. Yeah. The what is a, so read more? Yep. Essentially, but it's purple on black. and this focus state is basically just browser default, which is blue.

and this blue on black doesn't have great contrast either. No. So it's, present. It's okay. It could obviously be better. Now, at this point, I was starting to work on this with a screen reader, at which point I noticed that this site is also in French, but it was marked up in English at the time I was looking at it.

Okay. Okay. Now I, this is interesting. This is clearly reversed because now what I'm looking at is, so this content is in French, but the outside stuff is. Is in English? no, it's mixed. So present, oh yeah, French. But this stuff down here is in English. So menu, A lot of this is ambiguous stuff.

Stuff that really could be in multiple languages. So it's a little strange. See? 'cause I can see now it's in French, but when I was inspecting it with the screen reader, it was in English. And so I don't know what's going on there, but there's. It's a bit of a mess. Alright, so let's look at this custom checkbox.

'cause that is the exciting thing here. Now this one you can focus it. Yep. So it's an actual object on the page and you can see that focus if you have good enough eyes to see that blue on black focus date. But that's not to say that it's great. first of all, it does have. Issues with being color only to distinguish between the two states the contrast is better.

'cause now the selected state is this dark blue on white instead of this light green. So that is much more visible. but this is another one that does the same thing with changing the label as it changes the state. I was just thinking

[00:33:50] Nathan Wrigley: that. Yeah.

[00:33:51] Joe Dolson: So in its inactive state, it says that it is. To activate in a sense.

It's so one of the states says it's activate this. The other one says inactive, right? And so you've got this constant confusion of. How that checkbox actually relates to the label. This is one of the reasons why changing labels is not what you should ever do with a checkbox. A checkbox is a label, and then it gets changed so that the state of that checkbox reflects what is actually happening with the checkbox.

[00:34:25] Nathan Wrigley: I get caught out of this and obviously I can see. everything that's going on, but I get caught out with this on a daily basis where I am absolutely bamboozled by the language, and I always feel it would be so much easier if it said something on along the lines of, I don't know your, so this is something called functional.

So functional is now deactivated or is now activated, just some. Yeah. English or in, in this case French definition in a, easy to pass way. Because this happens to me all the time and I'm, it literally every day and I don't know what I'm agreeing to. Yeah,

[00:35:07] Joe Dolson: it's, a lot.

And one thing I'll note here is all of these sections are inside an accordion. Okay. that accordion actually does work. It has Ari expanded. Yeah. True. False. Yeah, it's got buttons. that's actually pretty good. though the, it is a little weird that there is content that is part of the accordion that is visible when the accordion is closed.

[00:35:34] Nathan Wrigley: Yeah. That is unusual, isn't it? Yeah. Which makes

[00:35:36] Joe Dolson: it a little confusing to figure out exactly what you're doing. 'cause actually what you're doing is you're. It's more of an a read, more yeah. Dis disclosure thing. Yeah. you've got content here because really usually when you reach an accordion control, navigating as a screen reader, you get to this, it says functionality, you expect that there is no additional content.

I don't think that would have any profound impact on the user because. If they decide, okay, I'm gonna open it so I can read the content, that same content is there. They can get it either way. it's just gonna be a little bit confusing if they're just reading through the page and they get to this functional, and then they figure, okay, I'll get to the next control.

Oh wait, this is content. Oh, maybe this is actually open and the attributes are wrong.

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

[00:36:23] Joe Dolson: So again, usable. and so this one is powered by a company called Cookie. Yes. Which is cookie yes.com. This is on the whole better. Then the previous one, but still has some fairly notable problems.

[00:36:41] Nathan Wrigley: Okay. Okay. So that was Opus one and obviously we're looking as well at whatever cookie.

Yes. Does. So the next one is C Caviar tv. Now this got me interested, I wondered if it Oh look. Look at that KY stuff. Oh gosh, here we go. it's a of

[00:37:01] Joe Dolson: animations kind. Annoying. Okay. Yeah, lots of animation. Again, not stoppable, but at least it's more slow moving and yeah. They've got this big, the company that made this has this big.

asci art at the top of the HTML body.

[00:37:19] Nathan Wrigley: Can't make sense of that.

[00:37:20] Joe Dolson: I don't know. I dunno. I think it probably only makes sense at specific sizes. Yeah. Okay. Okay. If you were wi wider, it might, line up. Got it. I, I don't know. So this one is a bit different. 'cause this isn't really properly speaking.

cookie acceptance. 'cause of course this is an American site and we don't have that cookie law. But there are still privacy concerns. And so this is basically just saying we, that they comply with the GDPR and, you can accept it. You can't customize anything, you just can accept it or you can email them with your request for information.

But it's interesting because this is custom and it's unique, and it's really, low contrast and incredibly tiny. Yeah, it has, it is the first thing focusable on the page, so it's relatively easy to find it. Its visible placement matches its location in the document object model. but if you want to actually read what this says, you need to be able to see if things are very small and very low contrast.

Only thing, again, that is plainly visible is I accept. And then we've got this fun email link. Wanna see what the email link does?

[00:38:44] Nathan Wrigley: Oh, go on. Oh, no. Is it gonna open up your email client? Nope. In the pre, no, I'm clicking on it. It does nothing. It does

[00:38:53] Joe Dolson: absolutely nothing. It is just a hashtag.

[00:38:55] Nathan Wrigley: It literally links deliberately to nothing.

[00:38:58] Joe Dolson: Not link to anything. There is no email here. it does nothing. No attached to that, appears to be broken. Whatever it is, it's just not there. Somebody forgot to clean that

[00:39:09] Nathan Wrigley: up, didn't they? It was like, we'll

[00:39:11] Joe Dolson: come back to

[00:39:11] Nathan Wrigley: that. We'll add an email, which tells you a lot about

[00:39:13] Joe Dolson: just how much they actually care about their privacy.

[00:39:17] Nathan Wrigley: Okay. yeah,

[00:39:19] Joe Dolson: so I don't have a lot to say about this one. I just wanted to call that out because this is an example of where things maybe are lying in places that are not currently covered by those. Jurisdictions and maybe aren't Yeah. Having to pay as much attention. They'll do even less. And do it even worse.

[00:39:37] Nathan Wrigley: Yeah. It's interesting. At the topic does it seem, does it say in the GDP

[00:39:43] Joe Dolson: it says, we comply with the GDPR and any data held by us as held on the following basis, provided in the GDP.

[00:39:50] Nathan Wrigley: What's the GDP General data protection.

[00:39:53] Joe Dolson: Yeah, I feel like that's a, we don't really know what we're talking about. Is that a

[00:39:57] Nathan Wrigley: typo?

Should it have an r at the, anyway, is it completely, maybe as a typo. Yeah.

[00:40:01] Joe Dolson: there clearly are typos here. Yeah. GDP

[00:40:04] Nathan Wrigley: in the UK stands for something completely different. It stands for Gross Domestic Product.

[00:40:08] Joe Dolson: Yeah. That's what it stands for here too.

[00:40:09] Nathan Wrigley: Oh, okay. I'm, bamboozled by that.

I'm reasonably

[00:40:12] Joe Dolson: confident that is not

[00:40:13] Nathan Wrigley: what, that is not what it is yet to the entire product of the nation. There. okay. So that's very, so it's not, cookie consent, but it's something adjacent to it. It's certainly related to it. Yeah. It's a privacy document. It's, oh, it's interesting.

As you scrolled, I got more of impression. It felt like it was part of the navigation menu almost at the top. Like the bar at the top, the lines with

[00:40:38] Joe Dolson: it aligns with it

[00:40:39] Nathan Wrigley: when you're there.

[00:40:40] Joe Dolson: and presumably you have to accept it in order to be able to see. The navigation there. You did. You did. Which is done very strangely.

[00:40:47] Nathan Wrigley: Okay. Yeah, that is interesting. Okay, so there we go. That was caviar tv. No doubt. A very expensive domain, I'm sure. however, we're gonna move on. This is the fourth of four, so this is the last one. This is, Museo. I actually have no idea how to pronounce this. I dunno how to pronounce this either. No, let's go.

I dunno. it sounds like a museum of somewhere called thon and I'm, I have no idea where that is, but, let's find out when it finally loads.

[00:41:23] Joe Dolson: It takes a while to load. It does take a while to load, which I do find one of the most humorous things is if you're looking at the inspector as it loads, it briefly shows you the,

[00:41:35] Nathan Wrigley: I saw

[00:41:35] Joe Dolson: that from WP Rocket saying I saw

[00:41:38] Nathan Wrigley: that.

I wondered if I'd seen that.

[00:41:40] Joe Dolson: Yeah. Yeah. Up by WP Rocket, and you're like. I it made it, it may be sped up. I don't wanna know what it would be like without that. Yeah. Yeah. You got that brief moment. I'm waiting quite a while. Yeah. anyhow, so this has things, one thing you'll notice is that this, again, this is a modal, it is appropriately labeled.

It is a proper modal, and it appears at the top of the page so that your navigation location matches what So this is, that is a nice thing. so it's got some advantages. Now. This focus state, I'm navigating, you can see that there's a slight color change. Oh, I'm didn't see that at all.

And it's gone to a very slightly lighter gray Oh yeah. Very slightly lighter green. Yeah. So that is. Not a good focus state. that is extremely bad. You can just barely tell anything's happening. so let's go ahead and go to configure, which is again, clearly the one that is, they're saying, oh, you don't really want to do this.

No. 'cause it's

[00:42:55] Nathan Wrigley: got no back. It is not a button. It doesn't look like a button. okay, here we go.

[00:43:00] Joe Dolson: Oh, here we are. inside the configuration panel, there is no. Visible focus. no. Nothing is focusable. You can't tell where you are.

[00:43:10] Nathan Wrigley: Oh, no. So

[00:43:10] Joe Dolson: that's just gone down the, road already. there's a logo here in, in this space.

It's tiny, barely readable, by site. It has the accessible name, which is logo, in Spanish. That means basically company logo. Okay. Which is a fancy way of saying we didn't do a logo. We forgot the logo. Okay. Yeah. So this also uses a custom mouse cursor, which is really frustrating because what that really does is it masks your actual point of interaction.

yeah.

[00:43:51] Nathan Wrigley: Where is it exactly?

[00:43:53] Joe Dolson: Because in a, the reason a pointer is shaped like a pointer, is that the tip of the pointer is your actual point of interaction? Yeah. Where is it with this circle? I'm guessing it's

[00:44:02] Nathan Wrigley: in the middle, but the middle is gonna be probably confiscated by the color black, which has no opacity.

[00:44:08] Joe Dolson: Yeah. That's just really irritating.

[00:44:11] Nathan Wrigley: Oh, trying to be fun. trying to be cool again. Now let's go

[00:44:14] Joe Dolson: ahead and try and click on some things.

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

[00:44:19] Joe Dolson: No, Nothing happens. Nope, nothing at all happens when you try and click on things because this site. Has a screen curtain in place.

[00:44:33] Nathan Wrigley: Oh my goodness.

[00:44:35] Joe Dolson: I don't remember which one it is.

I think it might be this one. I don't remember. No, it's not that one. at any rate, this screen curtain is covering everything.

[00:44:47] Nathan Wrigley: so is it the background that's gone to the gray? Yes. Is it that? But there's actually

[00:44:53] Joe Dolson: in front of that, but it's in front. There's a fully transparent one. This is it. It's diviv ID equals curtain, it's called.

that's helpful. At least that is actually covering everything, including the modal. Oh. So you literally cannot interact with their cookie panel at all using a mouse. You can interact with it using a screen reader. Now, you also are going, you're gonna be very frustrated for using a keyboard. But you're sighted because there's no focus state.

if you're using a screen reader, however, you are able to navigate through everything normally because the screen reader is announcing where you are. Yeah. Instead of being independent on that focus state. however. These custom check boxes, I'm not gonna try and inspect them because that's really labor intensive because I have to get rid of the curtain first and blah, blah, blah.

however, these check boxes, they're another custom one. they have a label attribute. That label attribute uses display none. so they actually have no accessible name. Yeah, so none of these check boxes, while the screener can get to them and interact with them, they cannot find out what they actually are labeled, and what they're actually doing.

[00:46:15] Nathan Wrigley: It's, like a study in obfuscation, isn't it? A study? It is, yeah. slight a van

[00:46:20] Joe Dolson: the whole time. I will tell you when prepping for this, one of the most interesting moments was this kind of realization when I was just like, okay, let's just see what happens. Wait, what's going on?

[00:46:29] Nathan Wrigley: Yeah, that is profound.

Why can't I click on anything? Yeah. I

[00:46:32] Joe Dolson: made it in the show

[00:46:33] Nathan Wrigley: right

[00:46:33] Joe Dolson: away in that moment. It's this is definitely going in. Yeah. But yeah, so that's, to me, what that really tells me is. A total lack of testing of this.

[00:46:44] Nathan Wrigley: because

[00:46:45] Joe Dolson: nobody checked that one

[00:46:46] Nathan Wrigley: time. Not once. Because

[00:46:48] Joe Dolson: mouse interaction is generally the default.

Yeah. Most of the time. If there's something that works, it is the mouse interaction. I.

[00:46:58] Nathan Wrigley: that's shockingly

[00:46:59] Joe Dolson: bad. So anyway, that was exciting. And so this, that is definitely not the fault of No. Cookie Pro. No. which is the, service and use here. It's a product from onetrust.com. that is the fault.

100% of this website. They, which has

[00:47:14] Nathan Wrigley: put this curtain over the entire

[00:47:16] Joe Dolson: viewport so

[00:47:17] Nathan Wrigley: that everything grayed out a

[00:47:18] Joe Dolson: bit. Yep. So you really, your only options are you can either reject or accept all of the cookies. You cannot customize them without going to really quite an extreme level of extra work.

[00:47:32] Nathan Wrigley: It does feel some part

[00:47:33] Joe Dolson: of

[00:47:33] Nathan Wrigley: me feels, I wonder if that's deliberate, Oh, wait. Oh, I don't know.

[00:47:40] Joe Dolson: it feels accidental to me. It feels like something that. Somebody did and just screwed up. Yeah. How they were doing things. Wow. Okay. Without, but it does tell you that. There's

[00:47:57] Nathan Wrigley: an insufficient amount of testing going on there. Yeah, no testing at all, in fact, in that particular case.

And that's what I got for today. that was absolutely thrilling. It's fun. Yeah, no kidding. There's absolute boatload going on there. So just to recap, if you want those URLs very quickly, I'll try to say them. Fabrica group Fr Opus. One ch Then we had caviar tv, and that was slash loss. Angelis, like the city and then the one that we just looked at.

That one's

[00:48:31] Joe Dolson: long.

[00:48:31] Nathan Wrigley: Yeah, go to w com search for this because its a long one. and you'll be able to see it mu thien or something like that. And of course, don't forget. Joe has been busy working, not just on accessibility and doing all the bug scrubs and things like that. He's also been working, on his ex poster.

Plugin X poster and X poster pro. If you fancy putting your bits and pieces onto the social network of your choice, be it x mastodon or blue sky, you can do that, with his plugin, which is really nice. Joe, we'll be back at some point soon. We'll have a episode five and hopefully we'll find a good newsletter sign up by that point.

And, a cookie banner, which does. Everything right and is very clear and easy to understand. Yes. We'll see about that. Yeah, I don't think you'll find one. Good luck with that, Joe. Thank you so much. Thank you so much. Appreciate it. Appreciate it. Bye-bye. Alright.