This episode is a recording of a February 2026 WordPress Accessibility Meetup, brought to you by Equalize Digital. In this live WordPress accessibility remediation, Amber and Brian continued improving the accessibility of Brian’s podcast website, webmasters.fm. They identified common accessibility issues using both automated and manual testing tools, explained why these issues matter to users with disabilities, and demonstrated how to resolve them directly in the WordPress editor or through code. WordPress Accessibility Meetups are a 100% free and virtual community resource that take place via Zoom webinars twice a month.
If you want to watch a video recording from the meetup, you may do so on the Equalize Digital website: Live Accessibility Remediation with Brian Coords Part 2.
Listen
Summarized Session Information
In Part 2 of Live Accessibility Remediation with Brian Coords, Amber Hinds and Brian continued improving Brian’s WordPress site through real-time testing and hands-on fixes. The session moved beyond automated scans to focus on manual testing techniques, including color contrast evaluation, keyboard navigation, and screen reader testing. Along the way, they explored practical remediation decisions from refining focus states and form behavior to rethinking mobile navigation patterns, offering a transparent look at how accessibility improvements happen in real-world projects.
Session Outline
- Testing Beyond Automated Tools
- Improving Form Accessibility and Interaction States
- Screen Reader Testing and Modal Navigation Issues
- Evaluating Pop-Ups and Unexpected Behavior
- Key Takeaways from Part 2
Testing Beyond Automated Tools
A key theme throughout the session was the limitation of automated accessibility testing. Although Accessibility Checker reported no color contrast errors, Amber demonstrated that important issues can still exist in hover states, focus indicators, and placeholder text. These are areas that frequently require manual evaluation.
Using contrast analysis tools and browser inspection, they reviewed UI components that lacked sufficient visibility, including a search form with low-contrast placeholder text and focus outlines that were difficult for low-vision users to detect. Brian resolved these issues by updating CSS variables, improving text contrast, and restoring default browser focus styles, reinforcing the importance of manual testing alongside automated scans.
The discussion also emphasized proactive design planning. Brian reflected on how defining a clear color palette earlier in development could prevent accessibility conflicts later, especially when working with block themes and evolving styles.
Improving Form Accessibility and Interaction States
Another major area of remediation involved form components. The team addressed hover styles, placeholder visibility, and input focus indicators within WordPress Core blocks and the Ollie theme. By adjusting CSS selectors and variables, they ensured that interactive elements remained perceivable across different user states, including hover, focus, and disabled fields.
The session also highlighted how disabled inputs can introduce accessibility challenges. For example, a Jetpack subscription form displayed a prefilled email field that users could not edit, creating confusion about what information would be submitted. Amber noted that users should have clear context when actions occur, suggesting improvements such as exposing the email address in button labels or allowing the field to remain editable.
Screen Reader Testing and Modal Navigation Issues
One of the most valuable segments of the session was a live screen reader test using VoiceOver. Amber navigated Brian’s mobile menu entirely with the keyboard, revealing structural issues that were not obvious visually. Not sure how to use a screen reader? Check out our online courses on screen reader testing or read on below.
Although the menu announced itself as a dialog, it failed to behave like a true modal. Users could tab outside the open menu, lose focus context, and be unable to close it with the Escape key unless they manually returned to the dialog region. Amber explained that modal dialogs should trap keyboard focus and cycle through their elements to prevent disorientation.
Additional structural problems surfaced during testing:
- Navigation links were not grouped as a semantic list, reducing context for screen reader users.
- Decorative separators were implemented as structural elements, causing unnecessary announcements during full content reading.
- Some navigation links pointed to placeholder URLs, which created usability issues beyond accessibility.
Rather than attempting complex JavaScript fixes, Brian chose a pragmatic remediation approach: disabling the theme’s advanced mobile menu and reverting to a more accessible core navigation pattern. Sometimes simplifying design is the fastest path to accessibility.
Evaluating Pop-Ups and Unexpected Behavior
Amber analyzed a Jetpack subscription pop-up triggered by scrolling. The dialog lacked proper semantics and did not receive keyboard focus when opened, making it difficult for non-mouse users to interact with. The team discussed best practices for accessible pop-ups, including assigning dialog roles, naming the dialog with ARIA attributes, and ensuring focus returns to the correct location after dismissal.
They also explored whether scroll-triggered pop-ups might conflict with user expectations, especially for screen reader users who could be interrupted mid-reading.
Key Takeaways from Part 2
The remediation process reinforced several practical lessons for developers and site owners:
- Automated testing tools are valuable, but manual testing is essential for detecting real-world usability issues.
- Focus states, hover styles, and placeholder text frequently introduce accessibility barriers even when overall contrast appears compliant.
- Modal dialogs must trap keyboard focus and provide clear labeling to avoid disorientation.
- Simplifying designs or reverting to core WordPress functionality can sometimes be the most effective remediation strategy.
- Collaboration between accessibility specialists and developers helps balance technical feasibility with inclusive design.
By working through real examples rather than hypothetical scenarios, the session demonstrated how accessibility improvements often involve small, iterative changes — from adjusting CSS to reconsidering navigation patterns — that, together, create a more inclusive user experience.
Transcript
>> CHRIS HINDS: Welcome to Accessibility Craft, where we explore the complex challenges and emerging trends that are shaping digital accessibility, while sipping on unique craft beverages. This show is proudly produced by Equalize Digital, the most trusted name in WordPress accessibility. Join us every week as we break down accessibility news and share the expert strategies we’ve used to help make millions of websites more accessible. Grab a drink, the show starts now!
>> AMBER HINDS: I want to have a nice view up here of Brian so that Brian can introduce himself, and then we’ll talk about what we’re going to do.
>> BRIAN COORDS: I am Brian Coords. I’m a developer advocate. I work at WooCommerce, or Automattic, as the larger parent company. I actually just hit the end of my first year there. I’m relatively new to WooCommerce, but before that I spent a decade in the WordPress agency space building websites for people. I have a broader WordPress background and a little bit of a WooCommerce background as well.
>> AMBER HINDS: Welcome. I am so glad to have you here and willing to come back. We did share part one, where we started working on your website, and I thought it might be interesting before we dive in and do some more work on it to just look back on that real quick. Let me see if I can reshare my screen. Hopefully, you can see. This is the YouTube video from last time. Where we were, there was a bunch of empty links and linked images that were missing alternative texts, which were the same, and some possible headings and things like that. Those were a lot of what we focused on as well as structure. If anyone is interested in this, you can find this video and watch it to get where we started there as well.
Now all those empty links are gone, which I thought was cool. Awesome fix. One thing we’re going to do a little bit differently this time, because I did want to demo a few screen mirroring testing things. I’m going to share for a minute, show some problems, then we’re going to let Brian take over sharing, and he’s going to talk about how to fix them. If you have questions, I am going to try and watch the chat. I’m notoriously bad at watching the chat while I am talking, but I should be able to watch the chat while Brian is talking, and I can pass your questions along to him.
Where I wanted to start first was color contrast. One of the interesting things you might note if you’re looking at this current list of open issues is that there aren’t actually any color contrast issues being flagged on this website by Accessibility Checker. I want to highlight that, not to be like, my tool sucks. Most automated tools won’t see all problems, and there are some things that you still have to test manually. One of those is color contrast and wave, and ACTs also don’t see some of the issues that we’re going to talk about today. They aren’t found by automated tools. I think already, Brian, it’s awesome that it couldn’t find any of that. It means, I’m guessing, you’ve put some thought into colors already?
>> BRIAN COORDS: Yes, I definitely tried to get it, and then I use the Ollie block theme, and it has a pretty good color palette system where there’s eight or so colors, and you’re supposed to know which ones work together and stuff. When you fill out the colors, it’s supposed to help you pick colors that are always going to pair together nicely.
>> AMBER HINDS: I think in general it looks really good, and it’s super readable, but where the automated testing tools sometimes don’t always catch is hover states, or if there’s different states for different users, which I’ll show an example of in just a second. I realize I shared my screen wrong because I only shared my window, but I got to share my whole desktop. Give me one second. Retrying. All right. A thing I noticed, actually, let me just do something funky here. I’m going to go to a page that doesn’t exist. I just typed a random string on the end so I could get a 404 page, and your search button looks good, but when I hover over it, the text, it’s like a dark– like that. When I tab into this input field, the focus indicator is a very light green ring around. That’s an example of a UI component color contrast, which doesn’t have to be the exact same, but it does need to still have some contrast because a low-vision user might not be able to tell that their focus was in there. Also the placeholder text is super light on here. There is a free tool, and maybe, oh wait, I can pop the link in here in the chat in case anybody wants it, that I really like from TPGI that is actually a desktop application. I’ll be honest, this is how I check color contrast and Figma files. It opens up, and it gives you just color pickers. I’ve got my background color on white. I could take this picker if I didn’t know how to inspect this, and I could just get, this is my placeholder text, F5, F5, F5, which fails that. Sometimes you can get your focus indicator. Let’s see if it will go away. Now, I’ve clicked into the field, so the focus indicator is visible, and I could use this to color-pick my focus indicator. It doesn’t really matter when it’s a ring about the contrast minimum or contrast enhanced. What matters is the non-text contrast where it’s failing for UI components. There was that. I think there’s these two things that we’ll want to fix. The other thing that I noted, and I thought this was really interesting. I’ve never seen it before. I’m going to zoom in on the website, and I’m logged in right now. Oh, this. Okay, wait, now I’m getting a different button. In a few instances, maybe it’s on the homepage. No. I don’t know, in a few instances I’ve seen this mobile nav as white when I’m logged in. Have you ever seen it that way, or is that just me?
>> BRIAN COORDS: I’ve been trying to replicate it since you said it, and I haven’t found it, but I feel like that’s what it was originally. I’m not sure.
>> AMBER HINDS: Maybe at one point the styles weren’t loading for me, and I was getting an old style or something. This is a similar situation where this is going to fail for UI contrast. Sometimes you can get the colors. Just if I click on this in the browser, I’ve opened dev tools, I’ve clicked on the little color preview, which opens. It won’t give me a contrast here. You could also do the similar thing. If I open the dropdown and I use my color picker, I could go pick it and, say, test against the background.
>> BRIAN COORDS: I didn’t know about that.
>> AMBER HINDS: It’ll give you a ratio. What’s not great about this browser ratio picker, and this is just built into Chrome, is that it doesn’t tell you the UI component, which is why I like the Contrast Analyzer desktop tool. If I do, the foreground is this color and the background is this color. This open and closed toggle on the mobile is really low contrast. Then when you’re logged in, and I’m guessing you don’t have any visitors log in, it’s only you typically.
>> BRIAN COORDS: Yes, that’s why I’ve ignored the weird thing it does where it puts your email address in there. You can’t read it.
>> AMBER HINDS: In the Jetpack Subscribe, and you can’t read it?
>> BRIAN COORDS: Yes.
>> AMBER HINDS: If you had people logging in, you’d probably want to fix the contrast on that too, because it’s barely legible. Those are my color contrast things that I’ve noted. I’m going to let you take over and maybe show us how we might fix some of these things.
>> BRIAN COORDS: Let’s pull it open. Okay, so here I’m logged in. Is this a good screen size?
>> AMBER HINDS: It seems okay to me.
>> BRIAN COORDS: I might shrink it a little bit. This site uses the block editor. Everything design-wise happens in the block editor. Sometimes you have to get in there with some CSS. That’s just the way it is sometimes, but hopefully we won’t. Where should we start? Should we start with that search form maybe?
>> AMBER HINDS: Sure.
>> BRIAN COORDS: I use the Command K palette a lot when I’m searching for things. I find it makes it easier. I’m going to load up.
>> AMBER HINDS: This is built into WordPress now? What you just said you hit Command K, and it opened the search form?
>> BRIAN COORDS: Yes, and you can use it anywhere in the backend of WordPress, not even in the site editor, just in WordPress. If you’re using a block theme, it’s nice because it makes it easy to jump from one template to another or different setting screens or something. You can use it for adding a new post. Like, I can say Add post, and I can jump straight to that. There’s a lot of cool features of it.
>> AMBER HINDS: That’s cool.
>> BRIAN COORDS: This is the search form. This is a WordPress Core block, the search block. It comes with some basic options. Let’s see. You can do an icon, you can do a form label, which I’m wondering, did you get anything about the label not having text or anything like 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. 1000s of businesses, non-profits, universities, and government agencies around the world trust Accessibility Checker to help their teams find, fix, and prevent accessibility problems on an ongoing basis.
New to accessibility? Equalize Digital Accessibility Checker is here to teach you every step of the way. Whether you are a content creator or a developer, our detailed documentation guide you through fixing accessibility issues.
Never lose track of accessibility again with real-time scans each time you save, powerful reports inside the WordPress dashboard, and a front-end view to help you track down hard-to-find issues.
Scan unlimited posts and pages with Accessibility Checker free. Upgrade to Accessibility Checker Pro to scan your website in bulk, whether it has 10 pages or 10,000.
Download Accessibility Checker today at equalizedigital.com/accessibility-checker. Use coupon code accessibilitycraft to save 10% on any plan.
>> AMBER HINDS: Even when you have the label hidden with the Core block, it still is labeled for screen reader users. Normally you always want a visible label on fields, but the search form is the one instance where this could be considered still a pass because it’s one field connected with a button, and it has the word “search” on the button. It’s better. I would recommend having a visible label.
>> BRIAN COORDS: Like search or something like that, or?
>> AMBER HINDS: Yes, or it could be like site search or something like that. Placeholder text, honestly, too isn’t supposed to label it. It would be more like–
>> BRIAN COORDS: Instructions or something?
>> AMBER HINDS: Yes, like keyword, episode topic. It’s supposed to be instructions, so you might suggest what someone might put in there. Like guest name, episodes, comment, or something.
>> BRIAN COORDS: I didn’t even know I could change that, so that’s cool. Okay. This one has a few color options, but it’s all one block. The button and the input field, I think, use all the same color, but there are some additional hover options, which is pretty nice. I don’t know.
>> AMBER HINDS: Wait a minute. Did that come from Core? I never knew you could do that in Core. I thought Core didn’t support hover styles.
>> BRIAN COORDS: I think it’s something added by Ollie, I think.
>> AMBER HINDS: Your theme.
>> BRIAN COORDS: He adds a lot. The Ollie theme, and there’s also a plugin that goes with it, adds a lot of stuff that’s extra. That’s one difference of this. It’s not like a full page builder on top of the block editor, but it definitely adds a few of those things that you might want, like animations and additional style changes and things like that. Actually, I think that the hover is not.
>> AMBER HINDS: That’s not Core, right?
>> BRIAN COORDS: Yes. We would need a better– oh, go ahead.
>> AMBER HINDS: Sorry. Jewel asked, “Are you using Ollie Pro or the free version?”
>> BRIAN COORDS: Pro. It is the pro version.
>> AMBER HINDS: We’re not certain where this is coming from, whether it’s free or pro.
>> BRIAN COORDS: I’m pretty sure, if it’s coming from Ollie–
>> AMBER HINDS: I don’t think it’s Core, right?
>> BRIAN COORDS: No, I’m pretty sure it’s coming from Ollie Pro. I find it’s pretty worth it if you’re going to go with a block editor. It’s the only way I’ve enjoyed it. It is to use Ollie.
>> AMBER HINDS: Normally without this setting, you’d have to go write CSS in order to fix the hover styles on this button.
>> BRIAN COORDS: I think if I do the hover text, as you can tell, I don’t have a lot of colors. That’s been my main issue here. It is that I don’t really have or need a lot of colors. I don’t have a full brand for this. It’s literally just, I spun up the website and I used a couple basic colors. I basically go through and just use the same colors for things. If I do the hover text, yes, oops. That didn’t seem to change anything, right?
>> AMBER HINDS: No.
>> BRIAN COORDS: I’m just curious. If any of these, just out of curiosity. Oh, it changes the whole thing.
>> AMBER HINDS: Oh, it’s not doing it for the button.
>> BRIAN COORDS: Yes, does that change?
>> AMBER HINDS: This might end up needing to be a CSS fix.
>> BRIAN COORDS: Yes, I’ll probably have to do this with CSS. I’m just going to save it and just see on the front end if it changes anything.
>> AMBER HINDS: We aren’t doing this live, everybody. If you go to webmasters.fm you can see this. Did it change the hover on the actual label? That’s what I’m wondering if that’s what that’s getting. If you hovered over the label. Oh wait, it’s the same color, so it doesn’t matter.
>> BRIAN COORDS: Oh yes, the border. What if I changed it to– just to see if it does anything? It doesn’t seem to be adding anything. Like I said, this one’s a weird block because it’s got buttons and things inside. Like this, I’ll probably file an issue for Ollie and just let them know, “Hey, you added these, but they don’t actually affect what you think they would affect.” I can actually just do it as CSS. Should I do a white text for this on hover? Or what would you do? I’m not a designer.
>> AMBER HINDS: I like the green, but you could do a white text.
>> BRIAN COORDS: Oh, yes. The green is a pretty good background, right?
>> AMBER HINDS: I just meant you could only change the text color and keep the– it goes to a black background, and just make the text either white or your bright green would contrast with it fine.
>> BRIAN COORDS: Okay. Let me make [crosstalk]
>> AMBER HINDS: Abigale said, “It could just be black with white text.” You could flip it to a whiter text. I’m used to classic themes where you have a CSS in the customizer. Do you have that in this theme?
>> BRIAN COORDS: Yes, I’ll show you where we put the custom CSS. It works pretty decently. This is the button class. We just need this WP block search button.
>> AMBER HINDS: You’ve inspected in dev tools, found the class, and copied it.
>> BRIAN COORDS: Yes, so in here I hit the styles tab, and then under this little dropdown there’s a little CSS panel. I’ll make a little CSS for it. What’s nice about this is I think we said that the search form is on other pages of the site. If we do it with CSS, then I don’t have to go to the search page or anything.
>> AMBER HINDS: It’ll get it anytime you’ve used this specific block.
>> BRIAN COORDS: I just need to find that green color. I’m going to inspect this one up here and just get the color from it. Actually what I want is this whole line right here. I’ll put that in. There we go.
>> AMBER HINDS: Cool.
>> BRIAN COORDS: I’ve added a little background color. I like using the CSS variables because then if I change my color palette later, it’ll change it automatically. It might not be perfect, but it’ll at least match. That looks good.
>> AMBER HINDS: CSS, I’m guessing, is how you’d need to fix the focus indicator also.
>> BRIAN COORDS: Yes, and the placeholder text, which is so faint. Let’s see.
>> AMBER HINDS: You can’t even see it on your screenshare. Oh wait, you’re clicked in there. That’s why you can’t see the placeholder text, which is exactly why placeholder text is not– Oh no, it is still there.
>> BRIAN COORDS: Let’s get a class for the input. Oops. We need to do the focus indicator, which is, is that this outline color?
>> AMBER HINDS: Yes.
>> BRIAN COORDS: Okay. Should I use– so this is the bright green, but–
>> AMBER HINDS: This is an interesting thing that Jewel said, “Doesn’t the focus color have to have a 4.5 contrast ratio between the surrounding background and the input box?” It doesn’t have to be 4:5 because it’s a UI component. I could be wrong, but the higher contrast, I think, is only on the AAA requirement. An interesting thing about this, and I’d almost be curious to have you go toggle this fix on an Accessibility Checker. In Accessibility Checker, one of the things that we do is we actually remove the outline color, and we allow the browser to set it. If you tab through other items on your page, you’ll notice you have the– it’s a double blue and white. Your nav, if you tab on some of those. You’re down in the footer right now. Do you see that? It’s both blue and white. That allows it to contrast on both dark and light. I’d be curious if you turned on the fix and Accessibility Checker if it would fix this for you. I’m not sure how. If it would remove the custom green color and just allow the focus on this input to match default browser focus, which is what your other items have.
>> BRIAN COORDS: I think I can say unset.
>> AMBER HINDS: Or you could unset.
>> BRIAN COORDS: See.
>> AMBER HINDS: Did it work? Also, is it inset?
>> BRIAN COORDS: Oh, it’s just not specific to that.
>> AMBER HINDS: You have to give it an important.
>> BRIAN COORDS: Yes.
>> AMBER HINDS: Maybe you want to do it on all inputs, because we saw the same thing in the mobile nav menu.
>> BRIAN COORDS: This is coming from Ollie. What I’ll do is I’ll just copy this.
>> AMBER HINDS: CSS selector from Ollie.
>> BRIAN COORDS: That handles input and text area where they set it. I don’t think I need the important, but I’m going to do it anyway just in case and save that. Now if we reload, it just does the default. Is that better? It’s a white and a black, it looks like.
>> AMBER HINDS: Tab-pass it for a sec. It’s not making it blue, but I think that is fine because it still has a clear outline between the gray background and the input, which is going to allow you to see the difference on the focus indicator between both the input and the background.
>> BRIAN COORDS: That looks better.
>> AMBER HINDS: The other things were about mobile.
>> BRIAN COORDS: Let me get the placeholder text too, because that was ready.
>> AMBER HINDS: Oh yes, you’re right.
>> BRIAN COORDS: I haven’t been writing CSS in a while. That’s a pseudo element or something, right?
>> AMBER HINDS: Yes, I also don’t do this enough. I would Google it. We might have a smart person here in the chat who can be like, “Here’s how you target placeholder text.” Yes, double colon placeholder, I think, could do it. Thanks, Jonathan.
>> BRIAN COORDS: We’ll try it.
>> AMBER HINDS: This is one where I’d argue it might be better to do it on all inputs instead of just the search block. I’m wondering if that style, which I’m guessing is coming from Ollie somewhere, is global, that it might impact, I don’t know, if you were to have placeholder text on a contact form or something.
>> BRIAN COORDS: I do have a contact form. I think it’s–
>> AMBER HINDS: No placeholder text.
>> BRIAN COORDS: The contact form is Jetpack, which actually does a pretty good job of giving you a lot of color pickers for a lot of things. Let’s just do input placeholder. What colors should we do?
>> AMBER HINDS: Maybe 333 or something. I like it to be pretty dark. On text and on forms, I would be like, if you can meet AAA contrast, I think it’s worth it because the forms are the most important things.
>> BRIAN COORDS: Oh, yes. That’s much better.
>> AMBER HINDS: Cool. I love this because it’s like, look, we just fixed something that’s really important. The sad thing when you fix things that aren’t caught by automated tools is you don’t get some instant gratification of “I made my score better.” It’s very important to fix things that automated tools can’t find.
>> BRIAN COORDS: It should be good where, I think, you said the search page had the same thing, so I’m just putting in a search URL just to trigger the search page. Now you can see the search page has definitely better– you can read it a lot more. Nice.
>> AMBER HINDS: What about if you zoom in and you hit that mobile nav? Let’s see if– oh, but you’re logged in. You’d have to be logged out to see if it fixed in there.
>> BRIAN COORDS: I’m just wondering where it’s even getting these colors from.
>> AMBER HINDS: You know what?
>> BRIAN COORDS: [crosstalk] current color. Okay.
>> AMBER HINDS: Partially, this is an interesting thing because we actually were looking at this in one of the Woo Extensions recently. Part of why I think that’s failing is because it’s disabled. When you’re logged in, you can’t change the email address there. I noticed where you were looking at the CSS a minute ago. It has a disabled class on it. In some instances, disabled buttons are allowed to fail color contrast. Depending upon where they are used, it should not fail because it is definitely a problem. In this instance, the input being disabled, you still need to be able to see what– I bet you there’s an opacity because a lot of times that’s what’s done. You could search maybe for opacity. If you go back to the Styles Tab, do you know how to search?
>> BRIAN COORDS: Yes.
>> AMBER HINDS: Right there. You turn that off. Okay, well, the placeholder text is still not great.
>> BRIAN COORDS: It is there, disabled, where they give it the current color, which is, I guess, weird. I think also [crosstalk]
>> AMBER HINDS: I don’t know what “current color” even means
>> BRIAN COORDS: It’s supposed to just take the color from the next element or something. It is also a weird thing. I think I’ve seen this a lot in Woo, where it just doesn’t handle dark themes really well. It always just assumes you’re going to have a white background. I think if I did, maybe this would be a dark text.
>> AMBER HINDS: Dark text would’ve been black text. Daniel says, “The current color should take the color of the parent element.” If you went up to a paragraph. That’s probably why it’s so light, because your paragraph color by default is an off-white or a white color.
>> BRIAN COORDS: That one actually would be pretty easy. I can jump to design the header, which is where that form comes from. Give it a second to load. I can open up my header. I can open up– it’s basically like a little template part that you get to design. This is part of Ollie as well. This functionality is going to come to core, I think, in the next version, where you can have a completely different mobile navigation. While this is all Ollie Pro stuff now, this functionality is going to exist. You hit edit template, and it opens up your mobile template right here. With all these, it’s nice it gives you a bunch of designs and stuff that you can do. I stuck in this Jetpack form, which you can see looks completely different on the backend, but since it’s inside of a group, I can set the text color to a dark color and hit Save. Then hopefully the current color should pull from that. There we go. The parent group, I just set a color there. Current color is going to pull from that.
>> AMBER HINDS: Do you want to see if you can inspect the contrast? If you click on the right, where you see your CSS, you can click on the black square, that is like the preview color, and then expand the contrast ratio and then pick a background color with the color picker. This passes for AA but not AAA, which is maybe fine in this scenario because you’re the only one who sees it, because nobody logged out. Potentially you might want to change the opacity a little bit, and then it would be able to pass for– if you made the opacity 0.7, I bet, instead of 0.5.
>> BRIAN COORDS: Oops.
>> AMBER HINDS: Then it might pass.
>> BRIAN COORDS: It’s a little bit darker. I actually need to make sure that I test this on the logged-out view. That is the one that everyone’s going to see. Yes, that 0.7 seems to work.
>> AMBER HINDS: It definitely gets more complex when you’re serving different styles or different experiences to both logged-in and logged-out users.
>> BRIAN COORDS: I’m not really a fan of the fact that it does this. I don’t know.
>> AMBER HINDS: It’s not editable at all. In a minute I’ll show you something about it that I think is interesting. Are you able to show? Do you have an incognito? I don’t know how you’re sharing, but did the focus indicator fix also fix the focus indicator on this field for logged-out people?
>> BRIAN COORDS: Let me open a new incognito window, and I’ll share that. Okay. I just need to fix this thing too.
>> AMBER HINDS: Oh, yes. That one also has a hover that fails.
>> BRIAN COORDS: Well, it’s nice to [crosstalk]
>> AMBER HINDS: It’s interesting. I don’t think that one fails for you when you’re logged in, though.
>> BRIAN COORDS: No, it’s still the same thing. Oh yes, you’re right. You can’t see it. I checked, and it’s the same.
>> AMBER HINDS: You are now in the incognito window getting the class for that button.
>> BRIAN COORDS: I can do it. Oh yes. The downside here is there’s not really a good specific class on it. Like WP block button underscore link is just not, I don’t know. If I change it, what is that going to change? I want to get a more specific version of it, I think. Let me–
>> AMBER HINDS: Are there other buttons with hover styles that you’ve used like the button block elsewhere? Beyond for submits, the link button?
>> BRIAN COORDS: Let me go back to the non-incognito since we know we have it here. I have this button. Where else do I have buttons? Let’s see. I think on the homepage.
>> AMBER HINDS: Those ones, they just get the underline. When you hover, they don’t actually get a color change at all. You might just want to check and see if those classes are the same if you’re trying not to override those.
>> BRIAN COORDS: Let me see.
>> AMBER HINDS: Mike asked, “Are those links, or are they buttons?”
>> BRIAN COORDS: WP block button link is a core WordPress class. The way it works is when you put just a normal button in WordPress on a page, like, this is just a normal button, you get a div with WP block button. Then inside you can have either an anchor with WP block button link as the class, or you can actually tell it that you want a button-like semantic element. It’ll by default do a link. In WordPress, you can actually say no, I want it to be an actual button element. Those are both core classes.
>> AMBER HINDS: That’s not in the editor though, right? I think that’s only if you do– is it now? I have a GitHub issue for this, and I didn’t think it got closed for Gutenberg. I might be really excited now. I’ll have to go back and look.
>> BRIAN COORDS: I think it’s in core as of the last version.
>> AMBER HINDS: 6.9?
>> BRIAN COORDS: Like this. Oh, that’s [crosstalk]
>> AMBER HINDS: I have so many GitHub issues. I can’t track them all.
>> BRIAN COORDS: They don’t all get–
>> AMBER HINDS: Notified.
>> BRIAN COORDS: Let me just open my homepage so we can just see an example. Some of this is Ollie. He gives you icons and things like that. I think under the advanced tab now you can change it from an–
>> AMBER HINDS: HTML element from an A tag to a button. That makes me so happy. That was my GitHub issue.
>> BRIAN COORDS: They probably just didn’t close. Somebody else probably opened an issue, and then they closed that one. You should find it and close it.
>> AMBER HINDS: I should. That issue that I’ve had open has been open for almost two years, probably.
>> BRIAN COORDS: It’s been a hot topic.
>> AMBER HINDS: Wait, I want to say one thing just to note for people. The reason why that’s important is plugins that allow you to create popups on a button click. A lot of people were using the WordPress quote button block to create them, and then it creates a link, which isn’t actually the correct semantic if you want to open something. That’s why that change was needed. You can use that block now to trigger popups.
>> BRIAN COORDS: Which is nice, because then you’re not making a button from scratch. The button block comes with a bunch of settings and stuff. You’re like, I don’t have to make this from scratch every time I make a custom block. It is pretty handy. I guess one thing I am curious about, I can go to my styles tab, and I can go and see what my defaults for a button is, and I can just [crosstalk]
>> AMBER HINDS: This is in the site editor, right?
>> BRIAN COORDS: Yes, and I guess I have this background, so I don’t know where it’s getting that from. I don’t know where it’s getting the white hovering to black. That’s not a style.
>> AMBER HINDS: I think this is an issue with WordPress Core, which is that if you were back where you were, where you could see your default styles for buttons. WordPress Core doesn’t allow you to define what your hover styles are.
>> BRIAN COORDS: That’s true.
>> AMBER HINDS: The problem here on those is that it’s just like picking something from CSS somewhere that’s maybe in the theme or something.
>> BRIAN COORDS: Let’s open it up and just see if we can–
>> AMBER HINDS: Figure out where that black background is coming from.
>> BRIAN COORDS: Oops. We have the white, and then if I apply a hover to it.
>> AMBER HINDS: That’s where the black background’s coming from. What file is that?
>> BRIAN COORDS: That’s just coming from the block editor.
>> AMBER HINDS: Inline CSS.
>> BRIAN COORDS: I think that’s just inline CSS from the block editor.
>> AMBER HINDS: That’s interesting. It’s a mystery color.
>> BRIAN COORDS: That happens a lot with the block editor, where you just go, “I don’t know where this is coming from.”
>> AMBER HINDS: Is your solution, you just override it in the CSS file?
>> BRIAN COORDS: Many of these–
>> AMBER HINDS: Or where you were showing where you can put the CSS in the full-side editor.
>> BRIAN COORDS: Let’s open up this CSS window. We did it here with this WP block search button. I can do this, but like I said, WP block button link is a very popular element. I want to scope it to just being inside of this Jetpack search block. I think that would make it a little bit easier, because I do think everywhere that this happens, it does happen. I think I’m going to scope it to just this Jetpack subscriptions block.
>> AMBER HINDS: You’ve gone further up and found the div that’s the parent, and now you’re going to copy the class from that.
>> BRIAN COORDS: Yes, and with blocks it’s always like WP-block-the name of the block. It’s easy to find what’s the container element for it, because they’re always going to have that same thing. I can put it in front here, and it should work for this, but it shouldn’t break anything else. Let’s go. I think I had one here, and then I think I have it in here. That’s looking better.
>> AMBER HINDS: Cool. The last two UI color contrast issues were on the open and close button for the mobile nav?
>> BRIAN COORDS: Yes, now I don’t know. Let’s see. Let’s go to, again, I’ll Command K and open up my header. I don’t know if that’s something that I have control over already. Oops. I have the link here.
>> AMBER HINDS: This is an interesting thing. That icon that you showed there was actually a little different. The way it is, that you see here, is every once in a while when I would hit your site, this is how I would see it with the white.
>> BRIAN COORDS: With the white lines.
>> AMBER HINDS: I’m wondering if that’s the core styles, and then what it’s mostly outputting is actually coming from somewhere else on the Ollie being able to switch.
>> BRIAN COORDS: Here’s the button. This is just some CSS coming from Core, but I think I can–
>> AMBER HINDS: [crosstalk] it is there?
>> BRIAN COORDS: Yes.
>> AMBER HINDS: Change it here.
>> BRIAN COORDS: The gray with the white, is that a good combo?
>> AMBER HINDS: Yes, I think as long as you have high enough contrast, in this scenario, you don’t necessarily have to have contrast on the button border, if that makes sense, between the website background. A lot of times you see these without a border. The icon is meaningful enough because it’s used so broadly that people would interpret that as a button. I think it’s fine as long as the icon sufficiently contrasts against its background. If you wanted to take it a step further, then you would have the background contrast against the website background and the icon contrast against the button background. If that makes sense.
>> BRIAN COORDS: Yes, but you don’t need it. I could do–
>> AMBER HINDS: You don’t need it because there are plenty of websites that are designed where the icon has no background.
>> BRIAN COORDS: Which is honestly what I’d probably rather do, have no background. It’s funny because I’m putting these settings in.
>> AMBER HINDS: Instead of the– yes, it’s gray.
>> BRIAN COORDS: Are these even going to do anything?
>> AMBER HINDS: They look like they’re not changing anything.
>> BRIAN COORDS: Let’s just see. Oh, it did.
>> AMBER HINDS: There you go. Now that should be sufficient contrast.
>> BRIAN COORDS: I don’t know if you can see it in the screen share, but this black is not the same as this black. There’s the tiniest gray color.
>> AMBER HINDS: It’s subtly different. Is that because you haven’t, maybe slightly, defined your global colors? You’ve got a few different variations here that look close, and it’s hard to tell. Maybe if you had a tighter color palette. I see three different greens that are only slightly different and three different grays, or four maybe.
>> BRIAN COORDS: Which is honestly what I would– in this case I threw this website together, and I got lost on the colors. I think if I’d go back to it, I would actually plan out my color palette ahead of time. I think that’s like a good thing to do, which is plan out your color palette before you start building and don’t get caught in these situations. I’ve had that issue with client work where we don’t do the work ahead of time. We would get designs from other designers. We weren’t in control of the designs a lot of the time. We would just get designs, we’d have to build them. Then you’d get to this phase, and you’re like, “Oh, now this doesn’t match with this, this doesn’t match with this,” and stuff. If you can hammer out your color palette ahead of time, you save yourself a ton of work because nobody likes to be told, “Actually, we need to tweak this,” and “Actually, we have to tweak this.”
>> AMBER HINDS: I’ll also say we have a pretty handy tool. I’ll post a link here. A contrast grid that allows you to put in your colors, and it will tell you which combinations pass. Which is really helpful. Man, time flies. When we talk about this, I really want to show you some of the structural issues with the mobile menu and see what your thoughts are. Especially now that I know that you’re saying this is coming to WordPress Core. I’m thinking this needs to be figured out more broadly, not just for your website. If it is an issue specifically to Ollie or not. I’m not sure. Can I share for a minute and show you some of the things? All right. Let me just rearrange my window. What I’ve done is I’m actually zoomed in on the website right now. I am zoomed just 175%. You actually have to test when you’re accessibility testing up to 400% zoom. I just zoomed enough to be able to get the mobile menu, and I can refresh here, and we should be able to see your color contrast fix. Now we can see that. I’m going to turn on voiceover because I’m on a Mac and I’m just going to do that by hitting function command F5.
>> VOICEOVER: Voiceover on Chrome. Webmasters FM podcast for WordPress Google Chrome.
>> AMBER HINDS: I made it stop talking. I’m not going to talk over voiceover. I’m just going to go through a few things and listen to it, and I might explain more at the end. Basically what I’m going to do is I’m going to be using my tab key to navigate through the website.
>> VOICEOVER: Link skip to content. You are currently on a link. To click this link, open menu, dialogue popup button, primary, navigation. You are currently on a button to display a–
>> AMBER HINDS: This is good. It told me it was a button. It told me it’s part of the primary navigation. It told me it’s going to open a dialogue, so that’s great. I’m going to use a space bar to trigger a button. Buttons should be triggered by space bars. They can also be triggered by the return key, but I always use the space bar to check because if people have made a link into a fake button by adding roll equals button, and you want to make sure that they remembered to add the JavaScript. We know this is an actual button, but I’m trying to explain for testing purposes.
>> VOICEOVER: Menu, dialogue, link, episodes. You are currently on a link inside of a dialogue to click–
>> AMBER HINDS: This was helpful in that it shifted my focus in. This is good. It told me I was on a link and I was inside a dialogue. It didn’t name the dialogue. So that is like, oh, maybe it needs like an aria label or something. I’m just going to tab through.
>> VOICEOVER: Link, open in podcast app. Link, about, visited, link, contact. You are currently on a link inside of a dialogue to click this.
>> AMBER HINDS: The thing I noticed is there isn’t a list here. The normal nav has a list. This doesn’t have a list.
>> VOICEOVER: Type your email, required menu popup, edit text email. Subscribe, button. You are currently on– Link, image, YouTube, main. You are currently on a link to click this– Link, Youtube. Link, image, podcast links. You are–
>> AMBER HINDS: What I noticed here is that you can still see the menu, but I’m behind the menu. When you have something like this, it needs to function where it covers the entire screen, and it told me it’s a popup, it’s a dialogue. It needs to function as a modal dialogue. Whereas it should lock keyboard and I should be able to tab cyclically through the elements. The other thing I’ve noticed is if I hit the escape key, it doesn’t do anything to close the menu because I’m no longer in the menu even though it’s open. If I go backwards, so shift, tab, backwards.
>> VOICEOVER: Link, contact. You are currently on a link inside of a dialogue. To click this link, press–
>> AMBER HINDS: Now I’m in it. Now if I hit escape.
>> VOICEOVER: Open menu, dialogue pop-up button, primary, navigation, you are currently on a button to display–
>> AMBER HINDS: It does what it’s supposed to do. It closed it, and it took me back to the trigger button. That was good. The biggest issue that I see here was that it allowed me to leave the menu without closing it. Then I had no way to close it unless I figured out how to get back into it. I’ll show one other thing that [crosstalk]
>> VOICEOVER: From Amy L to everyone. Using keyboard, you’re supposed to be trapped in a dialogue until you actively dismiss it or use a tool within that takes you somewhere else. From Amy L to everyone. LOL
>> AMBER HINDS: All right. I forgot to tell you guys I didn’t turn my chat notifications off.
>> VOICEOVER: Zoom webinar, window, type message here, group, you are currently on a link inside of a dialogue. To click this link, press control, option–
>> AMBER HINDS: All right. I pulled over the one where I’m logged in only because I want to show one other thing that I think is a little odd about this Jetpack thing, and we’re probably not going to fix it today, but it might be worth reporting to them. If I tab here.
>> VOICEOVER: Link, open in podcast app, visited. Link about. Link, contact, Subscribe, button. You are currently on a button inside of a dialogue.
>> AMBER HINDS: We were looking at it before. That input field is disabled, and I can’t change my email address in it. It doesn’t even take me to it, and I have no context that this subscribe button is going to submit my email address. I actually don’t think this input should be disabled. I think maybe it should pre-fill with what your logged-in email address is. What if my logged-in email address was my general company email, like hello@equalizedigital.com? I’m like, but I want to subscribe myself. There might be situations like that, and so I question whether this input should be disabled at all. If it is, I feel like the subscribe button, when it receives focus, needs to say what email address is going to be subscribed.
I’m going to stop sharing. I feel like what I’m most interested in here is a couple of things, which is, are you able to make it actually function as a modal? I could tell you some of those semantics. Now the tab focus thought might require JavaScript, and maybe we can’t do that on the fly here. I don’t know how good you are at that. I also wonder about those things not being in a list. Could they be in a list? I did notice an Accessibility Checker. They all get flagged as possible headings. Those could be ignored, but at the same time it’s because they’re big and they’re in paragraph tags. Normally you expect navigation to be grouped together because then when you enter it, you get this context of I’ve opened the menu. I’m getting, there’s four things I could go to, or there’s 25. Five top-level things with all these subitems in a complex navigation. List structure is really helpful.
>> BRIAN COORDS: We can fix that. I think what I would do personally is, I think that it’s a pattern that was probably included in the Ollie theme because it looks nice with the big lines in between everything, but it’s probably just made with group blocks and divs and lines and things. There are some blocks out there that do things, Aruba has one called Super List, where it lets you make a semantic list, but you could put any blocks inside of it, and that’s super helpful to get that design. For me, I don’t care about the design that much. I would rather just use an actual navigation menu element and stick that in there and then just have a good navigation menu. I’d rather just fix it that way [crosstalk]
>> AMBER HINDS: Well, the other thing was, I’ll say about it, I only navigated with tab keys, that’s probably the way most people would navigate in a navigation menu. If they’re not sure, they might have it actually read. A lot of the things people don’t realize is that an HR block, that horizontal rule, actually will announce as a separator to a screen reader. It’s meaningful. It is not an empty thing. It’d be better to add lines like that. Not with a separator block or an HR. If it is a core separator, there’s a way to define it and tell it to just make it a div and not an HR. It would be better to do stuff like that with a border bottom. With CSS, because it’s decorative, it’s not meaningful.
>> BRIAN COORDS: Did it read them? I didn’t notice if it read them out or if it just–
>> AMBER HINDS: It doesn’t read them if you just tab because when you tab, it skips non-interactive elements.
>> BRIAN COORDS: Oh yes.
>> AMBER HINDS: If I had read the entire contents of that modal, then it would have.
>> BRIAN COORDS: Oh yes, because it do see it as a separator.
>> AMBER HINDS: You can fix that. If you change the HTML element from the default HR to a div, then it would make it just decorative and not meaningful to a screen reader.
>> BRIAN COORDS: For me, because it’s just linked paragraphs, I would rather just replace all of this with a menu. I don’t really care about the lines, personally. It’s not that important to me. In fact–
>> AMBER HINDS: That’s what I would recommend doing.
>> BRIAN COORDS: The only difference from this to this, oh I guess the subscribe is different.
>> AMBER HINDS: The other thing I noticed in this menu, which isn’t– it comes up, Accessibility Checker flags this, your episodes link there. I don’t know if you want to show what the link is. Yes, right there. It’s just a hashtag. It’s interesting because Accessibility Checker finds that, and it says, “Hey, this is not a good link.” That link, because it’s just a hashtag, on most pages of your website, it’s non-functional because that section doesn’t actually exist anywhere. It’s weird because it gets flagged by an accessibility tool. It’s not actually just an accessibility issue. It’s actually just an issue for everybody.
>> BRIAN COORDS: It’s just a bug on my website that I didn’t fill out this link properly.
>> AMBER HINDS: Sorry. I would always err on the side of, if you can use the same navigation that you’re using somewhere else, and maybe even display none, some elements. I know-
>> BRIAN COORDS: Oh, yes.
>> AMBER HINDS: -on classic themes, something that we do a lot is in the menu editor, you could apply classes to things, and you could be like, is mobile or is desktop. Then it will show or hide the entire item based on that. I don’t know if you can do that in the navigation block.
>> BRIAN COORDS: What I can do is–
>> AMBER HINDS: Oh, I know how you could do that. [chuckles] Nick Diego’s block visibility plugin.
>> BRIAN COORDS: That’s what I was going to say. I have that installed so I can definitely do that.
>> AMBER HINDS: You might be able to hide the subscription button link with that.
>> BRIAN COORDS: The only thing missing is contact, which I don’t know why I have it. I don’t have it here, but I have it there. There’s not a lot of logic to this website.
>> AMBER HINDS: I didn’t even notice that. Oh, this is also an interesting thing, which is that would be considered a WCAG failure. Loss of content on Zoom. If it’s in your desktop navigation, it also has to be in your mobile navigation because low vision users might zoom in, and that would mean a low vision user wouldn’t know how– Actually, this is the opposite. A low vision user could contact you, but a regular vision user couldn’t.
>> BRIAN COORDS: Let me see if I just delete this and I add a navigation block. I can pick my primary menu. It’s all the same elements, but I can design it differently to go down. Then I don’t need a mobile at all because I am already in mobile. The thing that I don’t know will happen is I’m technically inside of the same menu. I’m hoping that doesn’t break anything.
>> AMBER HINDS: I don’t know.
>> BRIAN COORDS: Other than that, I think I just need to match the design a little bit.
>> AMBER HINDS: It might have a nested tag. That’ll be interesting to see.
>> BRIAN COORDS: I need to add my contact page because that should be on both of them. Then, this subscribe button, I would just add a visibility setting and just say, based on screen size, hide on tablet and mobile.
>> AMBER HINDS: That won’t sync to your other–
>> BRIAN COORDS: No, it shouldn’t. I don’t know. Let me just refresh the page and see. Oh, yes, that will sync. What if I got rid of this subscribe form and I just had the same button on each? Is that bad?
>> AMBER HINDS: That’s a link that goes to a subscribe page.
>> BRIAN COORDS: I think it triggers a pop-up. It would be a pop-up in a pop-up.
>> AMBER HINDS: I guess you’d want to test what that user experience is like. I err on the side of, you should only have navigation elements in your navigation. I love the idea of getting rid of a form in your navigation. There might be people who disagree with me, and that’s why mega menus exist.
>> BRIAN COORDS: Oh, yes, because when you were saying that you want the same experience for both, it’s like, I don’t know. I know a lot of websites that don’t do that.
>> AMBER HINDS: It doesn’t have to be the exact same experience. It’s just, you have to have the same items, I guess, if that makes sense. Now, this instance where the contact actually existed on Zoom, but not on desktop, is one of those weird scenarios where that wouldn’t technically be a– There’s no addition of content on Zoom failure. It’s not technically a failure. It would only be a failure if you had something on desktop that didn’t exist on mobile or for zoomed-in users.
>> BRIAN COORDS: I’m just going to hide this block for now. It’s just not going to be visible on the front end. Let me just open the front end of the site. Oh, wait, that’s probably made it a little weird. Let me do it this way. Now this is an actual menu.
>> AMBER HINDS: Did you install the landmark navigation browser extension last time or the headings map one, either one of those?
>> BRIAN COORDS: Yes.
>> AMBER HINDS: I’d just be curious to see if it’s showing nested navigation landmarks for people, if you have that browser extension.
>> BRIAN COORDS: Oh, wait, did I pause my screen share?
>> AMBER HINDS: Maybe. I don’t see anything changing on it. There we go.
>> BRIAN COORDS: It looks so. Now it’s inside of itself.
>> AMBER HINDS: It seems a little odd. I don’t think you should have a navigation tag nested in a navigation, but I don’t know without looking if you’re able to change it on the mobile version to not be semantic, and if that’ll sync or not sync. You might have to create a separate menu. The downside of having two menus in using a plugin like this is that every time you update one, you have to remember to update the other one. I think this is a real issue that’s going to have to be considered if this is being pulled into WordPress core.
>> BRIAN COORDS: I think this is why a lot of things people expect to happen quickly, is like once– I think with something like Ollie, I think Mike can ship a little faster and stuff, but with core, they’re not going to ship this if they find an issue like this usually. They’re pretty good about if they see something like this that’s weird, and it isn’t really the right way to do something, they probably won’t. I’m curious to see where it ends up.
>> AMBER HINDS: Are you able to change it just in the mobile view and see if it doesn’t sync? Instead of using a navigation tag, can it be a div in the mobile? I’m not even sure if that’s a setting that you can change. No.
>> BRIAN COORDS: No.
>> AMBER HINDS: It’s basically going to be like you’ve used a navigation, it is navigation.
>> BRIAN COORDS: I could make a list. I could just do a list of links and then–
>> AMBER HINDS: Then put your form back.
>> BRIAN COORDS: Yes. I could also just turn off this fancy mobile menu and just have a normal like a mobile menu too.
>> AMBER HINDS: Before we make that decision, I’m curious about the issue with it not being modal. Is that fixable? Because that might tell you, “Okay, maybe I should turn off this Ollie thing because it’s way more code writing than I want to do to fix it.” Is there a way to fix the container for this mobile menu?
>> BRIAN COORDS: No. I know Mike that makes the Ollie theme, and Patrick. If I came to them with like, “Here’s what you should fix to make it more accessible,” I’m sure they would do it. I would just need to explain it to them rather than layer on something on top that might break.
>> AMBER HINDS: Okay. There’s no setting right now in Ollie for you to control. Last time you were able to go set banner landmarks and stuff. This is me trying to figure out, like, “How do you make it work in the editor?” Is there any sort of settings just for this mobile menu template part, where you can define a landmark?
>> BRIAN COORDS: The entire thing is if I go to the parent most group, let’s see [unintelligible 01:08:54]
>> AMBER HINDS: Can you set that to a dialogue? No.
>> BRIAN COORDS: No.
>> AMBER HINDS: Do you have the attributes for blocks plugin installed?
>> BRIAN COORDS: Say that again.
>> AMBER HINDS: Do you have the attributes for block plugin? Have you seen that plugin?
>> BRIAN COORDS: I don’t think so.
>> AMBER HINDS: That’s a free plugin that is really handy that I like. I don’t know if you would want to try it. It already is a div. With that, then you’d be able to add any custom attributes. Oh, Paula shared a link for it in the chat. You could give it a role of dialogue. Do you see this screenshot right there? It shows you, you can add any custom attributes that you want.
>> BRIAN COORDS: Oh, nice.
>> AMBER HINDS: You could use it to add the ARIA to define this as a dialogue and give it ARIA modal equals true. That might be an interesting test.
>> BRIAN COORDS: It’s not even a dialogue at all.
>> AMBER HINDS: I don’t think so. Wait, oh, there we go. There is a dialogue. It’s down a little bit. Go down two more. There. This is a dialogue. That does have a role of dialogue, and that does have ARIA modal equals true. I guess I would want to figure out why am I able to leave this? Also, it is missing a– No, it says ARIA label menu. It didn’t sound quite right to me, and then I was able to leave it. Maybe this is just a bug that you file with them.
>> BRIAN COORDS: Yes, because I can’t leave it.
>> AMBER HINDS: Maybe you need some JavaScript to be like, “Don’t allow the focus to go away.”
>> BRIAN COORDS: I can file an issue.
>> AMBER HINDS: I do think this whole discussion of what do you do with what’s inside it. The downside of switching away, and I’ll say this, the core navigation block doesn’t have as nice of a mobile experience. It definitely wouldn’t have your logo inside it. There are some difficulties with what’s currently there. This is where you have to start making decisions.
>> BRIAN COORDS: I think that’s literally the reason I did it is I like when your logo is on a mobile menu. I don’t know why. I enjoy it. I would be more than happy to just disable that functionality completely and also let them know what the issue is.
>> AMBER HINDS: Do you want to disable it for now?
>> BRIAN COORDS: Yes, let’s do it. It’s actually pretty easy. Let me reload this since I was messing around with all those. Now we have the contact link in here. This is Ollie’s version. Like I said, I think a lot of this is going to end up in core. It won’t be as many features like he lets you change what breakpoint and that sort of stuff. I think I can just turn that off. Let’s see. Oh yes, that’s the other thing. Now there’s no–
>> AMBER HINDS: Now there’s a contrast auditing. That’s interesting.
>> BRIAN COORDS: Let’s see. Mobile menu. Oh yes. I don’t know why it’s set to– There we go, set it to that color.
>> AMBER HINDS: To a lighter color.
>> BRIAN COORDS: That should change the submenu and overlay text. Let’s see. That’s fine with me.
>> AMBER HINDS: There we go.
>> BRIAN COORDS: This one keeps you in, right? Yes, that one keeps you in.
>> AMBER HINDS: You can’t tab out of it. I’ll be honest, especially on sites for remediation that don’t have really big budgets for a lot of custom code or that can’t wait on, “Oh, we’re going to go back to the plugin developer and ask them,” we’ll do stuff like this. We’ll just be like, “Let’s undo it and go back to the default core layout.” Maybe it’s not quite as fancy. It doesn’t support you having a subscribe form in it or the logo in it, but it fixes the accessibility, which, if this is the priority during a remediation, then sometimes that is a choice that you make because I’m sure you writing a bunch of custom JavaScript would have been way longer than what it took you to undo that.
>> AMBER HINDS: Yes, exactly. It’s like, at the end of the day, I think about what’s the value of having these things that are nice to have versus just having something functional for all users.
>> AMBER HINDS: I’m curious, are you able to trigger that Jetpack subscribe? I have a hard time knowing what triggers it or gets it to show up.
>> BRIAN COORDS: Yes.
>> AMBER HINDS: We can look at it.
>> BRIAN COORDS: Let me switch. I’m going to put in my incognito window so you can get the real experience of it. This is the Jetpack subscribe form. If I open just like an episode and I scroll to a certain position, I’ll get this pop-up form.
>> AMBER HINDS: Hit tab now that it’s opened without clicking on it with your mouse.
>> BRIAN COORDS: It’s still on the page.
>> AMBER HINDS: I noticed this. This is also on WP Tavern. I was like, “Oh man, we should report this.” I’m guessing this is the same scenario. Can you open it again, and we could inspect it? Because maybe, since you work at Automatic, you have a hookup and you could report some issues to them with this, rather than you having to try and fix it on your own website. Only for you.
>> BRIAN COORDS: Now I’m wondering if it’s going to show it again now that I’ve seen it.
>> AMBER HINDS: If it’s cookied.
>> BRIAN COORDS: Let me stop sharing real quick and make a new incognito window and share that. The nice thing about WordPress is everything’s open source, pretty much. Jetpack is open source. There’s a public GitHub repo, and you can just file an issue and stuff. Since they’re technically my co-workers, after I file the issue, I can message them in Slack and be like, “Hey, we found this accessibility issue. Can you prioritize it?” Usually, accessibility gets prioritized pretty much. You want to see what kind of an element it is?
>> AMBER HINDS: Yes. It’s just a div. This one doesn’t even have a role.
>> BRIAN COORDS: No.
>> AMBER HINDS: Here’s what I would like to see when there’s a pop-up like this on a website. Everybody’s always like, “Can you even have pop-ups?” The answer is you can. For really good examples, and it might be worth them looking at it, I actually think the free pop-up maker plugin does a really good job at accessibility. When the pop-up opens, it should get focus so you’re in it. Then it should be a dialogue element. It needs to be named.
They could use ARIA label by maybe referencing the heading that’s in the dialogue already to name it, so the name of it would be discover more from webmasters.fm. It should have ARIA modal equals true, meaning you can’t leave it without closing it, which is what the mouse user experience is. Then I also think in this instance, you’d want to make sure if you type in that field, that the label stays visible because I bet that’s placeholder text. I haven’t checked it yet to see if that’s a labeled field.
In case it auto-fills weird, there is a label there. That is the label. It’s well, there’s a screen reader label and then placeholder text, which is repetitive. I bet it would on a screen reader, read both of them. It would read the label, and it would read placeholder. It would say type your email, type your email input. You wouldn’t want to have both. Then this is where this gets especially difficult, but if it’s closed, can you return someone to where they were when it was triggered? I don’t know if that’s possible.
>> BRIAN COORDS: Like, because it was triggered scrolling and not by clicking an element.
>> AMBER HINDS: Yes. Or if it has a pop-up delay of let’s say 10 seconds and I was in the middle of reading something or having my screen reader read me something, and then this pops up, it gets my focus, I either submit it or I don’t. Let’s say I hit continue reading. Is it going to take me to the top of the page, and then I have to go back and find where I was? Or can it know where I was and return me where I was so I don’t lose that?
>> BRIAN COORDS: How do you test that?
>> AMBER HINDS: I guess I would first try and figure out if yours is just scroll-triggered. That’s another question too. If it is only scroll-triggered, if you didn’t scroll and you were just using arrow keys, would it still pop up if you didn’t have a mouse? because you’d want to ask keyboard users to subscribe to. I would turn on a screen reader, and I would be listening to the page. Then when it opens, and it gets focused, then when I hit continue reading, I’d go back. I’d want to know that it put me back where I was.
I suspect it might put you back at the bottom of the page because that’s where it actually is when it opens. When it does open, if you want to reach it as a keyboard user right now, you have to tab through every element and get to the bottom of the page, and then you can reach that pop-up. Now it’s up. Actually, it looks like it’s at the top.
>> BRIAN COORDS: Because everything’s in this div site blocks.
>> AMBER HINDS: Oh, everything’s in that site blocks div. It’s at the bottom below everything. Mike Packer says a pop-up being triggered by scrolling should be evaluated against WCAG 3.2.2 on input. That’s saying, are there unexpected changes when you’re doing some sort of input? I don’t know if scroll trigger counts as an input, but maybe it does. I would say like that for me, because it’s on every episode, and that is probably for your website’s goal, that is one of the most important things you have on the website for achieving the website goal. I’m assuming you want subscribers. Then I would consider that high priority because it’s global and it’s really connected to the website goal to try and fix it.
>> BRIAN COORDS: For me, I would be happy to not even use the pop-up because it’s probably like a secondary goal. I’d rather people subscribe in a podcast app or something. This one just sends an email when a new episode comes out. It’s not a high priority but for a lot of people that are using this Jetpack for newsletter subscribers, it is a high priority goal. It’d be nice to give them some best practices to fix it anyway, because beyond my website, it’s being used on a lot of other websites. It would be worth giving them the feedback either way, even if I just turn it off.
>> AMBER HINDS: I like to use the Mozilla developer docs a bunch when I create GitHub issues for people. I don’t know if you’ve spent time looking at those, but there’s a ton related to ARIA expectations and all of that kind of stuff. I just put one in for ARIA modal, and I think they’re going to have one for dialogue elements. It would be better to use a native dialogue element, but if they can’t, then that’s where– On the other one, we saw the role of dialogue, but when you add the role, it doesn’t necessarily add all of the native functionality, which was maybe why you were able to tab out of it. It would be probably less code work if they’re able to change it to a dialogue element instead of a div.
>> BRIAN COORDS: It’s actually a pain to write all that JavaScript of, when this happens, remove focus here and make sure– It’s kind of a pain, and it’s nice that dialogue is– I feel like that’s relatively new, the dialogues being able to cut out a lot of that manual work on pop-ups.
>> AMBER HINDS: I don’t know the history on the dialogue tag, how old it is. I want to thank you again because we are about at time for being willing to come on and show your website and talk through fixes with me and do stuff. I know it takes some bravery to be willing to be public with that, and so I very much appreciate it. I learned some stuff, and I am definitely going to go try and find wherever they’re talking about adding that nav stuff to core because I want to follow that because it’ll be interesting to see if that’s fixable or what the problems are. Thank you.
>> BRIAN COORDS: Definitely. No problem. Thank you. I appreciate you being very kind and pointing out all my mistakes on my website, and even the ones that are just flat-out bugs or me forgetting to put link destinations in my links. I appreciate that.
>> AMBER HINDS: Can you share where people can follow you if they want to learn more, or obviously, the podcast? What are other places they can connect with you?
>> BRIAN COORDS: Yes. Mostly, I am on my personal website, just my name, briancoords.com, and that has links to everything. I do try to hang out in a lot of the WordPress community slacks, and we have a WooCommerce community Slack as well, where there’s a lot of people that hang out there. As far as for if you need anything WooCommerce, it’s developer.woo.com, which is our developer hub, and that’s where I do a lot of publishing. Otherwise, I’m still using X as my social network for hanging out with people because that just seems to be where all the WordPress people are. Any one of those places you can find me.
>> AMBER HINDS: Awesome. You mentioned WooCommerce. Anything you can tease that’s coming with accessibility or WooCommerce or anything that you’re aware of in the future?
>> BRIAN COORDS: Obviously, you know firsthand that there’s been a ton of changes to the front-end accessibility of WooCommerce, and making sure that if you use a default block theme and a default store setup, then you should be able to get a pretty good accessible store out of the gate. Once you add in extensions and things, it gets a little bit harder because that is the wild west when it comes to WooCommerce extensions.
I feel like we have a new landing page. It’s like woocommerce.com/accessibility, and it goes over everything, not just the accessibility of literally woocommerce.com, but the accessibility of the product. We’re trying to get all of our main extensions like subscriptions and memberships and all that sort of stuff to– Basically, the goal is when you launch a store with core WooCommerce stuff, is it going to be accessible? woocommerce.com/accessibility, I think, is the landing page for all of that stuff. I should probably confirm this.
>> AMBER HINDS: It is. That’s where all the accessibility conformance reports and stuff are being published.
>> BRIAN COORDS: Obviously, you probably know more than me about it since you’ve been super helpful in making sure that we’re getting there. Then it’s such a constant battle because even every day, a new feature ships. We’re trying to build it into our testing pipeline and stuff, too. There’s a lot of stuff coming for that as well.
>> AMBER HINDS: I was a little bit buying time because I was re-scanning your website with accessibility [unintelligible 01:26:58] I thought real quick before we sign off, I’d show we had, I think when we started out, a whole bunch of those possible headings and just weird things that were being flagged in the nav menu. Now it’s down to 10, which is cool.
>> BRIAN COORDS: Nice.
>> AMBER HINDS: We fixed a bunch of things that an automated tool can’t even find. I always want to emphasize that because it was an hour and a half, and you did not prep at all. Not saying that in a bad way, but I’m saying it’s not like we spent four hours planning for this, and then you had to go and fix it. You spent an hour and a half, and you fixed a lot of things. I like to emphasize that, even if you only have an hour here and there, you can still fix a lot on a website. It doesn’t have to be this huge investment. Just get started.
>> BRIAN COORDS: Just chip away at it.
>> AMBER HINDS: Thank you again, and thank you, everybody, for coming. We’ll see you back here in two weeks for our first Tuesday meetup on the 17th. Bye.
>> CHRIS HINDS: Thanks for listening to Accessibility Craft. If you found this episode valuable, please help us reach more people by subscribing, reviewing, or liking the show, and sharing this with your colleagues. Accessibility Craft is a production of Equalize Digital Inc. Steve Jones composed our theme music. To learn how Equalize Digital can support you on your accessibility journey, visit us at EqualizeDigital.com.