Accessibility Show with Joe Dolson, Episode 3: Navigation menu wins and subscription form fails

[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 episode three of the Accessibility Show with Joe Dolson. Hello, Joe. How you doing? Hello. Glad to be here again. Doing really well. Yeah, it's a real pleasure to have you back. we're, like I said, we're on the third episode. We've done two previous ones, which you can [email protected].

If you go to the main menu and look in the archives, you'll see there's an accessibility show. Have a look at those two episodes. we try. This is the endeavor of this show, but we're just figuring out what's, what the, the endeavor is to take little bits of websites and give you some actionable, hopefully, content around accessibility, where things succeed, where things fail, and we've had a look at various different things in the past today.

Two different topics. We're gonna firstly have a look at a couple of websites and, just talk about the navigation menus and see how good they can be. that's a nice thing. And then we're gonna look at some forms and see how bad they can be. I will just say firstly that the endeavor here is absolutely 100% not to smear.

Or be smirch the reputation of these websites. They are just the websites that we've picked and, it's a work in progress accessibility for many people. So I just wanna make that clear at the beginning. Don't come after us with your lawyers please. That isn't the intention. But, Joe, do you don't wanna just give us an intro into you and who you are and what you do for a living and that kind of thing?

[00:03:03] Joe Dolson: Certainly. So I am Joe Dolson. I am a WordPress core committer and an Accessibility consult consultant. I'm one of the. Leads for WordPress Accessibility Day, which is an annual conference, focusing on accessibility talks. It's a 24 hour event. I do a lot of work with small nonprofit organizations who particularly serve populations of people with disabilities, so I have the incredible luxury of working on accessibility in a space where everybody I'm talking to.

Loves the idea and wants it to succeed. Nice. so I, I have a very nice life there. I.

[00:03:49] Nathan Wrigley: Perfect. thank you again for joining us today. Really appreciate it. The, plan really is to share Joe's screen, as I said at the start, we're gonna look at some navigation menus, some good examples. I will create, some show notes.

So if you like anything and you wanna have a look at them more closely, you can just go to the show notes there and click on the links. we'll just put Joe's screen. Up, you'll notice that we're bound. We, have to make compromises here. In order to fit Joe's screen on this screen. We have to, reduce the size of the website in order to beef up the font size of the inspector and things like that.

So be forgiving. The layout that you see may not be the layout that we see and so on and so forth, but, okay, should we go for it? Let's do that. Where are

[00:04:34] Joe Dolson: we first? we're starting with children's rights.org, and we're going to look at, their navigation menu. Now, in the last episode, we looked at a whole bunch of navigation menus that were in one way or another, significant.

Problems. And this one is an example of a menu that's actually pretty good. It's not perfect. and I'll comment briefly on the th things that I didn't particularly like about it, but it does have some really important, useful things, namely. If you are navigating it with keyboard, it's got a very clear focus state.

It works to open or close with both the space bar and the enter key, and so everything is clearly labeled Now. What I didn't like particularly is if you actually inspect the nav region, it is named site navigation in the REO label. And all that means is that when a user reaches it with a screen reader, it will be announced as navigation region, site navigation.

It's just redundant. it's an unnecessary word, really all you want. There is something that describes what purpose this navigation serves. It does not need to say that it is navigation.

[00:05:55] Nathan Wrigley: Okay?

[00:05:55] Joe Dolson: And then. The other thing about it is that it's, got a kind of odd usage of the Aria label attribute elsewhere in that it's got the Aria label repeated on the unordered list that is actually containing the list items.

and so in here it's called primary navigation. So the menu itself, for no particular reason has a slightly different Aria label. this is going to have some kind of uneven experience because some assistive technology will ignore that because it's on an unordered list, rather than on the nav item.

Others will read it, and then what you'll actually have is something that says that it's site navigation, primary navigation, region. Got it. Wow. It's a lot of verbiage. None of this is particularly harmful. It's not going to interfere with the user's experience a lot. it's not like this text is being read over and over again.

It's read once when you enter the region. but it is going to be mildly irritating. However, the important thing is it is labeled. It does have a unique label. It works from the keyboard. It has a clear, visible focus. It's a nice menu.

[00:07:13] Nathan Wrigley: So would you say that the errors that you just mentioned about the verbiage and the be being, the sort of repetition of things that don't need to be repeated, does that feel, in your experience, is somebody just maybe inexperienced and overdoing it, if Yes. They've just got this impression that they need to add labels everywhere. Where in many cases it's just duplication.

[00:07:34] Joe Dolson: It is, it's very much what happens when somebody is, the thinking. Not as a screen reader user, but as a cited user, I think. Yeah. Yeah. and that's one of the things that really causes people to put the word navigation in an aria label for a navigation menu is just that visually you're looking at this I need to be told this is navigation.

Well, I. The screen reader is already being informed that by the very presence of the nav element, which contains that as its semantics. So yeah, it's, good thoughts. It's well-intentioned. It's just gone a bit over the top.

[00:08:13] Nathan Wrigley: This is maybe the first time in our three shows where the advice is to take things away.

Not add things in, which is interesting. So presumably that's an easier job than it is to, add things in if you don't know where they belong usually. Yes, indeed.

[00:08:27] Joe Dolson: Yeah. Yeah. Ing yeah, that's actually, it's a very common theme in accessibility, that it's not about adding as much information for the screen reader user as possible.

It's about adding the right amount of information. 'cause this is a good example of it's, it is technically. Accurate information. It's just unnecessary. It's excessively verbose. it doesn't ultimately help. Okay. So I'm gonna look at a second site that is also a good accessible navigation menu.

and that's the current White house.gov. Now this was obviously a pretty significant build. This was worked on heavily by people closely involved in the WordPress community. and it's, again, also very solid. And one of the things I particularly like about it is the fact that they actually use the word menu in their menu button.

So it has a text menu, it, but it also uses the. Motif of the three horizontal lines. Oh, it does? Yeah. Common has the hamburger menu. So it's a really nice way of to, for me, of giving it both that sense of a hamburger menu, but also actually having text. it's elegant.

[00:09:50] Nathan Wrigley: Nice.

[00:09:51] Joe Dolson: But this is also a menu that works well from the keyboard.

It's much more significant because it's a mega menu sort of style. It's modally replacing everything. but it's got pretty clear, focus state. It's not the best, that, that. Dotted outline is, it's okay. It's not great, but there's so much content here that it's really critical that this navigation works well and that you can separate between these top level links and all of these section content that's within them.

So this is a good example of a really complex navigation menu, and what I just did is I tabbed all the way through the items. Yep. And when I ended, I had returned to this close button.

[00:10:42] Nathan Wrigley: Oh, nice. Okay. So what that's

[00:10:44] Joe Dolson: demonstrating is that this menu, which is behaving in a modal fashion by covering all the content, is also constraining focus so that your focus doesn't accidentally just.

Leave this menu and you can, you don't lose that visible track of where you are. so that's a great one and it'll be very interesting, in a couple of weeks to take a look at what the next version is like. I.

[00:11:08] Nathan Wrigley: Just on that point. So obviously this is a government website and it feels like certainly in the uk, the Gov UK website is, feels like it's in the vanguard in UK accessibility at least anyway, of doing a good job.

And I'm guessing that legislation in the US obviously that's where you are living. I'm in the uk. in. Compels websites to be accessible by not just because it's a moral argument, but because it literally has to be, because this might be the difference between somebody, I don't know, getting their child to school registered with a school or not, that kind of thing.

So the law kind of backing it up and in this case, the White House showing how it's done. That's nice. Yes,

[00:11:49] Joe Dolson: and that is absolutely true here that the government websites are. Definitely required to be accessible. but there's a deep reality that they're being required to be accessible.

only technically requires them to meet very specific guidelines, and they aren't necessarily being reviewed on a day-to-day basis. and I, always tell people that. Meeting guidelines, meeting the web content accessibility guidelines is just meeting the minimum allowed.

[00:12:27] Nathan Wrigley: Interesting. Yeah. Yeah.

That doesn't

[00:12:28] Joe Dolson: necessarily constitute making a good accessible website. There's a lot more you can do to make sure that everything is actually good and effective. and that's an example of that extra verbosity in those navigation menus. now in that particular case, because the two labels are actually different, you can argue that there's an actual accessibility problem there.

But technically, verbosity having all of this extra verbiage, that's not an accessibility failure. it's an inconvenience. it's something that you can do to make things better, but there's nothing technically wrong with telling somebody twice that it's a navigation region. I.

[00:13:13] Nathan Wrigley: Yeah, I guess it's a, it, just becomes a bit irritating, doesn't it?

Exactly. it's

[00:13:17] Joe Dolson: just a little

[00:13:18] Nathan Wrigley: bit

[00:13:18] Joe Dolson: too much. It's that difference between really having a good user experience and having a possible user experience.

[00:13:25] Nathan Wrigley: Okay. Okay. So there they were, children's rights.org and White house.gov. Again, they'll be linked in the show notes so that you can go and find those.

But the URLs came on the screen if you're able to see that. and okay, now we'll move on to something which is important. I guess I'll remove the screen just for a moment. the web would be a very uninteresting place if we didn't have forms. It would basically be like magazines, which changed in front of your eyes.

You wouldn't really be able to do anything. Web 2.0 and social networks and all of that certainly couldn't have come around. They are apart from images, videos, and texts, they are the bedrock. Of so much that we do online and they're the bedrock

[00:14:07] Joe Dolson: of what makes websites, useful tools, I think.

Yeah, that's right. as information source, everything else is great, but in term, in terms of actually being able to interact, all of our shopping, all of our signups, registrations, event management, so many things are driven by having this, these forms. so having them be accessible, that is.

[00:14:32] Nathan Wrigley: Valuable.

And we know that in the WordPress space there is a ton of solutions. you basically purchase something or get something for free. You install it and you're good to go. So I dunno if we'll get into that, particularly which options there are, but nevertheless forms Yeah. Websites. Here we go. So we, where are we gonna start?

We're gonna start with, we're gonna start at the Webby

[00:14:54] Joe Dolson: Awards. Okay. Now I kind of love using. An awards site as a demo for this. because of course, this is a thing that's really well known in the accessibility community is that most big web awards do not take accessibility into consideration at all.

and that's also true about. The WordPress showcase, which is where all of these sites are being drawn from, is that they don't currently really consider accessibility as a factor in any of the submissions. Which

[00:15:32] Nathan Wrigley: one? The reasons Would it be fair to say in a sense, sorry. Sorry, Joe, I think I crossed Oh, yeah, go ahead.

I was just gonna say, would it be fair to say that really things like the Weby Awards, I know it, it has a reputation really for do, for sh demonstrating clever. New things that we can do inside a browser. animations, clever design, which really, it looks great, it's almost like you're looking at a, Hollywood movie in some cases, but whether it serves the audience that this show is trying to serve, Maybe not,

[00:16:05] Joe Dolson: right? I think, I mean there's, first of all, there's a distinction and there should be a distinction between, a site that is specifically intended to explore. Stretching the boundaries. Yeah. And a site that's intended to communicate. just the other day there was an article posted on wordpress.org about needing more weird themes.

I saw that. Yeah. And that spawned an enormous amount of conversation. And personally speaking, I don't have any problem with there being weird themes. because one of the fundamental areas where. Themes have so many problems, is honestly in the, just the basic technological framework, like not having labeled buttons and not having labeled inputs and not having, functional navigation menus.

And I don't care how weird a theme is, if it functionally just works. That's the bar I want to focus on raising. What I also think is that the, WordPress team directory needs, A better ability to distinguish between things that are really suitable for a commercial professional environment and things that are, more flavor, there, like a personal site can be as weird as it wants to be and that's fine.

I don't have any problem with that. if you are. If you are preventing a close friend from seeing your information, that's between you and them. if you are preventing a potential customer from obtaining your widgets, that might be a bigger problem.

[00:17:51] Nathan Wrigley: Yeah.

[00:17:51] Joe Dolson: Yeah.

[00:17:52] Nathan Wrigley: Okay. Interesting.

But at any

[00:17:53] Joe Dolson: rate, I think that what Webby the Webby Awards do is in many cases just fine. let's award people stretching boundaries. the. The, whole way that standards and like browser support develops over time is based on people taking something that's just an idea in the specification that's not even got real implementation and saying, oh, let's implement this and see how it works.

And that can sometimes lead to things like the Internet Explorer, Netscape Wars, where. Each browser implemented radically different ways of doing things, and it's a nightmare. But it can also mean that a really necessary tool gets fleshed out, explored, experimented with until it's actually useful.

so I think, there's a lot of places for all of these things.

[00:18:44] Nathan Wrigley: Okey doke. yeah. Web awards I think has a reputation for being eye candy, essentially. That's how I see it. But, here we are. lemme

[00:18:54] Joe Dolson: just, so let's take a look Yeah. At their, newsletter signup form. So all of what I'm looking at here is newsletter signups.

Okay. And one of the reasons I'm doing that is because, there are. Two forms common on websites that are among the simplest possible types of forms, search and newsletters. Like Al. Almost every website is going to have a pretty simple version of doing that. I can't scroll. Why can't I scroll? Oh, because you've

[00:19:28] Nathan Wrigley: moved the mouse away.

I

[00:19:28] Joe Dolson: scroll because I was clicking on the screen share that's in the video. I do that. what's going on? I feel like a moron, but okay. Scroll my way down to their very, buried newsletter signup form. Okay. It's way down here at the bottom. no criticism of that. That's not in my business, that's marketing.

but okay. So here we are. We've got, Something that looks like a heading. We've got a form field that is somewhat visible. We've got a terms and conditions checkbox with microscopic print and a giant signup button. So let's look at what we've actually got going on here. okay. First of all, stay in touch is a label, okay?

It's not associated with anything. So it's not labeling anything, it's just is a label. So semantically, it's effectively plain text that would be called an orphaned label. okay, what's next? we've got another label, which appears to be positioned right behind the form field and based on its classes, it says newsletter error and it's empty.

so presumably this is a container where they're going to stick an error if you trigger an error using this form, right? Currently it's present, and empty. It has an ID on it.

[00:21:05] Nathan Wrigley: A long id,

[00:21:07] Joe Dolson: yeah. And then there's a third label, which is for success. So they've got a completely separate. Container to kit a success menu.

A success response. Gosh. But none of those labels at this point are being used for anything. Now we get to the actual form field and we have an input, but this input does not have a label. Oh gosh. So they're making a lot of use of the label element, but none of them are being used correctly. So the end result is a field that isn't labeled.

It has a placeholder. So there is some degree of information, for a screen reader that would still be used as information, for a sighted user. once you've entered any information in this field, it's no longer visible. And because it's, there's no distinction between the color of actual text and the placeholder.

There's not really any way of distinguishing right. What state this is in. So there's a lot going on here. let's continue on. we've got this two field sets.

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

[00:22:22] Joe Dolson: So a field set is used to group related inputs.

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

[00:22:27] Joe Dolson: So if you've got like a, for your, for a newsletter signup form, say if you've taken a name and an email and interests, for example, that might be a logical group.

The signup button is not a group. and the single checkbox for terms and conditions is not a group. so I don't see that's serving any purpose. These are just unnecessary things. And there is a label on the checkbox anyway, so it has got a label. it's an implicit label, which is. Not always the best choice, but it does work.

It's mostly fine. and then of course if you try and sign up, you do get an error message here. So now, okay. That, label is now being co-opted in here. Okay. it's associated with something. Yeah. It doesn't have a four attribute, so it's not actually associated with the input. It's just another label.

Yep. It's not associated with the error with the field that actually has an error at all. Additionally, this red on black is not going to meet color contrast specifications, so it's definitely not going to be very visible. and finally go on. You

[00:23:57] Nathan Wrigley: finish and then I'll ask you question. I got one more thing.

Yeah, Yep.

[00:23:59] Joe Dolson: This input. So a newsletter sign up is an incredibly standard field. It's something that should always contain the same information. Pretty much. If you're signing up for newsletter, it should contain your email address, right? So this is a great candidate for using an auto complete field, with a standard auto complete attribute that provides your email address, but it doesn't use that.

Now for a lot of people just typing out their email address is not a big deal. But for people with considerable mobility impairments, for example, typing can be very labor intensive if you're using say, a sip and puff system to do binary entry of your email address, it's using one of those.

Television interfaces where you have to select each letter. Yeah. In a grid. That's a great, it's a similar process. Yeah. It's tedious, it's hard work. And when there's an auto complete attribute, it can all just be automatically populated with your own information.

[00:25:04] Nathan Wrigley: So just a couple of things on that.

Firstly, the auto complete attribute enables the browser to inject pre-saved, Content into there, exactly. Yeah. So you might have your browser, in this case, Firefox, you may have saved your email address or your address or Right. I guess you can go as far as credit card numbers, whatever, it's all there.

Ready to put in. And I, for me, I do that all the time. I just click the one button, and it just, all the fields get filled in and this doesn't allow it because it simply doesn't know it exists. So my other question then, on a scale. Oh,

[00:25:40] Joe Dolson: it's a little bit of a stretch to say. It doesn't allow it.

It's not preventing it. Sorry.

[00:25:44] Nathan Wrigley: And

[00:25:44] Joe Dolson: browsers do try and detect these fields and say, oh, I think I know what you probably Thank you. Yeah. so it will still potentially do that, it's just that it's not nearly as certain. Yeah. And one of the things that the auto complete attribute allows you to do is, in, particularly when it comes to things like usernames and passwords, is it can distinguish between new username and old username.

So will it autofill with something that is actually what you want, or is it expected to produce a new. Username because there's, that's an important distinction.

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

[00:26:20] Joe Dolson: You don't want to be populating your, for, especially with passwords, you don't wanna be populating an existing password in a new password field.

Yeah. Thank

[00:26:30] Nathan Wrigley: you. Good point. so on a scale of one to 10, how frustrating would this be for somebody, let's say, using a screen reader? How, would you be able to. Somehow get your way through it, or is this a total zero? You've got no chance. So I

[00:26:46] Joe Dolson: think you'd absolutely be able to get through it. and that has a lot to do with the fact that it is very standard information and if you are reading through the page in a line by line fashion, you are going to encounter this text, stay in touch and you're going to encounter Yeah.

the text that says by checking the box, I agree and consent and sign up and you'll be able to figure out that it's a newsletter. Sign up. Got it. okay. It's just, it's not doing you any favors at all in terms of just making it clear and easy. Everything is going to have to require some work to figure it out, and that's the point of where it becomes a problem because it's just, it's unnecessary work.

Okay.

[00:27:35] Nathan Wrigley: Okay, so there we go. That was, the Webby Awards and their contact not contact form, their, signup form. Next one. I don't even know how to say this. I don't know how to say

[00:27:45] Joe Dolson: this either.

[00:27:47] Nathan Wrigley: Diablo, outdoor, I'm guessing. Dia Yeah, Diablo.

[00:27:51] Joe Dolson: That's what I would probably have

[00:27:52] Nathan Wrigley: gone

[00:27:52] Joe Dolson: with. Yeah.

[00:27:52] Nathan Wrigley: Okay.

[00:27:53] Joe Dolson: All right.

So diablo

[00:27:55] Nathan Wrigley: outdoor.com.

[00:27:56] Joe Dolson: It's a series, I think it's outdoor furniture.

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

[00:28:01] Joe Dolson: It's, interesting. It's very. Striking red and white design.

[00:28:08] Nathan Wrigley: Yeah.

[00:28:08] Joe Dolson: They also have put their newsletter sign up way at the bottom of the page. or at least they had when I

[00:28:16] Nathan Wrigley: looked at, they've, they detected that you were gonna have your BDI on it, removed it from, I wonder if it's

[00:28:23] Joe Dolson: not visible in this.

Yeah, if it

[00:28:27] Nathan Wrigley: is, we'll just move on. 'cause that's interesting. Lemme look. Oh yeah.

[00:28:30] Joe Dolson: It's not visible with the inspector open.

[00:28:34] Nathan Wrigley: Is that just because the inspector is crunching the viewport down to something more narrow? Yeah, I'd say that it's just

[00:28:39] Joe Dolson: being hidden when the viewport becomes that narrow. So I guess, yeah, that's an issue to be aware of, is if you're visiting the site on mobile, you can't sign up for the newsletter.

Interesting. Awesome. Or maybe it's getting, it might be that it's just getting moved into their dropdown menu or something. Yeah, I was

[00:28:54] Nathan Wrigley: gonna say that's, I'm not gonna explore that

[00:28:55] Joe Dolson: because it's not. Super relevant.

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

[00:29:00] Joe Dolson: But, okay. So there are a lot of things I hate about what's currently on the screen.

first on that list is the fact that almost everything is in all caps.

[00:29:12] Nathan Wrigley: I was just about to say that

[00:29:14] Joe Dolson: drives me nuts. That is actually very shouty problem because that's going to really create some issues for people with reading impairments. Like the ability to distinguish between letters goes way down with all caps because the shapes are less differentiated.

and it's just a little overwhelming. I feel like this page is shouting at me.

[00:29:36] Nathan Wrigley: Yeah, that's exactly it. I don't, can't even think why, genuinely, I don't see why you do that. I dunno why you.

[00:29:45] Joe Dolson: Anyhow. But then additionally to that, this particular shade of red that creates a color contrast problem. So that is going to be a problem everywhere, but it's even worse in the actual form itself.

[00:29:58] Nathan Wrigley: Oh yeah.

[00:29:59] Joe Dolson: I can't expect things.

[00:30:00] Nathan Wrigley: No, we're gonna have to, you're have to do it from memory. I'm off. Fine. Yeah.

[00:30:04] Joe Dolson: Because, this is, actually slightly more washed out. This red, it's probably being made slightly opaque. I don't know. I can see that the subscribe button has been made, disabled and so it's a little paler.

And so they're all very difficult to see. It's a very low contrast. Now, this one has no labels at all on no a thing either this checkbox or on this, field. this is again using. A placeholder. so there's some degree of visible information, but not much. but this radio button here, which it, I'm calling it a radio button because it's round, it is not a radio button.

It is in fact a check box that's been redesigned to look like a radio button. Oh. And then this text is not a label associated with it, so there's nothing there to make an association. It doesn't throw an error if you fail to check the box. So you can try and subscribe and it doesn't throw an error.

Oh, that's right. It what it, does do is it actually recognizes that's a fake email.

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

[00:31:22] Joe Dolson: That's time well spent. So anyway. it's interesting, there's no focus states, so you can't tell where you are at any point. oh, look at that. It just goes all solid red. Yeah, it goes solid red.

That technically, if it weren't for the fact that the color fundamentally fails, color contrast, that would be a pretty reasonable check state. Yeah. the error messages, if you do manage to throw them are microscopic. let me see. I should.

[00:31:56] Nathan Wrigley: Try and throw one. Oh, I'm sorry. Just can you use a, like a disposable email somewhere?

I don't, I can use one that isn't real. Yeah, do that.

[00:32:05] Joe Dolson: I have to try and remember how did I actually throw an error here? Because it's, maybe if I uncheck that. No, that's, no.

Maybe if I, there we go. That'll throw an error.

[00:32:21] Nathan Wrigley: oh

[00:32:21] Joe Dolson: yeah, there you go. There it is. Teeny tiny little error now. And it's also underneath the form field by quite a bit. Yes. It's totally

[00:32:28] Nathan Wrigley: divorced from the rest of the form, isn't it?

[00:32:30] Joe Dolson: It's difficult to find and it is microscopic. it's, it is a frustrating thing.

This is one, this form I think would be more frustrating than the previous one. It has a lot of very similar characteristics, but like the contrast issues are considerably worse because it's literally everything. so if you can't see this color combination, honestly, you can't use this website if you can't see this color combination.

Yeah. It's a disaster, but it's going to be just so frustrating. you can't tell where you are. There's no labels. It's, I found this to be pretty frustrating.

[00:33:11] Nathan Wrigley: Yeah, it is pretty frustrating. but it is

[00:33:14] Joe Dolson: basically the same set of problems. It's as the other one, it doesn't have all of the kind of weird semantics.

so yeah, it is all hidden.

[00:33:28] Nathan Wrigley: Okay. It is all hidden. Yeah. Nevermind. Should we try the next one? Sure. Let's just go on. So the next one, is slightly longer, URL. I'll read it out in case you don't go to the show notes. This next one is, or I dunno how to say this, either orchestra, I guess with an E, not an A at the end.

Orchestra metropolitan uh.com/en/newsletter. I'm guessing this is a. I gonna say French maybe or something? Yeah, I believe it's French. I'm on

[00:34:03] Joe Dolson: the English version of the website. Yeah, hence the,

[00:34:06] Nathan Wrigley: URL, but, links in the show notes. Alright, so it's for an orchestra, the me Metropolitan Orchestra. I'm guessing, first of

[00:34:13] Joe Dolson: all Yeah, that, that would be my assumption.

Yeah. So first of all, they have a link to subscribe to the next letter at the top of the page. So that's nice, it's a little bit easier to just jump to it. it is on a separate. Page, it's not, buried someplace. and here it is. This is a little more complicated. It's got multiple fields.

but this is using one of those kind of floating labeling things. Oh, you can put

[00:34:42] Nathan Wrigley: it, focus on it, and it moves the label out of the tax

[00:34:46] Joe Dolson: area into where the should be. There are worse than that. Yeah. 'cause at least the label is persistent, even if it does move around. however, this label field is, as many of them have been on these simple forms, not associated with the input field.

So as you can see here, it's a label, but it has no four attribute, no ID attributes that are associated with the input. so effectively it's not really labeled. And this is actually worse than the other ones because. It doesn't use a placeholder. And so therefore, because this label is not explicitly associated and it doesn't use a placeholder, these input fields have no labels at all.

So for a screen reader user, oh, this is just a text, input it, it's just gonna say, text it. there's no additional information.

[00:35:40] Nathan Wrigley: Oh, it's like a black

[00:35:41] Joe Dolson: hole. So while for a sighted user, this has actually got a little bit of a better experience because it's not using a placeholder and is using this label because the label is incorrectly used.

It's worse for a screen reader user.

[00:35:54] Nathan Wrigley: Got it.

[00:35:55] Joe Dolson: so that's annoying. Now this, positioning animation could be disorienting for somebody with, issues revolving around animation. It's relatively minor, it's, it might fit into a pretty subtle window of what's allowable. There's no focus state on the submit button, so we try and navigate to the submit button.

Oh, that's right. I was gonna mention that. I've just shown you something I was intending to show you later. but the important thing here is I'm navigating, I can see where I am. Because of the cursor position and the disappearance of the label on the form fields.

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

[00:36:36] Joe Dolson: But then the submit button has no state, so I can't be sure that I've actually managed to tab to the submit button, which is frustrating.

this again, has these error messages that are small. They have very poor color contrast and. Once again, there is no reference to the error message in the input field. So ideally, all of these error messages would be associated using something like Aria described by, so that they are explicitly associated with the field, they're relevant to, but none of them do.

They are just, this one happens to just be a div with no particular reference. It has a wrapping ID attribute, which is the thing that would be needed for an aria described by to work, 'cause Aria described by you would attach that attribute to the input. It would be Aria described by equals an ID attribute, and that Id attribute would be the container that has the description that you want to refer to With that in place, if a user gets to that email field, they can see.

I hear that there's an additional piece of information, which is that the email field is required.

[00:37:58] Nathan Wrigley: Got it.

[00:37:58] Joe Dolson: Now, of course, a newsletter form is very simple. It is common to of. Of course, you assume that the email field is a required field in a newsletter form, but the point of this is that despite the fact that this is a very simple form, people do this all the time on much more complicated forms where it's not so easy to assume as well.

This is just a microcosm of all of the different problems as a regular basis. That

[00:38:25] Nathan Wrigley: aero text is profoundly hard to read. That is. It

[00:38:28] Joe Dolson: is very difficult. Yes. Yeah. Yeah. And the other thing here is that the email input is required. The name inputs are not required. And there's no way to distinguish between, you can't just reading that, you can't tell that some of these fields are required and not all of them.

and that's true in both the code and in the visible. there's nothing about any of these fields that tells you explicitly which ones are required. You just have to guess. And then that other thing that I accidentally exposed is that this whole site has a funky thing about adjusting its viewport position.

It's essentially, I think what it's trying to do is always keep your current focus centered and it's oh, maddening. Especially if what you've done is you've scrolled manually to read something. You're like, oh, I wanted to see this. And then you just tab up here. As soon as you hit tab, it moves everything around and it hides what you might be.

Were trying to see.

[00:39:32] Nathan Wrigley: So let me just understand. If you tab into an A particular, like in the form field, it decides that it wants to put that 50% from north to south of the Viewport. Just wants, yeah, I haven't looked at

[00:39:44] Joe Dolson: the actual code, but that is, yeah, that's what I've concluded that it's doing.

[00:39:50] Nathan Wrigley: That is unusual, isn't it?

It's like some sort of writer's focus mode or something, but yeah. I've never seen that before,

[00:39:56] Joe Dolson: but it would be, it's the kind of thing that. While it sounds good, it's taking control away from the user. Yeah. You've lost all agency under, you really wanted to be able to see two things at once.

If you really wanted to be able to say this isn't a good example, but if there was an information field and you wanted to be able to copy some information from elsewhere on the site into it, good luck. That is such a,

[00:40:22] Nathan Wrigley: that is such an unusual decision. Like I wonder. I wonder who thought that was a good idea.

We don't normally say it in quite so stark terms, but that does seem like a poor, it's, I cannot think of a, it's very intentional. And unusual. Yeah. So

[00:40:35] Joe Dolson: it's interesting and I can see some argument for it. It's like I can see that, you can imagine that there's some benefit to having that centered, for somebody with low vision, there's something to be said for.

Not having to readjust their location, for example.

[00:40:52] Nathan Wrigley: Okay. Yeah. But yep.

[00:40:55] Joe Dolson: I think the disorientation of unexpected movement is considerably more of a problem than the very minor potential benefits of being able to keep in a fixed position. I would definitely call this more annoying than beneficial.

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

I'm with you. I'm with you.

[00:41:14] Joe Dolson: Alright.

[00:41:15] Nathan Wrigley: Okay. So that was, whoa. That was quite something. But it feels like from what you wrote in our shared show notes, it feels like this is gonna take us to entirely new levels. here we go. Now this one is called now New Next Dogo Camina Conmigo. Com. Yes, that's an easy to say.

Links in the show notes, and if you can see it, it's on the screen as well. Oh boy.

[00:41:44] Joe Dolson: I'm trying to remember where the newsletter is.

[00:41:46] Nathan Wrigley: Yeah, there's a lot of animation. If you're watching, what you're

[00:41:48] Joe Dolson: seeing is that this is nonstop animation. It changes color as you scroll. It's got all sorts of weird things that just move around on the screen.

Yeah. It's like candidate for a webby, basically. Yeah. Interesting, but a bit of a nightmare. Alright. Oh, there, it's, and again, we've got their newsletter down at the really way at the bottom. Now one thing you'll notice is that they've got this, extra cursor dot that kind of follows your mouse cursor around.

This is a thing that I find really irritating.

[00:42:27] Nathan Wrigley: What's the point of that? Are you, I've seen that once or twice in my life, and each time I think. Why, what's the point? Yeah.

[00:42:34] Joe Dolson: and honestly, I've seen them in various cases where they're much more complex than this. this is just a little black dot, about the same size as a mouse cursor.

I don't see what the point is of it.

[00:42:47] Nathan Wrigley: It's a gimmick, isn't it? That gim, it really does feel like we're just saying, look what we can do. Exactly. We've got more animation than you have.

[00:42:56] Joe Dolson: So the newsletter itself, first of all, it is. It has the same problems we've seen in many, occasions.

There's no label. it's using a placeholder. That's about it. But then it gets a little bit interesting. So first of all, obviously what you're expecting here is you'll enter your email and then this unlabel, this button that doesn't have a focus state. You would assume visually that this is going to submit the form, wouldn't you?

The little

[00:43:36] Nathan Wrigley: arrow. That's what I'm assuming. Yeah, that's the, so it

[00:43:38] Joe Dolson: has an Aria label on it, and it says open newsletter form. Oh, gosh. So for a screen reader, user, first of all, that's what it's going to. This says it's gonna do, so what does it actually do? Oh, it in fact does open. A newsletter form. So this is actually something where the screen reader is getting a lot more information than the sighted user who expects that they're done at this point.

alright, we've opened this form. Now obviously you can see that the color here is changing over time. Oh, so there's an animation going on. You can also see that there's this intense gradient. So like the color contrast is. Mostly horrific and sometimes not. But it's highly variable. It depends on which moment you actually see this.

it's a bit maddening now. I'm just gonna start tabbing through to see if I can figure out where I am. now I know you can't see anything. but it's pretty random. Like here I've gotten to the input field, but the, tabs up before that was a Facebook link. Really? Yep. Now I'll show you where we are.

So I'm gonna close this. So the next links here are Instagram, LinkedIn, and Facebook. Oh.

[00:44:59] Nathan Wrigley: What happens when

[00:44:59] Joe Dolson: you open this is you are not moved.

[00:45:03] Nathan Wrigley: Oh. So first you go

[00:45:04] Joe Dolson: to Instagram, then you go to LinkedIn. Then you go to Facebook. 'cause those are the next links in the footer. But the form has been inserted.

After the footer, it's at the end of the page. So it's not a very long journey to get there. However, when you open a modal, you should be landed in the modal. It is, it's just a good fortune that this was relatively easy to get to.

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

[00:45:28] Joe Dolson: oh God. So that's exciting. now in the form itself. So let's look at what we've got here.

this is still the same issue with the input. It's still. Has a placeholder and doesn't have a label. it's got a couple of additional check boxes. So these do have a label and it is associated, so that's great, but the entirety of the label is a link. Now, what that means is that when you click on this label.

It will take you to the link. So you can't use clicking on the label to check the checkbox. Oh, you have to check the little circle. You actually have to check the circle. Oh, wow. And of course, this is another example that is a checkbox that's remapped itself to look like a radio button. So it gives you the Yeah, but it's worse because now there's two of them.

So you have the impression that even more of an impression that they look like. A radio pattern, but they're actually not. And but that's true for both of these, that the entirety of the label is a link. In general, it's not a great practice to have links inside a label. It's not like going to be the end of the world if a link is just some portion, it's common in like terms of service or privacy policies, that the word privacy policy is linked, but it's a real problem if the entire text is a link, because now you cannot click on that label.

And one of the big points of having that label associated is so that you can click on it, it gives you a larger click target. so that's annoying. the actual checkbox labels, I would argue are not very helpful. like I'm not clear what exactly you are. Checking here like this text essentially is saying subscription newsletter now new next.

So by checking this, do you have to check this to be subscribed? What's the point of having a subscription form where there's a possible way you can do it without subscribing? Yeah, I just don't understand the purpose of that. And then the other one just is a, is just the text privacy policy.

It does not say you are agreeing to the agreeing policy. You're just recognizing, oh, this is a privacy policy. So those labels aren't really great. And then additionally, there are none of the, none of these fields have any kind of focus state. So there's nothing here that you can navigate with the keyboard and see a focus state.

[00:48:22] Nathan Wrigley: Oh gosh.

[00:48:24] Joe Dolson: So this one honestly drove me nuts. you get this gets the award, definitely say So this subscription button? Yeah. the visible label is kero subscribe, bme, which is appropriate. The Aria label, however, is subscribe to newsletter, right? This is one of the problems with using an Aria label is people omit them when translating.

[00:48:54] Nathan Wrigley: And there it is because it's not on the screen. You don't see it. Yeah. Yeah. And there's

[00:48:58] Joe Dolson: no reason to have an Aria label on anything that has visible text. there's occasionally some justification because you need to elaborate on that slightly. this is common in read more links, is that you, the visible text is just read more, but the actual text might be read more name of article.

and that's. Reasonable, but this is just awful 'cause this is basically means, especially for a native Spanish speaker who doesn't speak English. this is going to be pronounced with a weird accent because it's going to be pronounced in Spanish pronunciation. The text subscribed to newsletter. Which they wanted.

[00:49:42] Nathan Wrigley: Yeah. Yeah. Which nobody, so nobody's wanting to hear. It's a whole bunch of fun. The, it definitely gets the award, the, like the I Noble prize Yeah. For forms on today's show. what else is there to say? We had really, yeah, a couple of really nice navigations at the start there, followed by four examples of.

Perhaps how not to do, how not to do a newsletter. Subscribe form a simple one field, typically newsletter subscribe form. As I said, I'll post the links into the show notes next time. Joe has mooted that for episode four, which is the one following this maybe we'll, maybe we'll spend a bit of time looking at something, akin to the newsletter.

Subscribe form, but done right? Indeed. Exactly. tease that and leave it there, but, a, pleasure as always, Joe. Thank you so much. Just before we go, where can we find you? Where would people I. Get into you

[00:50:41] Joe Dolson: these days. You can find me on Blue Sky. I am joe dawson.com or Joe Dawson dot b sky.social.

you can find me at my website, joe dawson.com. You can find me on wordpress.org at profiles.wordpress.org/ Joe Dawson, and you can chat with me on Slack.

[00:51:02] Nathan Wrigley: Nice. blue sky seems to be the, where everybody's ending up. Just out of interest, I know it's apropos of nothing. How does Blue Sky do, from Oh, accessibility

[00:51:12] Joe Dolson: wise?

[00:51:12] Nathan Wrigley: Yeah.

[00:51:14] Joe Dolson: there are. Mixed. okay. they're, I haven't, I don't think they've done a lot of development lately because I think they've been doing more just swamped, desperate, trying to keep themselves, yeah. running, ramping up the server. I know they, they have some issues, but they have some really good things as well.

like one of the things they have is they have a setting within their. Configuration where you can have alt text be required. Yeah. To have a photo.

[00:51:46] Nathan Wrigley: Yeah. Yeah.

[00:51:46] Joe Dolson: Yeah. And the great thing about that is that there are actually a lot of people who intend to do this, but just don't always remember. Yeah. And that's a good way of just being like, it's just a good reminder.

I also really like their actual. Interface for adding that alt text. Like it is really making a point of explaining what this is and why you need it. And, I feel like that's a thing they're doing pretty well. Yeah. They, of what the point is, don't they? It's good. Yeah. Yeah. It's more than just, turn this on and then you just gotta off fend for yourself.

[00:52:22] Nathan Wrigley: Yeah. Yeah, it's nice. I'm, over there as well. I'm, I'm Nathan wrigley.com. So same thing as Joe, but nathan wrigley.com and that's another feature you can add your own domain. Anyway, that's our proposal. Yeah.

[00:52:34] Joe Dolson: the, your, own domain thing is interesting though because of the way the redirection works.

Oh. if you, use your own domain and had previously used it without your own domain, that. That old, those old links will not redirect to your new domain and somebody else could actually take that username so somebody could become Joe Dolson B Sky social. so what I've actually done is I am, you've got post Joe Dolson B Guy do social, but I did set up the domain redirect 'cause it does work the other way round.

Got it. Got it. So people can go to joe dawson.com and it will redirect to Joe do Joe Dawson dot b Sky Social.

[00:53:15] Nathan Wrigley: They've, they've made it a policy now that if you, from now on, if you sign up. and you, 'cause you have to sign up with a blue sky social at the moment. Username. Yeah. If you then move on to claim your domain, they reserve that domain.

the, handle that you previously had, that now is yours. Yeah. So it's a new Yeah. That's

[00:53:36] Joe Dolson: a good change. That was something that when I was first setting that up and looked that up, I was like, oh, that's, I don't really like that. Yeah. It was no idea. Said I can set up an identity and then somebody can pirate it.

[00:53:47] Nathan Wrigley: I imagine that they just never thought that was a thing, and now somebody pointed out and so they've, taken the steps. Yeah. Anyway, Joe, honestly, thank you so much for joining me once again. Really appreciate it. We'll be back for episode four at some point in the near future. But, for now, take care.

Have a nice day. See you later. Bye. See you later. Byebye.