This episode is a recording of a June 2023 WordPress Accessibility Meetup where Alex Stine, Engineer & Accessibility Consultant, and Amber Hinds, CEO of Equalize Digital, performed a live accessibility audit of the Go Theme by Go Daddy and provided real-time feedback to their Senior Software Developers. If you would like to watch a video recording from the meetup, you may do so on the Equalize Digital website here: Go Theme by GoDaddy Accessibility Audit: Alex Stine and Amber Hinds.
WordPress Accessibility Meetups take place via Zoom webinars twice a month, and anyone can attend. Learn more about WordPress Accessibility Meetup and see upcoming events.
Listen
Mentioned in This Episode
- Go Theme by GoDaddy
- Anatomy of an Accessible Nav: Steve Jones
- Go Theme Testing Site
- ARIA: radio role
- Make WordPress Themes
Transcript
Welcome to episode 026 of the Accessibility Craft Podcast, where we explore the art of creating accessible websites while trying out interesting craft beverages. This podcast is brought to you by the team at Equalize Digital, a WordPress accessibility company and the proud creators of the Accessibility Checker plugin.
This episode is a recording of a June 2023 WordPress Accessibility Meetup where Alex Stine, Engineer & Accessibility Consultant, and Amber Hinds, CEO of Equalize Digital, performed a live accessibility audit of the Go Theme by Go Daddy and provided real-time feedback to their Senior Software Developers. WordPress Accessibility Meetups take place via Zoom webinars twice a month, and anyone can attend. For show notes, a full transcript, and additional information about meetups, go to AccessibilityCraft.com/026.
And now, on to the show.
Today I’m very excited to welcome Alex Stine back. I’m going to add a spotlight, Alex, so that you can pop up here. Alex is on the Core Accessibility Team. Though his day job is no longer in WordPress, but he is an engineer who specializes in development, and he’s also our accessibility expert today, who’s going to be sharing his knowledge.
Is there anything you want to say to introduce yourself, Alex?
>> ALEX STINE: Oh, not really. Introductions are overrated.
>> AMBER: [laughs] Well, we are thrilled to have you back, and appreciate that you continue to do this for us.
>> ALEX: I’m happy to be here.
>> AMBER: I’m also going to introduce today Courtney Robertson from the GoDaddy team. We will be testing the Go theme by GoDaddy, which I actually went and bought a managed WordPress-hosting plan with GoDaddy today. And then I was thinking, “I wonder if I should have set this up way long ago.” Because I’m, like, “I got to build one of these demo sites for us to test.” But it was literally two clicks. It’s been a very long time since I bought a hosting plan. [laughs]
>> COURTNEY ROBERTSON: There you go. Yes.
>> AMBER: And I was super impressed. It was, like, “Do you want to marry a website or start new?” And I was, like, “Start new.” And then it just took me this page where it’s, like, “Pick a template.” But I think they’re all from this theme. So I picked one, and then it installed, and then it dumped me on the edit screen for the home page, and I was, like, “Wow.” [chuckles]
>> COURTNEY: Yes.
Hi, folks. I am Courtney Robertson. I happen to know Amber and Alex pretty well; Alex perhaps more so. We hang out in the training team coffee hour.
I contribute a good bit of my work hours to the WordPress training team. We make the content that goes on “Learn.WordPress.org.”
Alex does poll requests and very developer things to help that website. Although, I’ll will say, this doesn’t work if the content is not also accessible. So I really appreciate hanging out with Alex. And when Amber asked for some plugins or themes that folks would like to have reviewed, I raised my hand on behalf of my employer at GoDaddy.
I’m a developer advocate. I talk to developers, I talk to our customers that are developers, I talk to our staff that are developers, and I try to get them to all speak human, [laughter] in whatever form that looks like.
>> AMBER: That is very good skill.
>> COURTNEY: Yes. Sometimes they like to speak code, and I try to get them to speak human. And whatever language that looks like, we work with that. So I’m really thrilled to be here and to work with this group today.
As Amber was saying, a lot of the managed hosts now have a pretty easy set up, if you’re looking for a managed hosting experience. We’re not the only ones doing a wizard install. But when you go through picking out a managed hosting plan, it will ask you a series of questions; and based on what you answer to that, you will get a semi-customized website. Meaning you still have to write some things, put some work into it. But it lays out quite a lot, and it doesn’t look identical to everybody else because of your answers and what you decide to fill it in with.
>> AMBER: Yes. So everyone knows you don’t have to be a GoDaddy to use this theme. It’s on “WordPress.org” for free, right?
COURTNEY: Yes, it is available on “WordPress.org.” It is also available if you do use the managed hosting. You could get it by heading off to “WordPress.org/themes/go.” A pretty short name for it. Just, “Go.” And it does some things that work also with CoBlocks, C-O-B-L-O-C-K-S. This theme and that plugin do some things together, but you could use either of them independently as well.
>> AMBER: Great. I’m going to just do two quick guidelines that we have for everyone, then I’ll stop sharing and I’ll let Alex take over the sharing so we can dive in.
I have two requests for everyone. The first one is that we like to give voice to assistive-technology users. So the goal of this meet up is really to trust Alex’s expertise. And people are welcome to share their own thoughts and those sorts of things in the chat, but it’s really important that we give our tester room to speak, and not argue with him.
The second thing is, on behalf of our plugin and theme developers, we always like to remind everyone that the goal of this is not to bash or to talk about how horrible something is. Because it takes a lot of bravery to be willing to get up in a public forum and allow someone to test something and maybe point out things that aren’t great. We hopefully also point out things that are good, but we just really want to make sure that people aren’t going and tweeting or saying negative things on social media, because the goal of this is really to applaud people’s efforts to improve the accessibility of their software.
I’m going to stop sharing. All right, I have stopped so, Alex, you should be able to share?
>> ALEX: All right. See?
>> AMBER: Awesome. And we can hear [inaudible]. Do you want to give us a little… [chuckles] For someone who hasn’t heard your screen reader before.
>> ALEX: I wonder how our captioner attempted to caption them.
>> AMBER: [laughs] It says, “Computer-generated voice.”
>> ALEX: All right. Yes, we can slow it down so people actually have a chance of understanding it. I like it at a comfortable 90%, but we can put it down at 40%.
>> AMBER: Yes. Would you be able to turn on the speech viewer?
>> ALEX: Oh, yes, we can try it. I’ve always had varying luck with this.
>> AMBER: That’s pretty decent. Would you mind if I moved it?
>> ALEX: You can certainly try.
>> AMBER: OK. I managed to request a [inaudible]. I might not be able to move it, but we’ll see.
No, that’s OK. I’ll stop remote control.
The only other thing I might request is, on your window, you’re zoomed pretty far out, and I’m wondering if you could resize your zoom to 100%.
Yes. Awesome.
>> ALEX: All right.
>> AMBER: What this is, for everyone’s background, is I just chose a theme, and I pretty much didn’t change any of the content or the styles at all. So this is how it got installed, by default.
I have some specific things that I’ll have Alex look at or that we could highlight, but I’m wondering if you wanted to just give an overall thought, or if there’s anything you want to point out to begin with that you noticed when you first visited the site?
>> ALEX: There were a few issues, but I haven’t found anything on this site that would actually prevent someone from using it. So that’s definitely a good step in the right direction.
>> AMBER: Yes, that’s awesome.
>> ALEX: All right, so we’ll get started. One of the things I always like to do is try and make sure the “Skip to main content” “Skip to content” links work. These are great for users who just want to skip the navigation and header section down to the main content. And as you can see, in here, it definitely works. Focus was moved past the main navigation.
Let’s go back to the main navigation, just to see what it’s like to go through it. So we’ll go ahead and call out that the “Skip to main content” link is not contained within the banner landmark.
>> AMBER: Is that good or bad, Alex?
>> ALEX: There is some debate about whether this is good or bad. Generally, we don’t want content outside of landmarks, but for something as small as this, it really doesn’t matter. I don’t think it would impede anyone from finding this link, but it’s a simple change either way.
The next thing I’ll call out is the fact that we have this search toggle before we have the logo.
>> AMBER: Yes. So if you hit “tab” again, you’re going to go to the logo?
>> ALEX: Yes.
>> AMBER: This was one thing I noticed about this, which is it doesn’t actually follow the visual order of the page. The visual order of the page is, “logo, navigation, search;” and they’re all in one row, with “search” at the far right. But you focused on the search, then it goes back to the logo on the left, and then it will go back to the navigation on the right.
>> ALEX: Yes. So definitely, the visual order and the focus order should be the same.
As far as the search toggle itself, there’s nothing, as far as Aria attributes goes, to tell users what might happen or what this does. Search toggle is fairly self-explanatory, but there’s nothing that communicates its state to screen-reader users.
Opening it, focus is moved, but this is where we get our second problem.
How do we end up at the navigation at the same form as here?
Now, I will call out that there is a “submit” button, which is good for the form itself. But what’s happened is, we opened the search form and the form is actually two; well, essentially pass the logo and pass the navigation links. Maybe five tab stops away from the trigger itself. So to close this search form is now going to be a task. We definitely need to remember that items in HTML should not be opening this far apart. It should be directly under the trigger. This is something that gets a lot of developers.
However, if we go back to the button, as I already mentioned, there’s nothing that tells the screen reader that the search form is open. Of course, if we activate the button, the search form does go away.
>> AMBER: And I think the expectation too is when that opens, because it’s like a modal to a degree, you would want to be focus-locked inside the modal, correct? So you shouldn’t be able to tab beyond the modal without closing it?
>> ALEX: If it is a modal, then yes, for sure. If it’s not meant to be a modal, then no.
>> AMBER: I think it is meant to be a modal.
>> ALEX: Then, yes, it should be marked up as a dialog. And in that case, there should be a “close” button, because there’d be no way to actually exit the modal.
I’ll repeat this because it’s good information. Escape keys are not a given, especially if you happen to be on a mobile device where “escape” is not available. There’s no way for the screen reader to click outside, and not all users understand that “escape” might actually close a dialogue like this. “Close” buttons are self-explanatory. They close.
>> AMBER: Yes. The escape key didn’t close it or it did, you said?
>> ALEX: My general point was to not rely on users’ knowledge of escape keys. In this case, it actually does close, and focus moves back to the trigger, so that’s good.
>> AMBER: That’s good. Yes.
One thing that I noted is that there’s not a visible label for a sighted person. It looks like it’s only using placeholder text. So if you were to type in there, you’d lose the search label.
>> ALEX: It has a hidden label. Interesting. So we’ll continue.
The nice thing is that an Aria attribute was used to mark the homepage link as current. That lets users know where they are. That’s nice.
The downside to this is, this navigation menu is displayed as inline list. Inline is a lot harder than block-level links, because you lose the ability to use your down-arrow key to navigate the links. When they’re inline links, you’re just getting this; where if you had block-level links such as what there is in the footer, every time you press your down-arrow key, you’ll get the next link.
>> AMBER: Hey, Alex, I actually added, maybe since I sent this to you, one item in a dropdown. I don’t know if you want to refresh the page to get the more recent navigation menu.
Yes. Now it’s there.
>> ALEX: OK, So it doesn’t appear that these have buttons to open the submenu. That’s not great. Selecting the service’s link goes to “services.”
Let’s see if we can open this via the tab key. I have no idea what that is.
>> AMBER: I put that text in there. [laughs] I called it “dropdown link,” which is why it said “dropdown link” to you twice. Sorry. I should have put a real word in there, but it’s fake.
>> ALEX: Well, anyway, this is a pattern we can talk about. Using the tab key to open submenus is a pattern that many people are moving away from, because in large-menu systems, this can get really, really, really complicated, and hard to use.
Picture if you had a mega menu that had multiple submenus; and every time you hit “tab,” you ended up in another submenu. This is why this practice is going away.
The alternative is to have a button right after the link that allows you to open the submenu, which is also nice because it allows the user to open the submenu if they choose to, and keep going if they don’t want to.
>> COURTNEY: From my perspective, there is a little carrot that points up or down, whether that is expanded or collapsed. That is to the right of the word. Are you saying that carrot is not acting as though it’s a button?
>> ALEX: That’s a visual icon.
>> COURTNEY: OK. Yes. So what we would want to do there is actually make that a proper button to expand the drop list?
>> ALEX: Yes. Because right now it only works on keyboard focus, and probably hover as well, I would guess.
>> COURTNEY: What would that be like on the mobile experience for you?
>> ALEX: Mobile experience? Well, mobile experience, it might not be possible to open the submenu. I kind of wonder.
>> COURTNEY: OK. It’s good feedback. It’s worth us testing.
>> ALEX: Because you obviously couldn’t hover on a mobile device, and you couldn’t focus it without actually clicking it.
>> AMBER: I think we might get to experience that, because in a little bit, I want him to go change the header options for this theme. So he’ll get the mobile on desktop, since there’s an option to do that.
>> STEVE JONES: This episode of Accessibility Craft is sponsored by Equalize Digital Accessibility Checker, the WordPress plugin that helps you find accessibility problems before you hit publish.
A WordPress native tool, Accessibility Checker provides reports directly on the post edit screen. Reports are comprehensive enough for an accessibility professional or developer, but easy enough for a content creator to understand.
Accessibility Checker is an ideal tool to audit existing WordPress websites find, accessibility problems during new builds, or monitor accessibility and remind content creators of accessibility best practices on an ongoing basis. Scans run on your server, so there are no per page fees or external API connections. GDPR and privacy compliant, real time accessibility scanning.
Scan unlimited posts and pages with Accessibility Checker free. Upgrade to a paid version of Accessibility Checker to scan custom post types and password protected sites, view site wide open issue reports and more.
Download Accessibility Checker free today at equalizedigital.com/accessibility-checker. Use coupon code accessibilitycraft to save 10% on any paid plan.
>> ALEX: OK, so we’ll go back home.
Now, one thing I’ll call out is the site title as a heading one. This is another practice that I hope is on its way out. Heading ones should be the first heading on the page and should also be in the main content. The only exception to this rule is if the site title is a heading one, and then your main title is a heading two. But that’s not the case on this website, because the main site title is a heading one, and the title of the page is also a heading one.
I’m not sure if it’s really worth calling out any of this content. If it’s all sample, and editable through the editor.
One thing we can take a look at is the footer. So these are all block-level links down here, which is much nicer for navigational reasons.
The links announced that they’re going to open in a new tab. So all in all, not a bad first impression.
>> AMBER: Yes. So that “link opens in a new tab” is something they’ve probably coded in. Is this one of your custom blocks or something specific to the theme? So that’s good.
>> COURTNEY: I would think that that’s specific to the theme, and it’s got the new tabs because it’s as if it’s a construction business website, and that is to go connect with those people on their social media platforms, which makes sense why you might want the new tab. But I also like that it’s labeled.
>> ALEX: There is one thing to note. We can explore a little bit on Verbosity. Verbosity is the idea that we’re getting too much information, and this can actually lead, funny enough, to a less accessible experience when we’re trying to be accessible. I know it’s a catch 22 a lot of the time.
What we have to ask ourselves as developers is, what do we really give users by calling this a horizontal navigation? Seems like more appropriate naming would be “main navigation”? But the problem with themes today is, most of these landmarks are generated by user-entered names. So while this makes sense to us as admins on the backend, what users get on the frontend is not really preferred.
>> AMBER: Yes. I’m curious. Real quick, I’m going to go look and see if that’s actually what that menu… What might be ideal in that, Courtney, is if… So it looks like that menu is actually in the WordPress admin, named primary menu, which isn’t super great, because it shouldn’t have the word menu in it, as that would be a default.
Although, it might be nice on the nav to just pull the name that someone has named it in the admin; and then that way, they could name it whatever they want. Unless we think there’s risk of user error there [chuckles]. I don’t know.
>> ALEX: What we should keep in mind is, there’s only need for an Aria label on a navigation if there’s more than one in the header. So if there is a social-link section, and a main navigation, and a “contact us” group in a links navigation, then yes, that’s where Aria labels clear things up. But if it’s just a singular main navigation, then Aria labels just serve to make things more verbose.
>> AMBER: Yes. Alice asked, “How do you know the difference between the block level and inline?” But I’m not 100% certain if this is related to the nav menu, so Alex, feel free to add extra context.
>> ALEX: That comes from the display property in CSS. You either get “display inline,” “display block;” I think we also have “display inline block.” I don’t know. It’s been a long time since I’ve looked at CSS. But block-level links are nice, because every time you press your down-arrow key, it’ll move to the next link. If you have inline links, then it’s just treated as one big inline element, and it can be harder for users to navigate to the link that they want.
>> AMBER: OK.
>> ALEX: I think we could look at the contact page next. So here we have our name field. And this label is not associated with this field. So that is an HTML error.
>> AMBER: Yes. I’m wondering if we can inspect it and look at what that is.
>> ALEX: Yes.
Does it not have an ID on the field?
>> AMBER: Actually, I can’t see your Inspector. So give me one second, I’m going to just look at it in mine.
>> COURTNEY: As I’m looking over, inspecting on my own, it’s coming in from the CoBlocks plugin. That’s where they work together, in a sense. So the form is actually part of the CoBlocks plugin, and the design of how it displays is Go theme.
>> AMBER: Yes. Actually, I’m looking at this, and Bruce also pointed this out in the chat. The input does have an ID; the ID is “name.” The reason why the label is not connected with it… Courtney, I don’t know if you’re familiar enough with HTML when you talk to developers. [laughs] But if you wanted to tell them, the label, it has a class, but it doesn’t have a “four” attribute on it. So it should say, “four equals name,” and then that would connect it to the field with the ID of name.
>> ALEX: Yes, that would do it.
>> COURTNEY: Yes. That makes sense to me.
>> AMBER: I think all these labels are that way, actually.
>> ALEX: Actually, some of them were. That’s the weird thing.
>> AMBER: Because the email one looks like it doesn’t have a label also. [inaudible].
>> ALEX: Yes. But we actually get the label read, so let’s see. Inspect this one. Oh, it has an Aria label on it.
>> AMBER: Which one? I’m trying to figure out which one has an Aria label.
>> ALEX: The email field.
>> AMBER: I don’t know why this is and I don’t know enough. There are multiple inputs that are hidden. Maybe that’s part of a honey pot or something.
>> COURTNEY: That would make sense.
>> AMBER: When I inspect this, I see a label not associated, and then I’ve got a hidden input for email. But I’ve got, like, two hidden inputs, and then the visible one that I can see. But the visible one has an Aria label on it for email. So that’s why that one works even though it doesn’t have an associated label, because it has Aria label on it.
>> COURTNEY: OK.
>> ALEX: Yes. So for the CoBlocks team, this needs to be revisited.
>> COURTNEY: Conveniently, the CoBlocks team is pretty much the same folks doing the Go theme. It’s a small crew that works together quite closely on all of those things, as well as the wizard that Amber walked through. And so these pieces are often designed to go together. But it’s great feedback.
I will ensure that I get lots of notes out of this replay and make sure that the team knows.
>> ALEX: This is what I would often refer to as something that’s a little overly engineered. Simplifying will make the code a lot cleaner and experiences better.
OK. It does look like having the message field works as well. So having “contact us” button, which is great because it actually tells you what you’re going to do. We can all argue about button text though; that’s always a fun one.
So services page?
>> AMBER: Yes.
>> ALEX: Services starts off with a heading one. So we have out-of-order headings. That should not be a heading four. That should definitely be a heading two. So should that one. And this one. And that one. And that’s all the headings on the page.
One other thing we can look at on this page is to see if there’s any redundant links.
So screen readers, the reason why we don’t like “learn more,” “read more,” “click here,” text of that nature is because of this. This is the elements list, which gives you an overview of all the links on the page. [inaudible].
Apparently we don’t have any links on this page, so this isn’t really going anywhere. But you can imagine how this would look if I just had about 10 “learn more” links in a row.
>> AMBER: Yes. So the fact that this doesn’t have that is good?
>> ALEX: Yes, that is very good. But that’s also not really a theme thing. That’s more of a content piece.
>> AMBER: Yes. I think something that’s interesting about this for theme developers is, when they’re doing dummy content, that’s a way that they can really guide users into making the right choices? Like you point out those heading four; sure, anybody could change those, but a lot of users, if they didn’t know, they probably wouldn’t. They would just keep the heading four and change the text of it to whatever it matched for their business? But I think also guiding them, like, if you don’t put a bunch of “learn more” links or whatever that might be, then that might help them not to do that.
>> ALEX: Very true.
>> COURTNEY: Alex, near the top, there was a heading, two paragraphs, and then below were those H4s. In between those, there was an image. Did your screen reader tell you there was an image? And should we tell folks there’s an image there? Since this is a construction company, it’s a picture of a kitchen countertop arrangement.
>> ALEX: It says there are no graphics on this page, so that must be explicitly hidden.
>> COURTNEY: OK. I don’t know that it’s particularly of value. So that’s one of those questionable spots. How do you know when it’s too much information if I write a really long alt text for you versus just there’s a picture of a kitchen countertop or two in that image?
>> ALEX: For me, I like alt text that adds value.
>> COURTNEY: OK.
>> ALEX: This might not add value. I don’t know.
>> COURTNEY: It could be a little subjective, I guess, is what I’m asking.
>> ALEX: Very much. Very much so.
>> AMBER: I think something interesting to point out about this from a theme or a plugin developer’s standpoint is… And we’re going to circle back to this on what it means to have the accessibility-ready tag. All you need in the accessibility-ready tag is for people to be able to add alt. You don’t necessarily have to add alt on all of your images, because you’re assuming people might replace them. And since these looks like normal image blocks to me, I think the WordPress “add alt” functionality is there, so it would pass that.
What I’m curious about is, if someone who is blind were choosing this theme, would it be better for them to know there’s images here that convey this thing?
Let’s say they have a construction business, would you, Alex, want to know these are the kinds of images that are being used on their services page, in case you wanted to go find something similar or decide whether or not to keep them?
>> ALEX: I don’t think it would hurt either way, because most people see demo content as demo content. But like I said, I don’t think it would hurt anyway. If you wanted to add a quick description that just says what it is, then I don’t think it would hurt anybody.
>> AMBER: If you’re editing this page, you’d encounter the images in the editor, and then you’d know, “Oh, there’s an image I have to replace or delete if I don’t want.”
>> ALEX: Yes.
>> AMBER: Cool.
>> COURTNEY: That helps clarify.
>> AMBER: Another thing about that section down below, and this is where it gets funny, because if they think the H2 is too big, then they either need to change the H2 size in the theme. Or they could add a different H2 above that’s like, “our services,” or something, and then make those H3s.
>> ALEX: Yes, something like that.
>> AMBER: Yes.
>> COURTNEY: That’s where WordPress gets kind of interesting, as it might only be a site-editor thing, which means it doesn’t make any sense for Alex, unfortunately. But there are ways of adjusting the visual size that as long as you still follow the proper order of H1, H2, H3, if it’s a visual size issue, they could still make those H2s and change what the visual size looks like. That would be a better direction, probably.
>> AMBER: Yes.
>> ALEX: Probably so.
>> AMBER: I think it might be interesting to have you log into this site, but there are two questions that I wanted to touch base on real quick.
So Verawati [phonetic] asked, “In what case would you prefer an inline link?”
>> ALEX: Never.
>> AMBER: OK. Do you want to add anything to that or not really?
>> ALEX: No. Just never. Inline links, they’re block level by default; they should stay that way. There’s a reason why things are default. [chuckles].
>> AMBER: Yes. When you have list of links. So the only time really is if it’s like in the middle of a paragraph, right?
>> ALEX: Yes. If it’s in the middle of a paragraph, then I think it’s going to be inline by default, because you start getting to talk about paragraph styling then, and I think paragraphs are always perceived as inline.
>> AMBER: Yes. But otherwise, you just avoid it at any cost, he says. Or they said.
>> ALEX: Yes.
>> AMBER: Cool. For the next question, Laura asked, “For a blogger that has three columns with their latest blog posts, is there a better way to do ‘read more’ to continue reading the blog? Or can you explain a little bit more about the best practice for those ‘read more’ links in themes?”
>> ALEX: In all honesty, “read more” links are not really needed, especially if your titles are clickable. But everyone loves their “read more” links, so “Read more about post title” is the way I would go about that.
>> AMBER: And that doesn’t have to be visible, right? So it could be either an Aria label or screen-reader text that’s added after the “read more.”
>> ALEX: Correct. It’s always best to try to keep your text as visible as you can, because you never know which audiences it may help. But those are alternative solutions if you don’t want the visual clutter on a link like that.
>> AMBER: Awesome. Do you want to log in and go to the customizer?
>> ALEX: Copy my ridiculous auto-generator password.
>> AMBER: Yes. So nobody can hack us right now. [laughs]
>> COURTNEY: We’ll have to change that after the recording is done.
>> AMBER: Yes. When I move my personal blog here, I should delete that user is what you’re saying? [laughs]
>> COURTNEY: Yes. Good security practices.
>> AMBER: So do you [inaudible] to the customizer?
>> ALEX: It has been so long since I’ve been in the customizer.
[laughter]
So long.
>> COURTNEY: But In a way, it might be happy.
>> ALEX: I guess we’ll find out.
>> AMBER: There were a couple of things I wanted to check here that are specific, like, they’re being created by the theme. The first one is the header. There’s an item called header, where you can set up how your header looks.
>> ALEX: “Header”?
>> AMBER: Return or [inaudible].
>> ALEX: OK, I’m just going to point this out right now to you. Please ignore the terrible heading structure in here. It’s probably been ten years since anyone changed this.
>> AMBER: And this is not their fault. [chuckles] This is “WordPress.org.”
>> ALEX: Yes. This is Core.
Well, that was fun.
>> COURTNEY: I see a problem here. Yes.
>> AMBER: Can you guess [chuckles] what I was getting at?
>> COURTNEY: Yes. Yes, I can. It doesn’t describe anything about the preview images that we get to see.
>> AMBER: Yes. So it’s actually functional, like, I think you could change it to a different one. And I think you should change it to… Hold on. I can’t totally see it all because of the speech viewer, so I might need to customize myself as well.
>> COURTNEY: So if Alex were to select one of these, the only way Alex would know what he’s selecting is to go to font of site, then have a screen reader go through this each time he’d pick a new one?
>> ALEX: Yes.
>> COURTNEY: Well, that’s a little tedious process. Yes.
>> AMBER: What these look like visually, Alex, is they’ve been styled like buttons. And they have something like blocked-out grids that show you the position of the search icon, the position of the logo, and the position of the navigation. So you could have your logo on the right or on the left. You could have your “search” on the left, and your logo in the middle, and your navigation on the right. There’s a bunch of different options here.
So I’m curious, when you have something like this, how would you like to have that described? And is there a good solution for this that tells someone?
>> ALEX: Good solution? Probably not. A reasonable solution would probably be to include descriptions. That way, you understand what you’re selecting. Just as you said; a search button on the left, logo in the middle, menu on the right. That at least gives you an idea of what you’re selecting.
>> AMBER: Yes. So the one thing about this that is a little interesting, because we saw before that the focus order didn’t match, I think for a screen reader user, regardless of what the design is, they’re going to get that exact, and I think that’s why the focus order doesn’t match. [chuckles] Because I think it’s just like they’re maybe using CSS to reposition these elements and they’re not actually changing the order on the page, which was why we saw that issue in the beginning.
>> ALEX: Yes. That, unfortunately, is an accessibility violation.
>> AMBER: Yes. So when the different headers are changed, they would need to actually change the order of the elements in the DOM, not just use CSS to reposition them.
>> ALEX: Yes.
>> AMBER: For now, why don’t you choose header four.
OK. And then if you can go back out of the header styles, but don’t close the customizer.
The one that I thought was also worth looking at is the social.
>> ALEX: “Select color.”
>> AMBER: First of all, the ability to set your links, it sounded like that was all good. Is that correct?
>> ALEX: Yes.
>> AMBER: Awesome.
>> COURTNEY: I’m impressed that we have Macedon in there.
>> AMBER: [chuckles] Yes.
[crosstalk ]
>> COURTNEY: Yes.
[laughter]
>> AMBER: I keep trying to use Macedon, but nobody engages back, so I’m, like, [inaudible].
I don’t know how much this is actually their color picker versus their customizer color picker. So I don’t know if it’s worth looking at, but you could look at that. I was just curious [inaudible] fields.
>> ALEX: Oh, that’s always fun. Color hex codes. Yes, this is not accessible at all. [chuckles]
>> COURTNEY: I’m not sure if that is something that is custom to the theme or not. It’s to select the color for your social icon. And I don’t recall if your screen reader read that when you landed on “select color.”
>> ALEX: Yes, it did.
>> COURTNEY: OK.
>> ALEX: I’m pretty sure this is all part of the ancient customizer code.
>> AMBER: Yes. I don’t know that you all have control over that. What I will say is, I think the fact that he could enter a hex code is probably the workaround for the fact that the actual color picker itself won’t work.
>> ALEX: Yes.
>> AMBER: If he were to have hex codes that he had agreed on with his designer, he could go enter them that way.
>> COURTNEY: Yes.
>> ALEX: Yes.
>> AMBER: Do you want to go back again to… Hold on, I was trying to figure… Oh, site design. [inaudible].
>> ALEX: I’ve always wondered why we’ve never forced these to be in alphabetical order? Because we can’t have nice things.
This pretty much is the same thing we just discussed for the header.
>> AMBER: Well, this is slightly different because it actually doesn’t do anything different for sighted people either.
>> ALEX: Really?
>> AMBER: I just see a radio button and the word trendy. I have no idea what would happen if you check that.
>> COURTNEY: Go ahead and check it.
>> AMBER: [crosstalk ] change the font.
>> COURTNEY: Yes. It does more than that. You have five radio buttons in order there…
>> AMBER: And it changed the color options.
>> COURTNEY: Yes. Beneath it, there is a color scheme near the bottom. And so the color schemes that are displayed after the next two radio buttons, Alex, can you go down and see if it reads to you what the color schemes are?
>> ALEX: Yes, I can read them. I just have no idea what they are.
>> COURTNEY: Right. So there are three colors that are displayed there as, you have one that is a primary, one that is an accent, and one that’s somewhere in between. I don’t know what the technical term is. It might even be further down. But it gives you choices of paired colors, as well as font styling that goes with that. So above, where we had those five radio buttons to select, each of them offers you four different color schemes, and each of those five radio buttons has a two-font setting option. So you’ll have one font probably for header, and one for body text.
If you pick “trendy,” which is what we’re on, it gives you “trendy: font heading,” and “trendy: body text,” whatever the fonts are that go with that.
>> ALEX: Yes.
>> AMBER: It might be nice on these to be a little more descriptive. For example, plum could say, “dark purple,” “royal purple,” and “gray” or something. Plum and avocado are maybe a little bit more guessable versus steel or champagne.
>> ALEX: If we’re being totally subjective here, the customizer largely wouldn’t matter for someone who’s never had sight either, because nothing in here they would be able to understand. If you’ve never seen color, you can’t have color explained to you.
>> COURTNEY: But there is some logic in understanding color theory, and knowing that purple is associated with royalty. And if your brand aligns with royalty or things like that, it might be of interest. Even though you don’t necessarily know what purple is, if you’ve been told, “Purple is the color of royalty,” and plum is [crosstalk ] of football.
>> AMBER: Color green is the color of nature?
>> COURTNEY: Yes.
>> AMBER: So if you’re blogging about hiking, you might want a green blog?
>> COURTNEY: Yes. There could be something to that effect.
>> ALEX: Yes, it’s a fair point. It would probably apply more to the, “I work for a company, and they want me to do this,” more than it would the, “Here’s my own website. I went in here to change this.”
>> COURTNEY: Right. Although, I don’t know why the champagne looks slightly less than a red. It looks like a really hot pink, but not quite red. I’m not sure why that’s champagne. [laughs] But, sure, it’s champagne.
AMBER: Yes. The other thing that I wanted to point out here is that this is an area where if you wanted to get the accessibility-ready tag, one of the requirements of the accessibility-ready tag is that all of the default color schemes that are available in the theme pass color contrast at a minimum of AA.
>> COURTNEY: OK.
>> AMBER: So if you were to go back to traditional, Alex… That’s where we were before, I think, maybe on this theme. But the apricot has an orange that fails color contrast with white text. The bronze, if you were to select that as a gold, that would only pass if there was black text, not white text. So this would be an area where you all would need to go through all the default color schemes and make sure they all pass, so that if someone didn’t change the colors, it would pass.
Obviously, people can make changes and break things, but that’s a requirement for accessibility-ready tag.
>> COURTNEY: Good to know.
>> AMBER: And I’d say for the most part, most of your templates did pass. There were a couple I saw that were, like, pink with white text, like, light pink, and then, like, an orange. But for the most part, most of them did.
>> COURTNEY: There’s one area that I would love to have a quick look at, if we could, inside of creating a page. Would we be able to go in and create a page?
>> AMBER: Yes. Could you publish your changes before…
>> ALEX: Ugh. So bad. This whole area gives me PTSD.
>> AMBER: It’s going away. In full-site editing, there is no customizer.
>> COURTNEY: Yes.
>> ALEX: That’s even worse.
>> COURTNEY: Some folks were asking about, “Hey, I’ve never seen the customizer.” And that’s the experience that new-to-WordPress people have. They may never see the customizer. If you know the address to type in after WP-admin, you could get yourself there. Or if you install a plugin, like, I used to work at the events calendar, and that plugin has settings that are in the customizer. You still need to go to the customizer for some of those things, because it takes plugin companies a long time to make that kind of a pivot.
So in customizer, you still might bump into things that are there. And inside of site editor, things are not particularly accessible.
I will say that I know in the near future, we’re hoping to have a version of this theme that is site-editor compatible. They will be two distinct themes, and I think that will probably be the best way forward to continue being accessible with the theme. I just hope that both of the feature sets are roughly comparable.
>> ALEX: Yes, because we all know it won’t be at the end of the day. Eventually, it’ll drop off. Even given a company’s good intentions, it always drops off.
>> COURTNEY: Yes, I understand. All right.
>> ALEX: So add a new page?
>> COURTNEY: Yes, I want to see. I believe that it’s there.
I feel like Alex has this memorized.
>> AMBER: This is how we know that Alex is really good at WordPress. [chuckles]. I’m pretty sure you added a new page faster than I would.
>> COURTNEY: Yes. I think maybe he’s got some [inaudible] working that we just don’t know about, given [crosstalk ].
>> ALEX: No, never. I’d never do that to anyone. That would be so bad.
>> COURTNEY: But you can with me.
OK. So what I wanted to indicate that is different. Now you’re in a block editor experience for a normal page, Alex, and I know that could already be problematic. In the top right corner, what we see to the right of the “publish” button, it looks like a painter’s palette as the icon. And if we can somehow get over there to select it, some of the very same things that we were looking at inside of customizer are available here as well.
Yes, that.
>> ALEX: “Site design.”
>> COURTNEY: Yes.
>> ALEX: I had no idea this was here.
>> COURTNEY: I thought so. What happens is that, folks, it’s a lot for people to learn site editor. And as the Go theme was coming together, they were gradually stepping people through the experience of using a block editor and not imposing upon them the full site editor experience.
What you see under the site-design option is much of what you get in customizer, but it’s just going to be laid out a little bit differently here.
Do we have any pages by the way, Amber, already made that have content on them?
>> AMBER: Yes, the demo ones. So if you wanted to go back to the pages list, Alex, you could go into, like, the home page or the [inaudible].
>> COURTNEY: Yes. And then the website design. And then you have the services page there. It’s directly underneath, according to our view. Are you able to get into the design [inaudible]?
>> ALEX: Here’s what gets fun about Gutenberg. I mean, if we’re going to bring it up, I’m just going to let it spill now.
>> COURTNEY: Do it.
>> AMBER: Do it. Yes, yes, yes. [chuckles]
>> ALEX: All of these tabs up here are from a package that us developers call the WordPress Interface Package. And essentially, this was one of the very first React packages ever created for Gutenberg. So this means all these tabs are several, and I mean, several tab stops away from where they actually interact. This is the exact opposite of what you should do on a website. Don’t ever do this.
>> AMBER: I actually have a question for you. So that site design has replaced what is visually to us, the sidebar menu, where you’d have your page options or your block specific settings. But you toggled it open with a site-design toggle button.
This is coming in, it looks like to me, out of the CoBlocks plugin. Could the CoBlocks team, say, when this is toggled open, they could add JavaScript that shifts your focus into this in a way that they could almost treat it like a modal? Would that be acceptable? And just, like, you toggle it open, now it puts you right in that site-design toolbar so you don’t have to go find it?
>> ALEX: That would be acceptable, but that’s based on if they even have knowledge of this in their code, which they might not, because that’s the reason it’s not fixed in Core.
>> AMBER: OK, because those two pieces are just so separate, and they’re loading this into something that Gutenberg is doing without really creating their own custom thing.
>> ALEX: Yes. These sidebars get loaded in a totally separate area than where these trigger buttons happen. It’s awful, but it’s a repeat problem throughout the entire Gutenberg code base.
>> AMBER: It’d be interesting to see if they could do that, because I feel like that might help solve that problem.
>> ALEX: Best thing I could think to do is try to detect the conditional rendering, but it would be tricky.
>> AMBER: Yes. So this is the same thing. You can choose your design style and your color palette. Do you want to explore it a little and give us any feedback?
>> ALEX: Here’s another thing where things really fall off the rails. “close plugin” button, that really tells me a lot.
>> AMBER: What does it tell you?
>> ALEX: Nothing. I don’t know why I’m getting “close plugin” when this is the site-design tab.
>> AMBER: Oh, yes. In your page edit screen. It’s confusing that it’s called plugin.
>> ALEX: There’s massive context issues. So you do one thing, and you expect one thing, and you get another.
>> AMBER: Got you. OK.
>> ALEX: Here’s our design styles. It’s expanded. And as you can hear, it doesn’t tell me which one of these is selected, so I don’t even know which one is currently active. And I don’t know if that’s something you all can fix or if this is a Gutenberg problem.
>> AMBER: One of them has a different style, so I’m assuming there’s a class or something on that one that it selected. So probably they could put [inaudible] on it.
>> ALEX: That would be my guess, yes. That’s why I’ve always been so hesitant to do an audit with Gutenberg, because we don’t know if this is a component that they are; A, misusing; or B, messed up in Core; or C, this is a totally custom implementation.
>> COURTNEY: Yes. And all of those are very valid concerns that I’m sure I can at least take back to the team and have them look at what they can look at, and maybe submit some issues inside of Gutenberg as well.
>> ALEX: For sure.
>> COURTNEY: The Gutenberg repos. So the five radio buttons that we saw inside of customizer are the same five options that we’re seeing in this design styles. And then below those design styles are the same color palettes that we were getting.
>> AMBER: I’d like to say something about that, actually. In the customizer, they were labeled as radio buttons, which is what they are. You can only choose one. Here, they are just labeled as buttons. They’re not an input with a type of radio. If I was doing accessibility audit for a client, I would flag that as a failure, because it’s not telling them that…
For all he knows, he could select three of these buttons. So if they could make them an input of a radio like they did in the other place. I don’t know. Can they do that? I think that would be better. It would communicate better that you can only choose one of these things; and then that way, also being able to indicate which one is currently selected.
>> ALEX: For sure.
>> COURTNEY: Which is currently selected. Definitely valid point.
Between the heading design styles, there’s a paragraph before you start selecting them. If in that paragraph of text, they said something like, “choose one,” would that…
>> AMBER: No, it’s…
>> COURTNEY: You’d want it as a radio button? OK.
>> AMBER: Or there’s an Aria role for this.
>> COURTNEY: OK.
>> ALEX: The reason why we can’t have this is because Core developers had made the choice that screen readers should be sending native keyboard events to the application. And this means screen readers can’t operate in a virtual mode. And when you don’t operate in a virtual mode, you don’t get paragraph text. So it would cause too much of a havoc with changing context.
>> COURTNEY: Got you. Thank you.
>> AMBER: I think sometimes screen-reader users, when we’ve done testing in the editor, they end up in forms mode, and that skips a lot of that stuff too. I’ve seen that happen for people using JAWS; it’ll automatically put them into forms mode.
>> ALEX: Well, that’s the mode you have to be in. Because if you’re in a virtual mode, then all your keyboard input isn’t intercepted by JavaScript, which makes the editor useless.
>> AMBER: Courtney, I put a link to the radio role.
>> COURTNEY: OK.
>> AMBER: Which could be a way to keep these as a button. If they have to be a button and they can’t be an input, where you could define that it’s a radio, and then you can use Aria checked to say “true” or “false” on them.
>> COURTNEY: Got you.
>> AMBER: Also, Alex, Paul said in the chat, “This is some fantastic insight into UX symbols.”
Fembe [phonetic]: “Makes me think Gutenberg should be renamed Frankenstein, though.”
[laughter]
I thought you’d appreciate that. [laughs]
>> ALEX: Yes, I’ve had some brainstorming sessions of similar types, but [inaudible].
>> AMBER: I have an actual usability question here that’s not clear to me: If he changes something here, is it going to change it only on this page or for the entire site?
>> COURTNEY: It would change it site-wide.
>> AMBER: OK. I guess it says, “site design,” but me, as just a WordPress user, I don’t expect to see full-site design changes when I’m editing a single page. So obviously it’s not an accessibility problem. I find that a little confusing.
>> ALEX: I disagree. It actually is. This goes back to our whole conversation about context. But this even confuses sighted users. This should be telling the whole community something.
>> COURTNEY: Yes. So that’s the thing. Inside of the regular WordPress editing experience, you can be in a post and you can jump into customizing your template. You could jump into changing a color somewhere and then push globally. Although, it says “apply globally.” So I think that calling out some additional wording in that design styles to note that this would be a global change would be helpful.
Maybe avoid the word global. Avoid the word “global change” for the DIYer crowd that may not be so website-builder oriented.
>> AMBER: Yes. Yes. I mean, even in that paragraph, where it just says, “Customize your fonts and colors to get the perfect fit,” you could literally say, “This will change your entire site,” or, “Customize your fonts and colors for your entire site.” If you say something like that, that’s really explicit in a way that I don’t totally get.
>> COURTNEY: Yes. When they began building the Go theme, it was deliberately a hybrid approach to what has become the site editor experience. So they were taking some steps to simplify the design styles that you have available instead of sending someone through the site editor’s version of where these settings are kept. Because with the help of how many users that are on this theme, classic theme, it’s one of the largest installs because it’s part of our managed hosting. Although many people are using it that aren’t part of our hosting plan at all, but it’s still a very widely-used theme. So because of that, they were trying to become a gradual step towards the site editor experience.
However, I have heard that we’ll be releasing a separate theme that is site-editor compatible. I’ll keep you posted when we have that. I’m sure Alex can’t wait.
[laughter]
I joke. I joke.
>> ALEX: Yes. I’m sure everyone really doesn’t want to see that audit. [chuckles]
[laughter]
>> COURTNEY: If the frontal side is good, then I’ll let you take a look at websites you could browse, but I am not ready to send you into the site editor backend.
>> ALEX: Oh, why not?
>> COURTNEY: No, not prepared for that. Because we got to get the Core fixed first. And I know Alex is raising an office this for that.
>> AMBER: Yes. Do you have any other questions about this site-design sidebar? Is there things further down we should look at in it?
>> COURTNEY: Alex, could you scroll down? I’m thinking maybe not.
>> ALEX: Well, we have our color section here with the custom, which makes no sense.
>> AMBER: Oh, yes. So that could say something, like, “Choose custom colors” as the Aria label on that button instead of just “custom?”
>> ALEX: Yes. That might be a little more clear button. Then we have an unlabeled button.
>> COURTNEY: [chuckles] That’s the color fonts.
>> AMBER: Got you.
>> ALEX: And now we make it the fonts. “Custom” again. So no context.
>> COURTNEY: Beside it, it says, “Font pairings.” So you’re just getting the word custom there, got it?
>> AMBER: Yes. The button itself needs an Aria label on it that gives that context. Because otherwise, how does he know what’s the difference between the “custom” custom?
>> COURTNEY: Right.
>> AMBER: Yes.
>> ALEX: So then we have something rather interesting. I have no idea what this is supposed to be.
[laughter]
>> COURTNEY: Takes you right back to typing class.
>> AMBER: OK, here’s what is interesting about this. In this particular element, there is a div; and inside that div, there are two paragraphs. One has the name of the font. So the first one says, “Crimson text,” the second one says “Hebo,” the third one, which you can’t see on your screen says “Trocchi.” And then the second has that “quick brown fox” sentence so we can see what the font looks like.
Then inside that, for the one that is selected, there is a button that allows you to edit the font size. But I think they’re treating this div around it to select the fonts as a button. Because with a mouse, I could click on where Alex is right now, “Hebo.” But I suspect that if you wanted to change to that, Alex, you might not be able to. I’m not certain.
>> ALEX: And the entire editor just lost focus.
>> COURTNEY: Yes. That could be a combination of the site editor itself.
>> ALEX: That’s why I caution people though, because unless we opened up a code editor right now and looked at the React code, we’d have no idea. But more than likely, this is a Gutenberg bug.
>> COURTNEY: Yes. Then it would lose focus.
>> AMBER: Yes. So looking at this, actually, I inspected further down, there is a button around that, but it probably doesn’t make sense to have it. I’d put like an “Aria hidden” on the “quick brown fox.” It doesn’t need to read that out. Because then it would say, like, “button hebo,” “button trocchi,” like, it would name the font.
Although, what is weird is that the edit-font-sizes button only appears after you make a selection on the element.
>> COURTNEY: I feel like I also want a way of describing the font. Like, this is a cursive style, or this is a thick font, or something that identifies a little bit more than just the name of the font, that gives idea to what it is. Or if it’s Serif or Sans Serif even.
>> ALEX: It might not be possible. If the font picker, for example, doesn’t have the correct attributes for developers to pass this data into, then there’s no way that it could easily be done. A lot of this stuff probably comes out of the WordPress Components Package, where all this stuff is supposed to be done for you. And a lot of it’s received very good accessibility and it’s just being used incorrectly; or it’s received bad accessibility and has not been used correctly, making a double-bad situation.
>> AMBER: I think this is unique to this theme. I haven’t seen this in other core elements, the way this is done. Or to CoBlocks. It might come out of CoBlocks instead of the theme, potentially, because there’s a CoBlocks wrapper around the entire site-design element. And there’s only ten fonts here that you can choose from, unless you add a custom. So I think it could be reasonable to provide a description of each font. It gets hard if you have like 150 of them, [chuckles] and there’s only slight differences, right?
>> COURTNEY: Yes. But this, again, very much designed for folks that are not going to go register their own fonts or upload additional fonts. Pick among this shortlist.
>> AMBER: Yes. I’m curious, though, on the fact that we have additional buttons that only appear after something is selected. So if you were to go down to Trocchi and select that, I think it will reveal a button to you after or inside that button. I’m curious what that experience is like.
>> ALEX: No. What would happen is that it’ll lose focus again. We can try it.
How doesn’t it have these? Oh my gosh, this is a mess. It just shows, [inaudible]. It’s still a mess.
Oh, so we get a…
>> AMBER: Yes. You select that one.
>> ALEX: And we lose focus again.
>> AMBER: I think the reason why you lose focus is because the selected element stops being a button and becomes a div.
>> ALEX: Yes. I’m sure it’s part of React’s re rendering.
>> AMBER: I think they might be. Yes. It’s because they remove the button that you…
Again, these should almost be like radio buttons, where you can only choose one. And then if they behave like a radio, he’d be able to go through them and they would keep their input and they wouldn’t become a div once it’s selected.
>> ALEX: This is the future of the internet though. Just ask any sighted designer.
>> AMBER: Yes.
>> ALEX: This here is our edit-font-sizes button.
>> AMBER: We’re getting close to the end of the meetup, and I really want you to go back and check out that mobile menu on the front end.
>> ALEX: Yes, let’s do that.
Let’s zoom this in. And then we’ll see if it got a mobile menu [inaudible].
>> AMBER: You don’t even have to because when I had you save, you changed it to one where you can only see the mobile menu on desktop.
>> ALEX: All right, then. So here’s our search toggle.
>> AMBER: It’s in visual order now.
>> ALEX: And then we get a button collapsed menu, which we can expand it, and says when it’s open, so that’s nice. But there’s no menu, so that’s not nice. The menu appears in the HTML above the trigger. So this does not follow the correct HTML DOM structure.
>> AMBER: Just to make sure I understand, Alex, you opened it and you hit “tab” or your arrow keys expecting to go to the first item, and instead it took you to the H1 behind the menu?
>> ALEX: That’s correct.
>> AMBER: And then you had to go backwards on the page to actually get to the menu.
>> ALEX: Yes.
>> AMBER: So that would obviously be something we’d want to fix.
>> ALEX: And from our earlier discussion, there is still no button to open the submenu. So on a mobile device, there would be no way for someone with a screen reader alone to open this submenu.
>> AMBER: Yes, I think it’s only visible on [inaudible].
>> ALEX: In this case, you’d probably have to select the icon, I guess, because selecting that, of course, reloads the page to the services page.
>> AMBER: Yes.
>> ALEX: Mobile menu and search form need the most work for this theme by far.
>> AMBER: We teased a little that we were going to talk about accessibility-ready. And I know we pointed out some problems, but I’ll say I think as far as getting this to the point where it could be approved for accessibility-ready, it’s actually not that far off.
When I first loaded this, I was kind of impressed. I was like, “There’s not as many problems.” Like, some themes are really bad. So I think it’s good. And I don’t know if you had that same impression, Alex, that it’s close?
>> ALEX: Yes, definitely close. And to point out, the accessibility-ready tag, not to demean any of the hard work that’s gone into making that possible, but it currently has some pretty atrocious themes. And because they pass color contrast, that kind of already got them the tag, and it’s a bit of a backward system, unfortunately.
>> AMBER: Yes. I posted a link, if anyone is interested, to what is required. I think it’s important to know, like you said, Alex, that it’s a good starting point, but it doesn’t do everything. But I would say the main things beyond what we’ve mentioned before about the menu and just setting your default color contrast… I checked links, like, they always want links to be underlined, and that’s why when we went to the contact page and there was something that said, “This is a link to the WordPress Accessibility day.”
I was just trying to figure out if you underline the links by default, and you do, which I thought was good. This has skip links, which Alex said it worked, so it passes that. The forms would need a little bit of work.
The headings; so not having more than two H1s on a page.
Alex, would you prefer to see the site title as just a paragraph tag or an H2? Or what would you like to see that site title be instead of the H1?
>> ALEX: Just a normal link.
>> AMBER: Just a link with no –
>> ALEX: Yes.
>> AMBER: – P or anything around it? OK.
>> ALEX: Paragraph tag really doesn’t matter. The problems begins once you start mixing headings around.
>> AMBER: Yes. And then would you say, as far as the Aria landmark roles that they’re using; nav, search, main, banner, that they’re using all those correctly?
>> ALEX: Here’s the beginning of our banner landmark. And it looks like we don’t get a main landmark until the mobile menu is open. So probably.
>> AMBER: I think it’s closed right now.
>> ALEX: Yes, it is. Not so sure the mobile menu trigger should not be considered navigational landmark. I don’t know. That’s kind of been one of those debates too. But if we open it, we get our navigation landmark, and our main landmark, and our content info landmark for the footer. So everything is good.
>> AMBER: Yes. Let’s see. We talked a little bit about “read more” links. At least there weren’t any “read more” links in the theme, so I don’t think that mattered. And we talked about images. I’m trying to see what else. The only other things are, you can’t have spawning of new windows or tabs without warning the user, and I think we saw warnings for that.
>> ALEX: Yes.
>> AMBER: Did you notice any positive tab indexes when you were going around the site, or anything that shifted your tab focus [inaudible]?
>> ALEX: If there are any, generally, it’s a sighted person’s job to find that.
Oh, wow. What happened there?
>> AMBER: Yes. You still have the menu open, I think. But you’re [inaudible] want to not be able to go outside of the menu. It should be like a tab circle when the menu is open.
>> ALEX: Mobile menu does something weird, though. It bounces focus, all kinds of crazy. That needs to be looked at.
Yes. Seems good.
>> AMBER: Yes. So it’s really close.
>> ALEX: Yes, very close.
>> COURTNEY: Thank you both so very much.
Alex, I thought I was bad listening to my podcast and audiobooks at, like, 1.7 speed because it makes podcasters sound like chipmunks. I’m barely keeping up at 40% speed with your screen reader. I don’t know how you do that and chat in zoom at the same time often. Yes. Amazing. Amazing.
[laughter]
>> AMBER: Yes. Bruce asked the question, “Does the accessibility-ready include visible focus indicators?”
Yes. There is a requirement for focus indicators, I’m pretty sure, as a sub item of the keyboard navigation item.
Bruce also pointed out that in the footer, the links have outlined none.
We’re not seeing that right now because Alex’s screen reader is giving us that nice blue focus. So you would want to just tab or have your dev team tab through this without a screen reader turned on, and make sure they have a good outline.
I think I did actually notice too, on this theme, it might have a one-pixel dotted outline, and I would strongly prefer to see it two-pixel solid. And then they’d want to make sure it fully contrasts with whatever background is there.
>> COURTNEY: Yes. Yes. That makes sense. I’m tabbing through myself and it’s pretty faint.
>> AMBER: And considering maybe someone with low vision, it might be hard to see.
>> COURTNEY: Yes.
>> AMBER: I did not see any other questions, and we’re just about at our buffer zone with our captioner.
>> ALEX: Oh, I was hoping somebody was going to ask me a challenging one tonight.
[laughter]
>> AMBER: Thank you very much, Alex. And thank you very much, Courtney, for being brave.
Everyone, we will have a recording for this. It’ll be up once we get corrected captions and a transcript, and I think we’ll include links to things that were mentioned in the chat as well.
So feel free to reach out, Courtney. You know where to find us if you have any questions.
>> COURTNEY: I do.
>> AMBER: Also, once your team looks at everything.
So thank you.
>> COURTNEY: Absolutely. Yes. Thank you.
>> ALEX: Thank you.
>> AMBER: All right, bye.
>> CHRIS: Thanks for listening to Accessibility Craft. If you enjoyed this episode, please subscribe in your podcast app to get notified when future episodes release. You can find Accessibility Craft on Apple podcasts, Google podcasts, Spotify, and more. And if building accessibility awareness is important to you, please consider rating Accessibility Craft five stars on Apple podcasts. Accessibility Craft is produced by Equalize Digital and hosted by Amber Hinds, Chris Hinds, and Steve Jones. Steve Jones composed our theme music. Learn how we helped make 1000s of WordPress websites more accessible at equalizedigital.com.