This episode is a recording of a December 2025 WordPress Accessibility Meetup. In this live, hands-on session, Brian Coords joined Amber Hinds to walk through real-world accessibility remediation on an active website, Brian’s own podcast site, webmasters.fm. Rather than relying on contrived examples or intentionally broken demos, the session centered on practical fixes applied directly to a production WordPress site, giving attendees an authentic look at how accessibility work happens in real projects. 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 Website Remediation with Brian Coords
Listen
Summarized Session Information
This session covered a real-world accessibility remediation process on a live WordPress website. Rather than reviewing theoretical examples, Brian and Amber worked directly on Brian’s podcast site, showing how accessibility issues appear in real projects and how to prioritize fixing them efficiently.
The audit began with a review of automated accessibility findings, using them as a starting point for identifying both quick wins and issues that required human judgment. Topics included evaluating video accessibility, reviewing captions, and understanding when warnings signal real barriers for users. This set the stage for a deeper conversation about balancing automated testing with manual review.
From there, the audit focused on practical remediation techniques, including live code updates to fix empty links and improve accessible names for linked images. Brian demonstrated how a single, well-considered code change—adding meaningful ARIA labels—could resolve accessibility issues across the entire site, illustrating the value of addressing problems at the component or template level.
The session also explored how to improve accessibility using WordPress’s full site editor, without writing additional code. Brian and Amber walked through fixing landmark structure, improving navigation labels, organizing footer content, and using conditional visibility tools to ensure content appeared in the right contexts. These changes significantly improved the site’s semantic structure and screen reader experience.
Finally, the discussion turned to content accessibility, with a focus on podcast transcripts. The presenters identified shortcomings in a plugin-generated transcript block and replaced it with a more accessible accordion built using WordPress core blocks. The session concluded by emphasizing that accessibility is an ongoing, iterative process—and that meaningful improvements often come from small, thoughtful changes applied consistently across a site.
Session Outline
- Introduction
- Video Accessibility and Captioning Considerations
- Empty Links and Linked Images Without Accessible Names
- Live Code Remediation in a Custom Block
- Landmark and Navigation Improvements Using the Block Editor
- Footer Structure, Consistency, and Conditional Content
- Improving Heading Structure and Screen Reader Context
- Transcript Accessibility and Accordion Remediation
- Closing Reflections
Introduction
The site being reviewed was built with WordPress full-site editing using the Ollie theme and relied mostly on WordPress core functionality, with only a small amount of custom code. Because accessibility had already been considered during the site’s design, the site did not contain widespread failures, making it an ideal candidate to demonstrate realistic remediation workflows rather than overwhelming edge cases.
They would start by reviewing automated issues identified by the Accessibility Checker plugin, as these findings are often the fastest and most impactful place to begin remediation. The issues were reviewed from highest to lowest severity, with discussion about when warnings require human judgment rather than immediate fixes.
Video Accessibility and Captioning Considerations
The first issue reviewed involved video warnings. Video warnings are flagged as critical because tools cannot automatically determine whether captions, audio descriptions, or other accessibility requirements are met. Together, they inspected a podcast episode video embedded using the YouTube player, which Amber noted is generally accessible when used correctly.
They reviewed best practices for video accessibility, including keyboard navigation of controls, caption accuracy, avoidance of flashing effects, and ensuring that important visual information is described verbally when necessary. While Brian confirmed that episodes do not include screen sharing or changing visuals, they discovered that captions—though carefully edited—were missing speaker labels. Speaker identification is essential for deaf and hard-of-hearing users, and it is recommended that caption exports be updated to include speaker names. Rather than dismissing the warning, they agreed this was a valid issue to fix later and should remain open until corrected.
Empty Links and Linked Images Without Accessible Names
Next, the session moved to a more immediately fixable issue: empty links caused by linked speaker images on episode pages. These images served as links to taxonomy archive pages for podcast guests but lacked accessible names that described their destination. Although alt text existed in some cases, relying on media library alt text was insufficient because the image’s purpose in this context was navigational, not descriptive.
Amber walked through why adding alt text alone would create confusing screen reader output (such as “link, image, headshot”) and why this approach does not scale well for large sites. Instead, she recommended adding an aria-label to the link element itself that programmatically describes the destination, such as “All episodes with [Guest Name].” This approach ensures clarity, avoids redundant announcements, and fixes the issue site-wide with a single code change.
Live Code Remediation in a Custom Block
Brian demonstrated how the speaker images were generated using a custom WordPress block and walked through the PHP code responsible for rendering the output. He implemented a live fix by adding an aria-label to the anchor tag using WordPress translation and formatting functions, ensuring the label was translatable and dynamically populated with each speaker’s name.
After deploying the change directly from GitHub to his hosting environment, they validated the fix by rescanning the page in Accessibility Checker. The empty link error was resolved, confirming the effectiveness of the remediation. Amber emphasized that the remaining missing alt text warnings could safely be ignored in this context because the images were now decorative and no longer relied upon for accessible naming.
Landmark and Navigation Improvements Using the Block Editor
With code-related fixes complete, the session shifted to improvements that could be handled entirely within the WordPress block editor. Using browser extensions to inspect heading and landmark structure, Amber highlighted issues with nested landmark regions, unlabeled navigation landmarks, and content that existed outside of meaningful landmark regions.
Brian demonstrated how to resolve these issues by editing the site’s header and footer templates. This included removing redundant HTML landmark elements, renaming navigation landmarks to meaningful labels like “Primary” and “Footer,” and ensuring that all major content areas were properly wrapped in semantic regions. These changes improved both screen reader navigation and overall document structure without requiring additional custom code.
Footer Structure, Consistency, and Conditional Content
The discussion then focused on footer content that appeared only on podcast episode pages, including a subscribe and reviews section. Amber explained that while consistency is important, it is acceptable for posts and pages to have different footer content as long as it is consistent within similar content types.
To resolve landmark issues and avoid clutter on the homepage, Brian demonstrated using the Block Visibility plugin to conditionally display the section only on posts, removing it entirely from pages where it did not belong. They also discussed whether the section should be treated as footer content or an aside, concluding that either approach could work as long as it was properly labeled and semantically clear.
Improving Heading Structure and Screen Reader Context
Amber emphasized the importance of heading structure for screen reader users, especially in repeated areas like footers. To improve context, Brian added a screen reader-only H2 labeled “Footer” at the top of the footer region. This ensured non-visual users could quickly orient themselves when navigating by headings.
They also converted visually styled paragraphs into proper heading levels, reinforcing that semantic structure should take priority over visual hierarchy. Amber noted that designers often style headings to look smaller or larger than their semantic level, and that accessibility requires developers to focus on document outline first, styling second.
Transcript Accessibility and Accordion Remediation
Toward the end of the session, they examined the podcast transcript component provided by the podcast plugin. Amber identified significant accessibility issues, including the use of a checkbox input instead of a button, missing focus indicators, and incorrect screen reader announcements that did not convey expanded or collapsed states.
They agreed to abandon the plugin’s transcript block entirely and replace it with the WordPress core accordion block. Brian demonstrated inserting the accordion, configuring it to use a proper heading level, and moving the transcript content into the accordion panel. This provided correct semantics, keyboard interaction, and screen reader feedback while still allowing the transcript to be collapsible for visual users.
They also discussed future enhancements, such as improving transcript readability by using paragraph breaks and headings for chapters, potentially exporting structured content from transcription tools to preserve semantic structure when publishing episodes.
Closing Reflections
The session concluded with reflections on the value of live remediation, particularly how small, thoughtful changes—both in code and in the editor—can have site-wide accessibility impact. Amber emphasized that many of the most meaningful improvements came from addressing global templates and components rather than individual pages. Brian shared that the session highlighted areas where accessibility best practices intersect with evolving WordPress tooling, especially within full site editing.
Both agreed that accessibility work is iterative and collaborative, and expressed interest in continuing the remediation process in a future follow-up session.
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: Welcome to WordPress Accessibility Meetup live website remediation with myself, Amber Hinds, and Brian Coords who is a Developer Advocate at WooCommerce. A few announcements if you have not been here before, it’s good to know that we have a Facebook group to connect between meetups. You can find that if you go to facebook.com/groups/wordpress.accessibility. This is a great place to ask questions, share what you’re working on, get feedback, and help one another in between meetups. Everyone always asks, is this being recorded? Yes, it is being recorded. It takes us about two weeks to get an edited video, corrected captions, and a full transcript, and then that will be posted in the same place that you can find upcoming events on our website. The quick way to get there is to go to equalizedigital.com/meetup. You can also get notified of the recording if you join our email list. We send out a weekly newsletter with both recordings, articles, articles from around the web, and other event announcements related to the meetup and accessibility events across the internet. You can subscribe if you go to equalizedigital.com/focus-state. The final way that you can find the recording is we do put the audio up on our podcast.
If you prefer to just listen, you can find that at accessibilitycraft.com. We are seeking additional sponsors for the meetup. This is part of the official WordPress meetup program, but they told us that unfortunately, they don’t have the funds to help us cover the cost of captioning and transcribing and making it accessible for folks. They said, “Go out and find sponsors.” If you or your company would be interested in learning m ore, please reach out to us. You can contact myself and my co-organizer, Paula, if you email meetup@equalizedigital.com.
This is also the email address to use if you have any suggestions for the meetup, if there’s any topics that you would like to see us cover, if you would be interested in speaking, or if you need any additional accommodations to make sure that the meetup works well for you. Please feel free to email us. I’ve said already, my name is Amber Hinds. I am the lead organizer for the meetup and the CEO of a company called Equalize Digital. Equalize Digital is a mission-driven organization and a corporate member of the IAAP focused on WordPress Accessibility. We have a WordPress plugin accessibility checker that helps you find and fix problems on your site.
We also offer online courses for NVDA and voiceover screen reader testing and a few other things. Recently, we do accessibility audits, remediation, and consulting. We do have a sponsor that I would like today, and that is GoDaddy. GoDaddy is generously covering the cost of live captioning for this event. GoDaddy’s mission is to empower a worldwide community of entrepreneurs by giving them all the help and tools they need to grow online, including a simpler, safer WordPress experience. GoDaddy provides a managed WordPress experience that is as easy as it is effective.
The latest version of WordPress comes pre-installed with exclusive themes, plugins, and tools to get you up and running quickly with automated backups, updates, and malware removal so that our pros can spend less time on monotonous maintenance and more time building their businesses. You can learn more about GoDaddy if you go to godaddy.com. I would always like to encourage everyone on no matter what social media platform you prefer, if you can find GoDaddy, they’re on most of them, and send them a quick message or tweet or post on their wall or whatever it is on that particular profile, and say thank you for sponsoring captions for WordPress Accessibility Meetup.
That is really helpful. It helps to encourage them to want to continue sponsoring and to know that that sponsorship matters and people value it. I do want to note, as I mentioned earlier, this is our last meetup of the year, and it’s going to be January so soon, which I can’t believe. I don’t know where time always goes. In January, normally we meet on the first Thursday. The first Thursday is New Year’s Day, January 1st. Nobody wants to come to meet up on that day, myself included. We will be meeting on Thursday, January 8th at 10:00 AM, US Central Time. The same time, but on the second Thursday of the month in January.
We’ll have Deneb Pulsipher and Kosi Asabere giving an introduction to their Screen Reader Ropes course, demystifying screen reader use for manual testing. If you want to learn more about screen reader testing, this would be a great meetup to attend. Now, of course, I am going to stop sharing and make sure that we have our wonderful panelist, Brian, up here. We can kick things off because I know we have a lot planned for today.
Brian, I am so excited to have you join us today to talk about how we can actually fix problems because that is something that so many people have said the theoretical lessons are great, but sometimes you really just need to see someone, see a problem and show how to fix it. I really appreciate you being brave and being willing to come and do that and show a real website, not like a fake website that we put fake issues on because I think it gives people a more real perspective. Welcome.
>> BRIAN COORDS: Thank you. I’m happy to be here. I’m, I guess, a little disappointed that there were issues when you asked and I provided the website. I was like, “Amber’s not going to find anything.” Of course, you were like, “No, I found a few things.” I’m excited to see what you found and how we’re going to fix these issues on my website.
>> AMBER: Yes. For everyone who’s not familiar with you, before you start sharing and we dive in, can you give some background on who you are and what your experience is with WordPress?
>> BRIAN: Yes. Currently, I actually work at WooCommerce, which is a e-commerce plugin for WordPress. I assume if you’re using WordPress, you’re probably familiar with WooCommerce. I work there as a developer advocate. that means really spend a lot of time just in the community, figuring out what people need from the software, working on things like documentation and tools and stuff like that, just so that anybody who’s building on top of WooCommerce has all the resources they need and all the people inside WooCommerce have feedback from the community and they know what people are saying outside of the company.
That’s my role. Before I was there, I spent like at least 10 years working at a WordPress development agency. I was a technology director at an agency where we built all sorts of WordPress websites. I’ve been through all the different ages of WordPress, have a long history of just building client sites for people and doing things like accessibility audits and doing things like maintenance plans and all that stuff. then just a little bit of contributing to WordPress on the side as much as I can, not very much, but a little bit. Yes, that’s my background and what I’m up to now.
>> AMBER: If anyone wants to see Brian decimate me in a WordPress speed build, you can go find on WordPress.tv. There is a video of him and me live on stage trying to build the same website as fast as we can and he did way better than I did.
>> BRIAN: That’s true, but then we were on stage for another thing where it was like an interview or something or a panel. We were on a panel and I feel like you just came off very smart and intelligent talking about everything and everybody was like, “What’s this guy doing here?” I feel like we balanced it out.
>> AMBER: Yes. Today we’re a team. No competition.
>> BRIAN: Good.
>> AMBER: Do you want to go ahead and share your screen? For everyone who wants to look at this site as well, I’ll put a link in the chat. What we’re going to be doing is working on Brian’s podcasting website. What I actually really like about this site, Brian, and why I think it’s perfect for us to do, is that there’s not a million issue. I feel like in the time we have, which is like an hour and 15 minutes, we’ll be able to fix a lot. I also think it’s good because it shows that you have put some consideration in, like, I didn’t go here and see everything fails color contrast, for example. It seems like you’ve thought a little bit about accessibility already.
>> BRIAN: Yes, that was definitely part of the setup for this site. I guess some context is number one, this is the URL and this is the live site, so whatever we do, we will just change it on the live site. I’m not super worried about it. It’s not a high traffic site or anything. It’s built with WordPress and full site editing. Most everything that’s on the site can be tweaked inside of WordPress. There’s only a little bit of stuff that I use custom code for. That makes it a little bit interesting. It uses the Ollie theme from Mike McAlister and Patrick Posner. There’s like this theme for WordPress, full site editing.
When I did build it out, I showed it to Mike and was like, this is what I’m thinking I’m going to do. He, with his designer, I was like, “Hey, let me help you out if you’re going to try to actually pull off a dark theme,” and gave me a little bit of design advice and we went through the color palette and all that sort of stuff. I felt very confident about the color palette of the site and a lot of the markup because most of the code is just from WordPress core. I was feeling pretty confident about it, but I’m curious to see what we discover.
>> AMBER: I realized I initially shared that link with hosts and panelists, so it’s there now for everyone. It is webmasters.fm is what we’re going to be looking at today. We did put Accessibility Checker on here, the pro version, and you ran a full site scan. I thought what makes the most sense is to look at some of those automated issues first, because that’s always when I’m doing remediation, the first thing I’ll do, because it’s things that got identified quickly and some of them can be very critical issues for folks. Do you want to go to your open issues report?
>> BRIAN: Yes. Let’s see if I click here.
>> AMBER: I think what makes sense is to just go from top to bottom, because we do have things currently sorted by severity, so we have highest things down to low. Of course, the first one is a video is present, which is actually a warning, found an error. I want to explain the difference for folks. A warning is something that needs a human to assess it. We can’t definitively tell if it’s a problem or not. Sometimes you’re like, “Why would a warning be critical?”
Well, if there is a major problem with the video, like perhaps it has no captions, then that would be a critical failure for someone who is deaf. We don’t know if there’s an error or not. Obviously, I don’t think we’re going to watch all of these videos, but it might be worth going and just looking at one and I could tell you a few things that I would look at to decide if a video is good or if you can just dismiss the video and mark it. Do you want to go to one of these?
>> BRIAN: Yes. I’m going to go to the front page of the site. It’s really, it’s a standard WordPress site where it’s just a bunch of posts and each post is a podcast episode. There’s a plugin that handles it. I’m going to load up this first one and they all just have this YouTube embed. I think there’s maybe a plugin that does like a– where it doesn’t embed it right away. Yes, here we go.
>> AMBER: Yes, so the things that I would look at, so you’re using YouTube player, which is generally considered accessible, so that’s okay. if, but I would always like tab through all of the controls. If you’re using the core YouTube block, it’s fine. Sometimes some page builders have their own like block for this where I’ve found that actually they change all the controls and they don’t work. I would look for that. On any video, I would also check, and you probably don’t have this because I’m assuming, is it just the two of you talking each time, or do you ever do screen sharing or anything?
>> BRIAN: We don’t do screen sharing. I don’t think I never change the view. It’s always just this, yes.
>> AMBER: Then you don’t have to worry about, but if you had that, you’d want to check for things like color contrast in your screen share. You’d want to make sure that any important visuals that are shown are described. You also want to make sure if it’s an animated video that you don’t have any rapid flashing, like strobe-like effects. You know on TV where they have warnings sometimes because those can trigger seizures for people. The other thing you want to do is check your captions. I’m curious, are your captions auto-generated or are you adding those to YouTube?
>> BRIAN: The way that I make the podcast is I use Riverside FM to record it and edit it. It does, similar to other tools like Descript where it does an AI version of it. As you’re editing, you’re spell checking and deleting stuff and cleaning it up. I wouldn’t say that I get it perfect, but I usually go through the entire episode and then I export those and import them to YouTube. They should be my transcripts. They do start with, I think, an AI generation, but I do go over them. The one thing I noticed on, and it wasn’t this video, I think it was the one with Kenan that I looked at, but I mean, you could maybe turn it on and we could watch for just like a second with the captions on.
>> BRIAN: Let’s see, I’m going to just mute it so I don’t.
>> AMBER: We see the captions coming in and this is the thing I noticed, which is that it’s not labeling who is speaking. That might, knowing that you use Riverside, I’m not familiar with Riverside, but Descript has this where when you export the SRT file, you can toggle on show speaker labels. You should maybe be able to just add those and import them in when you put it on YouTube.
>> BRIAN: We’ll probably get to this part later. This is the same Riverside export, but just as a text file. I do have the speaker labels. I should be able to do that then.
>> AMBER: You want to have speaker labels and captions too because it’s not always clear who’s saying what and that is really helpful for folks. In this instance, I would say, I wouldn’t ignore the warning for this video because we’ve confirmed that we found a problem in the video. I would just leave it open and then you, your content team, at some point would go back through them and fix that one little thing we found and then you can go ignore the warning and close it out. With the idea being that the only ones that are still open are ones that need to have corrected captions with the speaker label added. Should we go back to something that we can actually fix right now?
>> BRIAN: Yes, let’s do it. Empty links. Interesting.
>> AMBER: Do you want to click on empty link? You may have noticed also below that on that table was linked images missing alt, which if you have those, it may also throw the same error and it is the exact same 19 I looked at. It looks like they’re all images of people and maybe you could click view on page and we could see one of these on a post. Can you explain what this is?
>> BRIAN: Yes. On all of the episodes, there’s a picture of the guests and speakers on it. If I go to see all my episodes, you see like a little thumbnail of the different guests and who was in the episode. I think they’re a taxonomy. If you click on it, it should show, if I have multiple episodes with the same guest, it should show that. This is basically a taxonomy in WordPress, like a category that gets assigned to the posts. then I have an image that I assigned to it and then it shows the image so you can see a picture of the guest. It looks like I do not have text in these links, in these little image bubble links.
>> AMBER: Do you want to go back into the post single and maybe inspect the code on it for just a second?
>> BRIAN: Yes. Should I do it with this one?
>> AMBER: It might be helpful to close access. Yes, you could show the code. Well, I think we don’t– I noted this. I think we need to figure out a dark mode solution for our code inspector because we have a color contrast failure because it’s somehow adopting your background. Why don’t you close accessibility checker and we could just inspect it in DevTools only because I want to show yours also.
>> BRIAN: Yes. Dark mode sites are the bane of everyone’s existence. We have this issue at Woo too where– [crosstalk]
>> AMBER: Did they break a lot of different plugin files?
>> BRIAN: Maybe it’s because it’s dark mode, it breaks everything, all your checkout forms. Yes.
>> AMBER: I did notice that yours doesn’t flag this. If you were to expand the link for your image, you do have alt on it. It says Brian Coord’s headshot. My initial thought is probably, because you custom coded this element, right? Because taxonomies in WordPress don’t normally have images assigned.
>> BRIAN: Correct. This is a custom block that I wrote that spits this out, which is open source so I can show the code for that too. It’s pretty simple.
>> AMBER: Cool. I’m guessing that you just told it get alternative text from the media library and for your guess, you’ve maybe not been adding the alternative text to the media library. This could be a content fix in that you could just go add all of that in the media library and it would solve this problem. However, there’s a couple of reasons why I don’t like that and why I think it’d be better for us to go fix the code. One is this example right here, which is when you’re adding a headshot of a person to a media library, you might not always know when it’s being used. In some cases, it might just make sense to say it’s a headshot.
In some cases, you might actually want to describe the visual appearance of the person. In this case, when it’s a link, going to a place where you can see all episodes with that person, you don’t actually want someone to hear link, image, headshot, because they’re going to think that just opens their headshot bigger. You need the name of the link, so the alt text, to be descriptive of where the link goes. There’s an issue of allowing content creators to control that, that they will frequently make mistakes.
I see this all the time. The other reason why I don’t like it, you don’t have 500 episodes yet, but let’s say you did, and you had 500 guests. You wouldn’t want to fix that on every single one of those individual images. That would take a lot of time. If we just add an ARIA label to this link that programmatically puts the right person’s name in, then it would fix it for every instance on the whole site in one thing. I’m wondering if we can take that approach. Does that sound good?
>> BRIAN: Yes. That’s an issue that I feel like is– especially since the block editor that has been confusing, because when I was at an agency, we would tell people, just go into your media library and add alt text to all your images, and it’ll spit out– but with the image block in core, it doesn’t, you want to have contextual alt text and stuff. I feel like that’s a new area that I’ve been sort of learning about what really are the best approaches to alt text. I’m actually really embarrassed that I did this and did not put any screen reader text for where the link goes. Yes, do you want to see the code for it or what would be helpful?
>> AMBER: Yes, can you actually– is this one that you think you could fix live?
>> BRIAN: Yes, I can show you the code. This is GitHub. This is just a repo where I keep all my WordPress functionality for this website. What I can do is I’ll edit it as a pull– I’ll edit it right here, and it’ll make a pull request, and then I’ll deal with actually merging it later if that’s okay. We could try to merge it. Really, everything here, this is the block that spits out. Is this big enough or should I zoom this in a little bit?
>> AMBER: Maybe one more. Yes.
>> BRIAN: We’re looking at a page on GitHub with a block called the term image block, and we’re looking at the render.php file. If you’ve built like custom blocks for WordPress in the past, you’ve probably– this format will look familiar. If you haven’t, really this is just a little piece of PHP that’s going to handle outputting what we see on the front end of the website. It’s going to do a couple things, like it’s going to get the post ID of whatever blog post we’re looking at. It’s going to get all the speaker terms for it, so what are the speakers that are assigned to this post?
There’s a little extra logic to find my name and always put me in the front since I’m the host. I always want my picture to be the first one that you see in the list of people on the post. The actual block just loops through, and it’s really down here, I’ll zoom in a little bit more, where we’re actually doing all the magic, which is we have a link, it goes to the speakers page, and then it uses a WordPress core function to actually generate the image itself.
The nice thing about that is if there was alt text in the media library, it would be in there because WordPress would take care of spitting out that image. Although if we wanted to filter it, we definitely could. Also, it does a good job of giving us responsive images and it does things like lazy loading and some of the performance stuff by using this core WordPress function. Really, all I’ve written here is, it’s really these three lines are the most important.
>> AMBER: The function that you’re talking about is wp_get_attachment_image, just for anyone who wants to look that up that’s maybe listening. I think what makes the most sense in this instance is adding ARIA-label equals, and then we need something to describe not just the name of the person so that it’s unique, but also where it’s going. I don’t know if you would call that– if you just write something like, see all episodes with name or something similar, whatever makes sense to you as far as it’s unique and it has to describe where it’s going.
>> BRIAN: Would that be on the link element or on the image element?
>> AMBER: It would be on the link element. An ARIA-label will not definitively be read on an image. It’s more correct to use alternative text. You could potentially hard code alt text, but in that instance, I think you wouldn’t be able to use wp get attachment image, or you’d have to filter it, which seems a lot more complex. In this case, I would just use an ARIA-label on the link. When you add an ARIA-label on the link, then it basically overrides anything that is contained in the link.
>> BRIAN: What would be the difference between doing that and doing like, sometimes you do like a span element with a screen reader text class. It’s like a span, but it doesn’t visibly show up. What’s the difference between those two approaches?
>> AMBER: The reason that I wouldn’t do the span is because in the instance where someone has added alt text in the media library, it’s going to read the alt text for the image, and then it would read whatever you have in your hidden screen reader text. For the example of your image, where it says Brian Coord’s headshot, what a screen reader user would hear is link, image, Brian Coord’s headshot, go to all episodes with Brian Coord’s.
If you think about it, like that alternative text, Brian Coord’s headshot is irrelevant to the purpose of the link. In this case, the image of you or the person is decorative, in a sense. It has some meaning in that it says who the person is that you’re clicking on, but it doesn’t really matter that it’s an image of you going to that page, if that makes sense.
>> BRIAN: Yes, I think that makes sense.
>> AMBER: There’s just a lot more noise that distracts from the actual, this is what the link does.
>> BRIAN: I wonder, because one thing I was thinking about is I don’t know, but I might use the same block. If you go to that person’s page, I think it’s just the same block, but the problem here is, it’s a link and it probably shouldn’t be because it just links to itself. At this point, I probably do want that really good description. I want a different version of it, like a non-linking version.
>> AMBER: You would probably want to change this to not be linked because there’s not really any point in having the same page link like that. For now we could at least fix the empty links.
>> BRIAN: What I’m going to do is in my PHP, I’m going to make a to-do of make a setting to do an unlinked version. In this case, if I put this ARIA label here, it’s not going to really matter what the alt text is here because it’s not going to get read.
>> AMBER: Correct.
>> BRIAN: What should our label be?
>> AMBER: I would probably say– you want it to be concise, so maybe all episodes with, and then you need a vARIAble, I guess, to input the person’s name.
>> BRIAN: Can I remember all my word lists?
>> AMBER: Can you tell us what you’re typing? Is that too difficult to do?
>> BRIAN: No, no, no.
>> AMBER: Wait, I’ll try and do it.
>> BRIAN: If I can remember it. I’m doing the ARIA label attribute on the link element. For the value of the attribute, I’m trying to use the WordPress translation functions. What’ll happen is when I am running this locally, I’ll get a bunch of coding things like you didn’t escape your HTML. It’s like these security things. To be fair, they’re a little strict on things like this where I’m writing the data myself. I’m not passing any vARIAbles. I’m not worried about security as much, but this will at least make it translatable. It’s like all episodes.
>> AMBER: All episodes with, and then you’re going to add a vARIAble after the comma?
>> BRIAN: Oh man, I haven’t been coding like this in so long. It’s going to be like a sprint F. Do you want me to do this, like the full real way I would write this?
>> AMBER: Sure. Yes.
>> BRIAN: I’m just thinking out loud real quick.
>> AMBER: While you’re doing that, I’ll see if I can find the full file that you’re looking at so folks can get that link out of the notes in the chat.
>> BRIAN: Give an example here, okay. [silence] The first function I’m going to do is the WP sprint F, and this is going to let me mix vARIAbles in. Normally you could just write the ARIA label like without all of this, but I’m just going to give you the full thing. What I need here is– oops. I’ll explain all of this as I’m reading it. Sprint F is basically going to combine two different strings together, and the first string is going to be all episodes with, and then the second string is going to be the name of the person. I’m going to combine these two things with a sprint F, so percent S is the first string.
The second one is the second string, and then I get to pass the rest of those as just the arguments that I’m going to add to it. The first one is this, all episodes with, and by wrapping it in a udnerscore, underscore function, this is like a WordPress function, it makes it translatable. If somebody wanted to make a translation of this plugin and have it in a different language, this string would be something they could translate pretty easily. The last one I need is the speaker’s name, which I think would just be speaker-name. Yes, I think that would be correct. Do you want me to break that down a little bit more?
>> AMBER: I think that’s probably good. You’re opening a PR, do you have– is this going to sync over to your live website if you merge it in?
>> BRIAN: I can, if you want. I might break it too, because normally I would do this on a test.
>> AMBER: How much of a cowboy do you feel like being today?
>> BRIAN: You want to see what happens if I do that? Yes, I have to– normally there’s a build process for blocks because we’re editing the PHP part of it. I can just copy and paste it. Watch. We’re going to commit these changes. Copilot gave us a commit message for this commit. Enhance anchor tag with ARIA label for speakers. Added ARIA label to the anchor tag for accessibility. That sounds correct, right?
>> AMBER: Yes.
>> BRIAN: Create a new branch for this commit to start a pull request. I don’t normally work directly in GitHub, but I kinda like it for some things like this where I can just not pull a whole repo down, that sort of thing.
>> AMBER: I will fully admit that I am a cowboy, and I do stuff like this all the time, and my team hates and loves it, or just hates it, I don’t know. I don’t know if Steve is here. If Steve’s here, he can say something in the chat about it.
>> BRIAN: Will you open up the– what am I trying to say? Will you open up the WordPress editor and do it?
>> AMBER: No, I don’t do that. Every once in a while, if we have something that doesn’t have a sync setup, I go edit it on GitHub, and then I go into the WordPress editor. It has to be version controlled, so it has to be on GitHub. I might also go put it there, but I don’t ever just go edit it in the WordPress editor.
>> BRIAN: I’m not saying I’ve never done that. I’m very curious if this’ll work, as I have no code. I probably should’ve just opened up my code, but I think it’s on my other laptop. All right. All I did right here is I’m adding it to the built version of it. Normally, you’d run this through a build process, but I’m just going to skip all that. We have a pull request.
>> AMBER: Yes, fully admit, when you do live coding, that it is not always 100% perfect, best practices for how dev works.
>> BRIAN: I just want to make sure it’s going to spit this out. I’m very curious if this function’s going to work, because I haven’t written this code in so long. I just saw Mark Rewiley’s in the chat, and I’m sure he’s yelling at his computer right now, “Brian, you forgot something,” or something like that.
>> AMBER: He also had said, you could potentially have a screen reader text band and ARIA-hidden on the image, which you could do. I would, instead of maybe ARIA-hidden, I’d probably put role-presentation on the image instead, if you were going to do that, because this is one of the weird things about when you start working with automated tools. Our tool does this, and also Wave, and some, I think Axe might also.
An image that has empty alt and has role-presentation won’t get flagged as having, “Hey, did you forget to put alt text on this, because we assume you intentionally added the presentation role.” It’s like a way to tell the tool, don’t warn me about this image. You start to learn, like, “How can I code to the tool a little bit,” which is good or bad, I don’t know.
>> BRIAN: What I’m going to do is because I’m using Pressable as the hosting company for this, I can actually just deploy this branch, and then if I don’t like it, I can just switch it back to the main branch. I’m not going to merge anything, but I’m going to deploy it. We’re going to see if it works. I’m going to have to refresh as soon as I get the sign that it’s deployed. I’m just not showing that part of it on the screen, because I didn’t want anyone to see my Pressable account. All right.
>> AMBER: Totally makes sense.
>> BRIAN: If we had a white screen of death right here, then it is totally my fault.
>> AMBER: You might want to remove the accessibility checker parameter. Oh, well, actually, I think it did work, because it says the element was not found on the page anymore.
>> BRIAN: Oh, nice.
>> AMBER: No, well.
>> BRIAN: It did, but it didn’t spit it out.
>> AMBER: The ARIA label’s empty.
>> BRIAN: It’s there, but it’s empty. You know what it is? It’s probably– let me go back into it. It’s probably missing an echo or something like that. I’m going to jump back to that file and just edit it real quick, and it’ll push it automatically. Just jump in here.
>> AMBER: Real life, we sometimes have to Google what these functions are, right? Even somebody who’s been doing it for many years.
>> BRIAN: Honestly, yes, I would Google it. I’ve gotten to the point now where I would probably use a little AI coding help for a lot of this stuff. I’m a fan of using a lot of AI tools, Cloud Code and Cursor, and I would tell it what I want. The trick is that I have over a decade of WordPress experience, so I can look at it and pretty quickly say, “I think this is the problem.” You know what I mean? I wouldn’t say go Cloud Code crazy on your website. I would just say, if you know what you’re doing and you have the experience, then I think it’s okay because I can look at what it spits out and I can usually tell pretty quickly if it’s good WordPress code or not.
>> AMBER: Well, and if you’re doing it locally in your IDE and you have WPCS coding standards set up, linting, it’s going to also warn you if the AI code is failing a security issue or something.
>> BRIAN: Yes, that’s the other thing is, like I said, I normally wouldn’t do this on a GitHub. I just forgot that this site was on my other computer. That one’s going to deploy. I think that’s all I was missing was I was in our ARIA label, I was doing the function with all the work, but I didn’t have my echo command to actually spit out the HTML that we were generating. Let’s see if it fixes it. This is probably the only one that’s going to require some custom coding. All right. Let’s refresh the page. Oh, there it is. ARIA label equals all episodes with Brian Coords.
>> AMBER: Cool. You could go– we’ve confirmed that it’s on this page. If you open Accessibility Checker, I think that you can do just the front end or you go to the back, whatever you want. If you click that button. You see how there’s still a little flag there? If you click Rescan This Page, it should go away now. Oh, wait, there’s only one. The image doesn’t have alt text, which is fine, but the link error went away.
>> BRIAN: At this point in this version of it, the alt text is not as important because it’s a decorative image. It looks like when I uploaded this picture of Ian, I didn’t put, I just– Yes, there’s an empty alt right there.
>> AMBER: At this point, you could decide to– on the editor for this post, you could ignore that issue. If you’re like, this is decorative, it doesn’t matter. If you wanted to add some sort of meaningful description, it is possible for people to enter links and find images. They might not do it, but you could. In this case, I would say I wouldn’t worry about it having empty alternative text in this context because it doesn’t matter.
>> BRIAN: What I’ll probably do is after this, go back to my block and make a slightly different version for this page where it does show the alternative text and it doesn’t have it as a link. In that case, I would want a description of the person. That’s the best approach.
>> AMBER: Yes, generally. I would try to ask your guests to give you a description because I don’t really like, you don’t want to visually describe people.
>> BRIAN: Yes, you don’t want me to do it.
>> AMBER: It is nice, blind people want to have access to the same diversity information that sighted people have when they look at an image. If someone’s not an English speaker, they might not know that Ian is a male name, for example. That might be helpful information for them.
>> BRIAN: Okay.
>> AMBER: Let’s go back. You could do, if you wanted, a full site scan because your site is really small and it would make all those issues go away, or we can just skip it, do a few more, and then do one later.
>> BRIAN: Yes, let’s do that.
>> AMBER: I think the linked image, empty alternative text, those were the same ones. You’ll notice you went from 19 to 18 because you re-scanned the one page, so the one went away.
>> BRIAN: I see, yes.
>> AMBER: Ambiguous anchor text, there’s only one of those. That’s basically a link that doesn’t have any words or any real meaning. This is an interesting one. It says continue reading. It also looks like it’s not a link. There’s just a hashtag in there. I’m curious to see that. You have a theory about what this is?
>> BRIAN: No. My theory is that if you’re on the site, I don’t know how to manually trigger it. Sometimes it just shows up. There is a pop-up that says subscribe. It’s like a subscribe pop-up, like one you would see on Substack or something like that. In this case, it’s the Jetpack plugin. It pops up, and then if you don’t want to, it’s a dismiss option. You just click continue reading, and the pop-up should go away. I’m guessing that’s what it is.
>> AMBER: Let’s skip this one for now because I want to circle back to that pop-up later if we’re able to figure out a way to trigger it. What I can tell you right now, the continue reading is maybe okay, except I don’t know. It shouldn’t be a link. If you’re closing a modal and going back to a page, it would be a button.
>> BRIAN: That’s a new thing in– because the way you design it, when we look at it, for Jetpack, you design those in the block editor, and you can change the text and use blocks and stuff. We probably could use a button block. Because the button–
>> AMBER: Well, a button block is still a link.
>> BRIAN: It now allows you to change the element, right, to be a button, to actually semantically be a button.
>> AMBER: Did that get released?
>> BRIAN: I think so.
>> AMBER: I didn’t know if that got released.
>> BRIAN: I think it is, but I’m not 100% sure. If so, then I can also file an issue on the Jetpack repo and let them know, “Hey, you should make this default template.” We can come back to that one.
>> AMBER: I think possible heading is interesting, and I want to talk about a few things with the possible heading. This will definitely all be an editor for people that are not super devy. I think we did our most–
>> BRIAN: That should be the only code.
>> AMBER: Yes, that was the most code we were going to look at. Do you want to click into possible heading and just maybe click on the first one and view it on page? This is flagging a text that says available on all popular platforms. Which is in the footer. Basically, a possible heading warning says, we can tell by your styles that you’ve made this paragraph really big. Are you sure this should actually be a paragraph? In this context, I actually think it should be a heading. Sometimes a very short sentence is just a short sentence, but this is like a heading for the YouTube and the Open in Your App and the RSS links.
What I thought about when I saw this is my first thought is, I always like to, when I’m assessing a site, just look at overall heading hierarchy, period. If you want to close Accessibility Checker, there is a browser extension that I had you install called Headings Map, which I use all the time. If you click that, it should open a panel on the left that shows the headings on the page. All we have on your episode is a heading one, and then there’s no other headings. When I look at the episode, it’s pretty short, but something that I think that probably ought to be a heading is the transcript. We’ll come back to that in a minute.
>> BRIAN: I’m wondering–
>> AMBER: Also–
>> BRIAN: Well, I have tweaked this template, so I’m wondering if there’s a different version of it that does, because I thought I had headings for some of these now, some H2s, like links and video on some of the newer episodes, maybe.
>> AMBER: That’s the other thing. It probably would be helpful for people if you had some more meaningful headings for different parts of the episode, like you mentioned, link, video. The screen reader users, when I do user testing, they use headings a lot to be able to jump around and understand what’s there. This, I think, we’ve fixed in the editor, and the other thing that I’m like, while we’re here looking at this, let’s look at landmarks. You can look at landmarks in Headings Map, but there’s another browser extension that I think is a little more clear called Landmark Navigation.
>> BRIAN: You want me to do that one real quick?
>> AMBER: Yes, let’s do that one real quick. What this does is it shows you what your heading structure is, and then if you hover over them, it should highlight them. I think the banner was, you scrolled down, so we’re not seeing it. Yes. It shows you the labels. Here’s a couple things that jump out at me on this. You have two nested banner landmarks, which is a little odd. It means you have a header tag inside a header tag, and then your primary navigation label is just navigation. a screen reader user would enter this, and they’d hear navigation, navigation, navigation, as opposed to like navigation primary.
Your footer one says footer navigation, so they’d hear navigation footer navigation. You don’t ever want to put the name of the landmark in the landmark ARIA label. You would just put footer, or for the first one, primary. Content info is sort of the same thing, where you have, it looks like two footer tags nested. I noticed something else. Do you see that when you hover over it? It’s just getting the bottom, but the section above that we were just looking at, that I’m thinking, this is part of the footer, is not in the footer. Now hover over the main, and you’ll notice it’s also not in the main. It looks like that content is probably not in any sort of landmark region at all.
You could inspect it in like browser dev tools, and I think it’s just in a section tag. I kinda want to fix all the landmarks and all the headings at the same time, because you do it in the same part of the place, if that makes sense. You could choose if you want to start with the header or the footer, wherever makes sense to you, and then maybe walk us through where you would go to fix those.
>> BRIAN: The nice thing is that this is all in the block editor, so we will not be writing code. There’s actually, as you’re saying it, there’s some good stuff in the block editor that shows these elements, and I think will help break it down. I’m going to open the WordPress site editor. I’m going to close some of these other tabs. Just give it a minute. What we’re going to do is, I think we’ll look at the template of the page first, and then we’ll look at an individual page because the one downside is there’s– the template that determines where’s the header, where’s the footer, what are the menus, all of those sorts of things. I think there’s the separate issue of each blog post probably could use some better stuff. No, no, no, my site’s not loading.
>> AMBER: That’s the fun of live demos. I will grab the links for people who asked for them for those two browser extensions and put them in. Let’s see if I just crashed my website or not. There we go. We are now inside the WordPress site editor, and we’re actually looking at the template for a single blog post. What I can see is, it basically looks like the front end of the website except for a few weird things like my speaker avatar thing is loading every single speaker in my database for some reason, so that’s just a bug in this custom block that I built.
I have a post date block that isn’t showing a date, but I think that that’s fine because we’re just looking at a template. What’s nice is if I open the document overview sidebar in the block editor, it basically gives us, very similar to what you were showing a couple different things. One is there’s an outline view that if you’re looking at a single block post, it’ll show you like the H1s, the H2s, all of the headings and stuff. It’s not going to show anything right now because we’re inside of a template. we’re looking at the full design of the page rather than one individual blog post with content inside of it.
I think we’ll come back to that one later. This is the list view that just shows all of the elements on– it’s basically showing you all the elements on the page. You can see I have a header element at the top. I have a group that has my– it should have some– Yes, it’s a main HTML element. We can just consider this the main. In fact, maybe I’ll rename it main just so we don’t lose track of where it is, but this is our main. As you said, my reviews synced pattern here is just not inside of anything. I have a footer here. Should we start with the header and the navigation up here?
>> AMBER: Yes, sure. You have to click edit on the header in order to go into that, right?
>> BRIAN: Yes, you do click edit and it gives you this view. This is one of those weird things of the block editor where sometimes you don’t have to do that. Sometimes you can just click into it and just stay on this page. I never know when or why. What I’m thinking is that this is the header template part that the site spits out. Inside, I have another header. I’m guessing that this one, if I scroll to the advanced for this one, it’s also chosen a header HTML element. I’m guessing it doesn’t need to because this header here is going to do that for me. Do you think that’s the issue?
>> AMBER: I think so, Yes. It’s just got two. I would remove the header declaration on that group block that’s named header and just make it a div probably. You’ll only have one header instead of nested ones. then the other thing we wanted to fix in the navigation was the name of the nav block. You do that, so you click on the settings cog on the navigation block, and then scroll down to advanced. This is super buried. There’s a menu name field. yours just says navigation. I just make it say primary.
>> BRIAN: I really miss the old WordPress way of the way menus used to work. You would name your menus, they’d be part of your theme. I miss that a lot.
>> AMBER: I miss that too. It took me forever to figure out how do I change this?
>> BRIAN: Yes, I would have never get– that’s not what I would have tried at all. That’s awesome that you knew that.
>> AMBER: I think that was all we saw in the header, right?
>> BRIAN: Yes, I think that was it. The footer had the same issue. If I scroll down to the footer and I look inside, there’s probably a group within– that’s being called a footer, but we don’t need it to be because the footer template part should already do it. We’ll have to save everything and try it on the front end to see.
>> AMBER: To make sure, yes.
>> BRIAN: I will rename the footer. I’ll make it a div instead of a footer element since we already know that it’s wrapped in a footer element. The same thing here, I’ll select the navigation menu and I will go to that cog settings screen and to the advanced tab. What should we call this menu?
>> AMBER: Footer is fine or because– you want it to name what it is, but in this case, the location probably makes sense because I’m not sure what globally you’d say contact and about is. I think it’s probably fine to just say footer.
>> BRIAN: I don’t even know. It’s one of those things, I’m sure nobody’s ever clicked on either of those links. Yes, we can call it footer.
>> AMBER: Now a question that I have is the reviews and subscribe box, and I clicked around your site a little bit. It’s only in the footer on episodes. It’s not in the footer on pages or like the homepage or anything. Do you think of this as footer content or do you think of this as like an aside?
>> BRIAN: That was actually what I was going to ask you. If I wanted to put it inside of this footer template part, what I would need to do for WordPress is I would need to have two different footers. I would need a footer that I use on maybe my category pages or maybe I’d want this on the category pages. I for sure would not want this on the homepage because I use it in the homepage higher up in the content.
I can make two different footers and I can move it into the footer and then on the homepage have a separate footer and that’s one option. I was going to ask you about an aside because I think that would have been my default, would have been to make it an aside element. The only issue is that where it’s used on the homepage, it’s just part of the main content flow. I don’t think I would want it to be an aside there but I’m not actually sure. Yes, what do you think about that?
>> AMBER: You can have asides in the main, but you’re right. Typically when you have an aside, it’s sort of saying this is less important than all the other content in the main. In our blog posts, we have like a email subscribe in the middle of the blog post and it’s marked as an aside because it’s like clearly not part of the article even though it’s in the middle of the article flow.
I think it could be an aside. I feel like I would most like it to be in the footer and have multiple footers. Of course, I don’t know if that could be done now. In that case, maybe it makes sense to just make it an aside and make sure it has a good label for it. that it has a name that makes it clear if someone is navigating via landmarks that this is like the subscribe section.
>> BRIAN: When I think of an older WordPress site, this would have been a sidebar probably. You would go into a single blog post. [crosstalk]
>> AMBER: [unintelligible 00:54:38] area?
>> BRIAN: Yes, like a widget area on the side of the screen and you’d have– if I think of like a food blog and you see one on desktop, there’s always like subscribe and about me and some social links. This is very much sidebar content. The reviews are also fake. These are just made up reviews because I need to go find my real reviews.
>> AMBER: I don’t think you want to tell people that.
>> BRIAN: Actually, you know what? I’m five stars on a pocket cast. I’m going to change that. There’s actually a few ways to do this in WordPress. I think the easiest way is I should be able to drag it inside the footer and it shouldn’t– I’m going to just close off the sidebars. I’ve dragged that whole box into the footer and now it should be semantically sitting inside the footer element. I think that’s fine. I think what I would– there’s two ways to do it. One is that I can go make a separate footer for my homepage. I’ll save this and I will show you on the front end of the website that it should theoretically be correct.
We should have solved all those landmark issues and then it’ll just be showing up twice. I do often use a plugin called Block Visibility for when I’m dealing with these sorts of websites. What I would probably do is I would use that plugin to say, don’t show this container on the homepage. The nice thing about that plugin is it’s not going to like hide it with CSS. It’s actually going to just remove it completely and it would not render at all on the front end of the site. That’s probably what I would do. I could also duplicate my footer and do that too.
>> AMBER: Do you have Block Visibility on your site already?
>> BRIAN: Yes, I must.
>> AMBER: Could you show us how to do that?
>> BRIAN: Yes, I don’t know why my site’s going so slow today, but I don’t know if it’s my site or my internet. We’ll just do a wallet saving. What I would do is I would put it inside another group because right now, so what this block actually is, it’s called a synced pattern. It’s a pattern in the block editor. If I edit it here, it edits it across my whole website. It’s used in a lot of places. It’s like a reusable component. I don’t think I get like sidebar settings for it. I need to wrap it in another group. I’ve wrapped it in a group. In my group, in the sidebar, there’s a visibility panel under the settings panel that I can click and I can expand. This is the block visibility plugin, which I can put a link in there.
>> AMBER: Yes, I’ll grab a link for it. This is a super awesome plugin. We use it all the time.
>> BRIAN: Let’s see, what would I want to hide it based on location?
>> AMBER: Can you do it by post type? I feel like hide it on all pages because right now that’s the way it is, right?
>> BRIAN: Yes. That’s a good question. I’m hoping that this is all savings, my WordPress site’s going really slow. Yes, so here– oh, well, now we’re going to see it here. Yes, it was just on, you’re right, because it would have just been on post, I think. I don’t think I would have put it anywhere else. We can make a rule. Oops, I’m going to hit reset all. In block visibility, you have tons of options to hide blocks. You can hide it based on what browser they’re using.
You can hide it for a time. You could say, after this date, hide this block. You can hide it based on a URL, or you can show based on URL parameters. If somebody clicks a link in your email newsletter and you just want to show them something, but not show it to everybody else, you can use tracking parameters. There’s all ways that I use this plugin. We will do it based on post type. That’s under location, right?
>> AMBER: I think so, yes.
>> BRIAN: Location, if, and then it’s– adding a rule for location, show the block if post type is any of the selected, and we’ll say post.
>> AMBER: It is interesting that it looks like it’s still saving, but I think it did save before, because we saw it on the front end.
>> BRIAN: Yes, though, I think that the plugin I used for the podcast is probably not one I’d recommend. I’m having a lot of performance issues with it. Now, if I refresh the front page, and I scroll down, and it’s gone.
>> AMBER: It’s still there
>> BRIAN: Oh, it’s still there. It’s still saving.
>> AMBER: [chuckles] It’s still saving.
>> BRIAN: I’ll just do a little hard refresh. That seems like the right approach, right?
>> AMBER: Yes. Our landmarks now, if you were to look at those–
>> BRIAN: There we go.
>> AMBER: It’s saved, and it’s gone.
>> BRIAN: Should I go to a single-episode post?
>> AMBER: Post? Yes.
>> BRIAN: We’ve loaded a single episode post. I’m going to scroll down at the bottom, and you can see that footer content now. If I open up the–
>> AMBER: Click on the landmark. You successfully got rid of the nested landmark regions, and you have better names on your Toon Navigation. That looks good.
>> BRIAN: What is content information? That’s what it’s for?
>> AMBER: Content information is what a footer is. If you’re using an ARIA role instead of a footer HTML tag, the role that you would give it is content info.
>> BRIAN: What does that mean, particularly?
>> AMBER: I don’t know the history of that. I guess they were like, “This is the information about the website goes here.” [laughs] I don’t know.
>> BRIAN: I guess so, because you put your copyright information and your privacy policy, and I guess I could see that.
>> AMBER: Scott did ask a question here, which is maybe interesting. He said, “RE site-wide footers. Can you clarify? While there is no strict technical rule that demands pixel-perfect consistency of elements across all complementary areas, the best practice is to maintain consistency in the purpose, structure, and labeling of similar elements.” I think what he maybe is talking about is the consistent navigation is a check in web content accessibility guidelines. Generally, you do want some consistency, but I’ve never seen it flagged where it’s like, on posts there’s this extra section above the footer or in the footer. I think it would be more of a problem if it was inconsistent across all of the posts. If you think of this kind of content has consistency across it, then I think it’s fine. I think it’s okay that you have this in the footer here, but not on pages. It just gets more weird if it’s randomly sometimes on posts and sometimes not, which can happen with some page builders if every page is being built individually and not using templates.
>> BRIAN: I could understand the logic of if you’re navigating– It’s just like anything. If you’ve already seen the footer, you’re probably going to skip over it, or you’ve already seen the sidebar, you assume it’s the same content, you’re going to skip over it. If it is different from page to page, I could understand that that would definitely be an issue. You’d potentially be missing out on content.
>> AMBER: This takes us to the headings. Specifically, to that note of we see that this is repeated content. When you are a sighted person, and you’re on a website, you can typically tell I’ve entered the footer now because it has a specific visual design, or maybe a different background color, or it’s just obviously repeated. If you’re just listening to a page with a screen reader, you don’t have that same visual change. What we like to do is we will add a screen reader-only H2 at the top of the footer that literally says footer.
Then all of the headings in the footer would be H3s and or nesting down if you have sub-items in there. What I would recommend here is that you do have that screen reader-only H2. Most themes support if you just put a class of screen-reader-text on it, but the downside of that is it hides it for you in the editor. There is a free plugin called Screen Reader Text Format for the block editor that I really like that allows you to just say, “This is screen-reader text,” if you wanted to try doing that.
>> BRIAN: It adds an option to make any block or just a paragraph and–
>> AMBER: Any section of a block. For example, when we do our Black Friday sale, and we have text that’s crossed out with a strikethrough of the original price, if you were to inspect that, we actually have text to the left of it that says “Original price,” because screen readers don’t read that something’s struck out. It’ll just read the number. Then we have text to the right of it for screen readers that says “Price right now,” or something like that. You can say, “Just this word,” or “Just these two words in a paragraph.”
That’s what’s really nice. It works the same way as doing the strikethrough or something like that, where you just select some portion of any block. It works on buttons, it works on paragraphs, headings, all sorts of things.
>> BRIAN: That’s cool. I didn’t know about this plugin. Let’s use the plugin search. That worked perfectly. We’re going to install and activate this. There’s a few things now that I’m thinking about it that I’ll probably structurally change about this. Because I use this in two spots, I use it in the homepage, and I use it in the footer, there’s a good chance that I would maybe want a different heading level. If I’m in the homepage, I might want it to be an H2 because there might be something else, but in here I might want it to be an H3. It’s always something to keep in mind.
Now that I’m using it in the footer, and I don’t need it to be a synced pattern, I’ll probably just detach it and make them two separate things and treat them separately.
>> AMBER: You’re clicking the three dots and then detach on the toolbar menu.
>> BRIAN: Yes. Now it’s not part of that synced pattern anymore, it’s its own thing. Somewhere at the very beginning, I should probably just add an H2?
>> AMBER: Correct. I would do it before your hidden group so that you have the benefit on pages where that group is not, that they’ll still have the H2. Don’t put it inside that group.
>> BRIAN: It’s really the first child element of my footer now, before any groups. Is that okay?
>> AMBER: Yes, that’s totally fine. It doesn’t have to be any group at all.
>> BRIAN: I’m going to make an H2, and I’ll just say footer.
>> AMBER: Then you select all the text. It’s in the More Options menu. I just realized, do you have to refresh the page after activating a plugin?
>> BRIAN: Yes, I definitely do. Good point. Corinda asks if there’s a non-block equivalent for screen reader text. It really depends on what builder you’re using. There might be builders that have some sort of equivalent for this in their settings, but you’d probably have to look at the documentation for that specific builder.
>> BRIAN: I’m going to add– Inside my footer, but before any of the content, we’re adding an H2 that says footer, and I’m selecting the text that says footer and hitting the More Options in the block toolbar. Now I can see screen reader-only as one of the options. I’ve selected it, and then I don’t know if there’s any visual–
>> AMBER: It should put a red outline on it when you selected it, but I’m also
>> BRIAN: Go in here. Maybe because of the dark theme.
>> AMBER: It does look like it’s highlighted and selected. The dark theme is throwing it off.
>> BRIAN: If I click it, I can tell that something is there.
>> AMBER: It’s highlighted. We could always save it and look at it on the front end and make sure that it is indeed hidden.
>> BRIAN: Let’s refresh the front end. I don’t see the word footer here, but should we inspect the HTML on the front end and just confirm it’s there?
>> AMBER: Yes.
>> BRIAN: If I hit inspect, I have my footer, and the first thing inside of it is an H2. The only other thing is it probably does add some space, maybe. Maybe not. Having an H2 with no content. I might confirm that there’s no margins or anything.
>> AMBER: Oh, maybe if you have a margin.
>> BRIAN: That’s a minor design thing. Actually, I’m not sure if it’s doing anything, but it might be a little bit. I don’t know. I would maybe clean that up and just confirm. Then I would want to make the other text– There’s the text that says, “Available on all popular platforms.” Would I make that a heading as well?
>> AMBER: I would. knowing that structure is helpful, you might even consider– This should be an H3. You might consider putting an H3 above– You can make it an H3, but you can still make it smaller. That’s what you’re about to do right now.
>> BRIAN: I was going to ask you if that’s okay.
>> AMBER: Yes. We do that all the time. If you get a Figma file, and there’s all these headings, and a designer’s like, “Oh, that one’s an H5,” and you’re like, “No, it’s not. It’s an H2, you just made it look like an H5.” What matters most is the outline structure. You can change the design to fit the outline structure.
>> BRIAN: That’s good to know. I wasn’t sure if the visual hierarchy was a part of it at some level, if you want it visually to match.
>> AMBER: Maybe a little bit. I would suggest adding one to the subscribe box, because that’s an important thing you want people to be able to jump to. If you don’t want it to be visual, again, you could make it a screen reader-only H3.
>> BRIAN: What would I call this box?
>> AMBER: Email subscription. Something that makes it clear that it’s a way to subscribe via email.
>> BRIAN: I’ll do that. I will make it screen reader-only. Just to be safe on that heading that says email subscription, I will open up the margins and make sure they’re set to none. I like how it doesn’t show you anything, but just to make sure, because what I’m curious about is-
>> AMBER: You don’t want it to add a space.
>> BRIAN: -the flex gaps and how that affects it if there’s no content in there. We’ll see.
>> AMBER: You know what just occurred to me? Normally, there’s also some extra settings. I’m betting that this plugin, while it works and the site editor is not– part of why you might not be able to see it hide in the editor in the same way that you do in a post, is it might not be fully optimized for full site editing, I’m guessing, now that I have a thought.
>> BRIAN: Let’s refresh it.
>> AMBER: You check it on the front end.
>> BRIAN: This is an issue that a lot of people, I’m sure, are probably familiar with, which is, even if you have an empty element, it’s going to add the gaps and margins. The way that the block editor works is, I think it adds margin top to all the inner child blocks. There’s a few things I can do for that. I can make the group that it’s in, I can make it a stack maybe, and use Flexbox controls, or I can go to this paragraph, and I can force there to be no margin on top of the paragraph.
Originally, there was a space like that, but I can grab the margin slider on my paragraph down to zero and remove it. This is something where, if you’re really trying to match a pixel-perfect design and stuff is really important. For me, for my personal blog, I probably wouldn’t even notice. I’m not a huge visual pixel-perfect person, but it’s just something to think about when you’re hiding text inside. It would be nice if you could actually hide the full block and not just the text inside of it, but I don’t know if that would affect anything.
>> AMBER: Do you want to show the headings now on this post with the headings map?
>> BRIAN: Yes, let’s see what it looks like.
>> AMBER: Oh, this is one where you were putting more headings in.
>> BRIAN: Yes. This was a template that I updated the flow of. I have an H1 for the title of the podcast episode, and then I have an H2 for links and an H2 for the chapters, which I’m not sure why I have the chapters here. I guess it’s interesting, but it doesn’t do anything. Then, the transcript we haven’t talked about yet, which is like an accordion.
>> AMBER: I think we should go there. We only have about, I don’t know, 15 minutes, so we got to go faster. The transcripts, the thing that’s interesting about it, you can click it with a mouse. If you try and tab to it, you don’t see a focus. You’re on the button now. You are on the transcript right now. Press the space bar. The reason why this is, and if you wanted to, maybe close headings map and inspect that so we could show the code for a second, it’s not just that it’s missing a focus around it, it’s actually a checkbox.
If you listen to this with a screen reader, you just hear transcript checkbox, and you can say checked, unchecked. It doesn’t say expanded or collapsed, which is really what you want. Obviously, you want this to be a heading, but you can’t really make a label a heading. What I want to tell you is that I would abandon the way this transcript is being added into the page, because I think this block is not good. I think this is coming from your podcast plugin.
>> BRIAN: Yes, this comes from the– I think it’s Seriously Simple Podcasting.
>> AMBER: Is this edited on a single post, or it’s in the template?
>> BRIAN: Here, let’s open an actual single post. We were looking at the template, but this is part of the post content. When I make a new post, I have a pattern that has a spot for the video and a spot for the description, and all of this stuff. Usually, I go through, and I finish things. I make sure the links are in the text.
>> AMBER: Links on words, not naked.
>> BRIAN: Because on YouTube, you have to do your links like this, and then I copy it to YouTube, and then I’m supposed to come back and finish the links and stuff. Then the transcript is a custom block from this Castos Seriously Simple Podcasting plugin, but I just don’t think it does anything for– The only thing I’m thinking about is your podcast has an RSS feed, which is how people will subscribe to it in their podcast app. I don’t think that this block affects that. As long as that’s the case, then I don’t think I need the block at all.
>> AMBER: I don’t think you do, because I think it pulls off of a meta field elsewhere for the podcast.
>> BRIAN: I know that I put a file for it. I don’t know.
>> AMBER: That’s what I think goes out in the feed. Dan had asked, “Why not use the disclosure block?” Here’s why. The disclosure block doesn’t support headings, and we really want this to be a heading. Also, the thing to be aware of with the disclosure block is, it really is actually intended to be used for disclosures. Some screen readers will read it as legal disclosure, or it’ll say something like disclosure triangle, because it has a triangle on the left. It just reads weird and it doesn’t allow the heading. I’m curious, have you updated to 6.9 yet?
>> BRIAN: I think I have, because I think they do it automatically. Are you thinking about that accordion?
>> AMBER: There’s an accordion block now in core.
>> BRIAN: Yes. I don’t know if it’s exactly the same, but we’ve had it in WooCommerce for a while now. They beta-tested a version of it in Woo. I’ve played around with that one. I’m not sure how close it is. I’m entering the block inserter, and I’m searching for accordion, and I’m finding it and I’m going to select it and insert it into the page. This is the accordion block. This is where the block editor gets a little funky sometimes because there’s an accordion, and then inside of the accordion block is an accordion item, so that you can have multiple items in your accordion.
Then inside of your accordion item is two more blocks. One for the heading, which I believe– I don’t know if it’s an actual heading or not. You’ll have to tell me about that. Then another block for the panel, where you can put in anything you want inside of it. This is what you’d use?
>> AMBER: There should be a heading, and I think you set the heading level up higher in the blocks, because it’s going to use the same heading level for all of them. It might be on the actual accordion block, not the item.
>> BRIAN: I don’t know what this [crosstalk].
>> AMBER: The parent container.
>> BRIAN: Oh, the full– [crosstalk] There we go.
>> AMBER: That’s where you can say in this instance, you want an H2. It defaults to an H3 because they’re assuming that you might have accordions under some parent, I think.
>> BRIAN: Then I could say– Oops, transcript has that H2. Then I could take all of this. I’m going to take all the transcript I have and I’m going to go into my accordion panel. Oops. Where did it go? Wait, I lost it.
>> AMBER: Does the undo button work?
>> BRIAN: Yes. Oh, yes, I forgot there’s an undo button.
>> AMBER: Maybe.
>> BRIAN: There we go. If not, I have all these in Riverside somewhere. I’m just scrolling to find the end of it so I can really select it. It doesn’t want to let me copy it. It’s very janky block.
>> AMBER: Casta says you cannot–
>> BRIAN: It just wants to copy the whole block.
>> AMBER: Oh, what about copying it off the front end? [crosstalk] It does not want to allow you to not use their block.
>> BRIAN: I’m not 100% sure, but I am pretty sure that I know who built that block because I think they work at the same company as me now, and I’m going to go bug them.
>> AMBER: Be like, “Why is this an input and why does it not have expanded attributes?”
>> BRIAN: It was so long ago, so I’m guessing they didn’t– I’m going to delete the Casta’s transcript block.
>> AMBER: This is me being, “Delete your weird hanger empty paragraph at the end.”
>> BRIAN: Oh, yes. There’s always one of those. Sometimes I just cannot get rid of it. There we go. Nice. Because the accordion heading is an H2, it matches visually my other H2s, which is nice.
>> AMBER: Whereas before it was a lot smaller.
>> BRIAN: Yes.
>> AMBER: There’s a lot of styling stuff that you could do on these that probably we won’t do right now, but you might want to do.
>> BRIAN: On just accordions in general or the [crosstalk] block.
>> AMBER: You could put a line at the bottom or something so it makes it clear when it’s expanded that it’s open. This block, when you insert it by default, doesn’t really come with any styles, but there’s a lot that Core support is adding, assuming your theme has the appropriate JSON for it.
>> BRIAN: What’s nice is I can add a border to the whole thing or I can add the border just to the bottom. I’m just changing all the border settings. There’s a border at the very bottom of the panel. Then I think when it’s closed, it shouldn’t show. I never know how to actually close it. There we go. Since it’s such a new block, I assume that the all E team hasn’t really added styles for it, but I’m excited to see themes start giving some nice styles to these.
I have a question, though, about it. For a podcast transcript like this, is it okay to hide it in accordion? Because ultimately what I’m concerned about is I don’t want people to land on this page and it to just be this really long scroll of all this content. That’s what I want the accordion for, but do you feel like that’s okay, and the semantics of how I’ve put that in here, and is there any other considerations I should have about it?
>> AMBER: No, I think it’s okay to have it in accordion. I think that’s really common for podcasts. What might make it helpful, potentially, but of course, you have to decide how much extra effort you want to put into each episode, is having some other written summary other than the transcript and the chapters. Maybe extra blurbs or something, and maybe AI can help with that, I don’t know. We do that for ours.
>> BRIAN: I have a paragraph, is that not enough though?
>> AMBER: Yes. Maybe that is enough. Then if they want to read it more. I think having headings is helpful. I don’t know if you can do this in Riverside, but in Descript, when we edit ours, we can put the chapter markers, and we can output the transcript with the chapter markers, and you can actually copy it to Markdown, and then when we paste it in a blog editor, it makes them heading blogs, which is really handy. Then, as you’re skimming the transcript, you can find the section that you wanted to read about more easily. That might be a way to enhance it.
>> BRIAN: Is there a specific HTML element you should use for– We were talking about the speaker labels and having the speaker label ahead of each thing. Is there any specific stuff or is it fine just all as paragraph text?
>> AMBER: I think it might be better, maybe if they were headings. Would those be Heading 3s? That also might just create a lot of noise. It’s probably okay just as paragraphs. I don’t know a total answer to that. I don’t know if there’s any blind folks here in the chat who would want to talk about it. I will say, just from a visual standpoint, I suspect that might actually only be one paragraph block with line breaks in it because I’m not seeing any spaces.
>> BRIAN: Yes, you’re totally right.
>> AMBER: It would probably be easier for anyone to read if each individual person’s statement was a paragraph. I would try to figure out, is there a way in Riverside that you can copy it out that way, because I know with Descript, when we copy as Markdown, each person’s thing is a paragraph block when I paste it in, instead of one paragraph that has line breaks.
>> BRIAN: I’ll look in and see if I can get the chapter titles as H3s or whatever. If I get it in Markdown, I can very easily do that. If it doesn’t give me the paragraph breaks, again, I could probably in Markdown, if I have the raw file– A lot of times I’ll take these and I’ll open them in a code editor, like VS Code, and then I can do things like select all the beginnings of each line and add another break or I can do some stuff like that. I’ll see what I can do.
>> AMBER: I’m realizing it’s 11:30 my time. Of course, we never get through everything we want to get through, but I feel like we’ve done a lot that impacted a lot of global elements on the site, which is a huge improvement. I really appreciate you being game for showing how to do all of this, both with code and full site editor, which I know I definitely am not as experienced with. Thank you.
>> BRIAN: Thank you for walking me through this. There’s so many things that I’m still learning about the rules of accessibility or the best practices, and then just how do I do this in the block editor, which still is undiscovered territory. They probably stumble through.
>> AMBER: I don’t know if you’d be game. Maybe later in January, we could come do a part two. Would you be up for that?
>> BRIAN: Yes, definitely.
>> AMBER: I’ll connect with you about that. If anyone wants to follow up with you after this, obviously, they can go to webmasters.fm to read all the transcripts that you do have or watch the videos, or listen. What are other ways they can connect with you, Brian?
>> BRIAN: Yes, definitely. If you’re interested in me, it’s just my name, briancoords.com. I do a WordPress newsletter, get into the developer side, or just what’s happening in the project. Then, mostly, I’m active on YouTube and Twitter, and also some of the other social networks. If you want to talk about anything WooCommerce-related, you can find me in those places, as well as we have a Woo community Slack that’s free for anybody who’s building on WooCommerce, and you’ll find me and my coworkers there. Everybody’s very friendly, and there’s a lot of chatter about WooCommerce stuff specifically there. Yes, I’m available in all of those places.
>> AMBER: Wonderful. Thank you so much again, and thank you, everybody who tuned in. I hope everybody has a good holiday season, and we’ll see you all back in January.
>> BRIAN: Cool. Thank you.
>> 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.